/* LayerLab implementation of the approved 1672 × 941 subject note composition.
   Raster assets are limited to the subject illustrations. All text, data, and controls stay live. */

body[data-sn-task="note"]{
  --accent:#1769f2;--accent-2:#2b7cff;--accent-deep:#0759e7;
  --accent-soft:#edf4ff;--accent-line:#c7dafa;--accent-ink:#155dcc;
  --note-tint:#f3f7ff;--note-line:#dce7fc;--note-ink:#3469d4;
  --chip-bg:#edf3ff;--chip-line:#dce7fc;--chip-ink:#436cc3;
  background-color:#f7faff;
  background-image:linear-gradient(rgba(37,99,235,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.014) 1px,transparent 1px);
  background-size:24px 24px;
}

@media(min-width:1024px){
  body[data-sn-shell][data-sn-task="note"] .topbar{
    position:sticky;top:0;z-index:30;height:86px;padding:0 28px 0 32px;
    border-bottom:1px solid #dce5f1;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  }
  body[data-sn-shell][data-sn-task="note"] .brand{gap:0;pointer-events:none}
  body[data-sn-shell][data-sn-task="note"] .brand-mark{display:none}
  body[data-sn-shell][data-sn-task="note"] .brand b{font-size:27px;font-weight:900;letter-spacing:-.04em}
  body[data-sn-shell][data-sn-task="note"] .back-action{display:none}
  body[data-sn-shell][data-sn-task="note"] .subject-picker{margin-left:auto}
  body[data-sn-shell][data-sn-task="note"] .subject-picker select{
    height:43px;min-width:155px;padding-left:45px;border-radius:10px;font-size:14px;
  }
  body[data-sn-shell][data-sn-task="note"] .top-actions{margin-left:12px;gap:12px}
  body[data-sn-shell][data-sn-task="note"] .top-user b{display:inline}
  body[data-sn-shell][data-sn-task="note"] .page{max-width:none;margin:0;padding:0 28px 60px}

  body[data-sn-shell][data-sn-task="note"] .hero{
    height:178px;min-height:178px;margin:0;padding:26px 24px;border:1px solid #ccdaee;
    border-radius:12px;background:rgba(255,255,255,.96);box-shadow:none;overflow:hidden;
  }
  body[data-sn-shell][data-sn-task="note"] .hero-copy{max-width:650px}
  body[data-sn-shell][data-sn-task="note"] .eyebrow{display:none}
  body[data-sn-shell][data-sn-task="note"] .hero h1{
    max-width:690px;margin:0;color:#0c2145;font-family:inherit;font-size:26px;line-height:1.3;
    font-weight:900;letter-spacing:-.045em;
  }
  body[data-sn-shell][data-sn-task="note"] .hero h1 em{color:inherit;font-style:normal}
  body[data-sn-shell][data-sn-task="note"] .hero p{
    max-width:630px;margin:11px 0 0;color:#748299;font-size:13px;line-height:1.55;
  }
  body[data-sn-shell][data-sn-task="note"] .hero-points{display:none}
  body[data-sn-shell][data-sn-task="note"] .hero-art{
    content:normal;display:block;right:184px;top:8px;width:420px;height:160px;
    object-fit:contain;object-position:center;clip-path:none;border-radius:0;opacity:.96;
    mix-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 96%,transparent 100%);
  }
  body[data-sn-shell][data-sn-task="note"] .auto-status{
    left:24px;right:auto;top:auto;bottom:25px;height:31px;padding:0 13px;
    border-color:#c8e8d7;background:#f1fbf5;color:#13905a;font-size:12px;
  }
  body[data-sn-shell][data-sn-task="note"] .desktop-hero-layers{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
  body[data-sn-shell][data-sn-task="note"] .korean-hero-callouts{display:none}
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow{display:block}
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .hero-formula{display:none}
  body[data-sn-shell][data-sn-task="note"][data-subject="math"] .math-hero-flow .hero-formula{
    left:auto;right:356px;bottom:12px;display:block;width:282px;height:42px;padding:7px 16px;
    border:1px solid #bfd0ef;border-radius:9px;background:rgba(255,255,255,.94);
    font-family:Georgia,serif;font-size:20px;font-style:italic;box-shadow:0 7px 18px rgba(37,99,235,.08);
  }
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .flow-stack{
    position:absolute;right:72px;top:18px;display:flex;flex-direction:column;gap:7px;width:82px;
  }
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .flow-stack b{
    height:27px;border-radius:999px;color:#fff;text-align:center;font-size:12px;line-height:27px;background:#3e8bf2;
  }
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .flow-stack b:nth-child(2){background:#28b6d3}
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .flow-stack b:nth-child(3){background:#1266e8}
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .flow-stack b:nth-child(4){background:#18a96b}
  body[data-sn-shell][data-sn-task="note"] .math-hero-flow .flow-check{
    position:absolute;right:16px;top:52px;width:43px;height:52px;display:grid;place-items:center;
    border:1px solid #ccd9ed;border-radius:9px;background:rgba(255,255,255,.94);color:#18a96b;font-size:26px;font-weight:900;
  }

  body[data-sn-shell][data-sn-task="note"] .overview-row{
    display:grid;grid-template-columns:minmax(650px,745px) minmax(430px,1fr);align-items:stretch;gap:14px;margin:18px 0 0;
  }
  body[data-sn-shell][data-sn-task="note"] .metrics{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;overflow:visible;
  }
  body[data-sn-shell][data-sn-task="note"] .metric{
    height:91px;min-height:91px;padding:0 12px;gap:11px;border-radius:13px;background:#fff;
    box-shadow:0 5px 16px rgba(30,44,70,.06);
  }
  body[data-sn-shell][data-sn-task="note"] .metric-icon{width:45px;height:45px;border-radius:11px}
  body[data-sn-shell][data-sn-task="note"] .metric-icon .ui-icon{width:22px;height:22px}
  body[data-sn-shell][data-sn-task="note"] .metric small{font-size:12px}
  body[data-sn-shell][data-sn-task="note"] .metric b{margin-top:5px;font-size:24px}
  body[data-sn-shell][data-sn-task="note"] .study-flow{
    display:flex;min-width:0;height:91px;margin:0;padding:13px 18px;border:1px solid #dfe6ef;
    border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(30,44,70,.055);
  }
  body[data-sn-shell][data-sn-task="note"] .flow-title{min-width:120px;padding-right:16px}
  body[data-sn-shell][data-sn-task="note"] .flow-title small{display:none}
  body[data-sn-shell][data-sn-task="note"] .flow-title b{font-size:15px}
  body[data-sn-shell][data-sn-task="note"] .flow-steps{flex:1;gap:7px;min-width:0}
  body[data-sn-shell][data-sn-task="note"] .flow-step{min-width:0}
  body[data-sn-shell][data-sn-task="note"] .flow-step i{width:30px;height:30px;font-size:11px}
  body[data-sn-shell][data-sn-task="note"] .flow-step b{font-size:10.5px}
  body[data-sn-shell][data-sn-task="note"] .flow-step small{font-size:9px}

  body[data-sn-shell][data-sn-task="note"] .workspace{
    display:grid;grid-template-columns:minmax(0,2.35fr) minmax(310px,1fr);gap:14px;align-items:start;
    margin-top:16px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
  }
  body[data-sn-shell][data-sn-task="note"] .workspace-main{
    position:relative;min-width:0;border:1px solid #dfe5ee;border-radius:13px;background:#fff;
    box-shadow:0 4px 15px rgba(30,44,70,.045);overflow:hidden;
  }
  body[data-sn-shell][data-sn-task="note"] .workspace-head{height:53px;padding:0 16px}
  body[data-sn-shell][data-sn-task="note"] .tab{height:53px;padding:0 19px;font-size:12.5px}
  body[data-sn-shell][data-sn-task="note"] .tab.active:after{left:19px;right:19px;height:2px}
  body[data-sn-shell][data-sn-task="note"] .head-cta{
    position:absolute;z-index:5;right:16px;top:68px;display:inline-flex;height:36px;padding:0 16px;font-size:12px;
  }
  body[data-sn-shell][data-sn-task="note"] .workspace-body{padding:16px 16px 22px}
  body[data-sn-shell][data-sn-task="note"] .tools{
    display:grid;grid-template-columns:minmax(210px,1fr) 125px 125px;gap:12px;margin:0 138px 16px 0;
  }
  body[data-sn-shell][data-sn-task="note"] .search input,
  body[data-sn-shell][data-sn-task="note"] .select-wrap select{height:36px;border-radius:8px;font-size:11.5px}
  body[data-sn-shell][data-sn-task="note"] .list-head{display:flex}
  body[data-sn-shell][data-sn-task="note"] .note-list{gap:13px}
  body[data-sn-shell][data-sn-task="note"] .note-card{
    padding:15px;border-radius:11px;border-color:#e2e8f0;box-shadow:none;
  }
  body[data-sn-shell][data-sn-task="note"] .note-title{font-size:15px!important;line-height:1.4}
  body[data-sn-shell][data-sn-task="note"] .note-kicker{font-size:10px}
  body[data-sn-shell][data-sn-task="note"] .note-meta{margin-top:5px;font-size:10px}
  body[data-sn-shell][data-sn-task="note"] .note-summary{margin-top:10px;font-size:11px}
  body[data-sn-shell][data-sn-task="note"] .note-foot{margin-top:10px}
  body[data-sn-shell][data-sn-task="note"] .note-tags span{padding:4px 8px;font-size:9.5px}
  body[data-sn-shell][data-sn-task="note"] .note-actions button{height:33px;min-height:33px;min-width:0;padding:0 13px;font-size:10.5px}

  body[data-sn-shell][data-sn-task="note"] .rail{position:static;display:flex;margin:0;gap:13px}
  body[data-sn-shell][data-sn-task="note"] .rail-card{
    padding:17px;border-radius:13px;background:#fff;box-shadow:0 4px 15px rgba(30,44,70,.045);
  }
  body[data-sn-shell][data-sn-task="note"] .rail-card h2{font-size:15px}
  body[data-sn-shell][data-sn-task="note"] .review-card{display:block;min-height:198px}
  body[data-sn-shell][data-sn-task="note"] .review-overview{justify-content:space-between;gap:20px;margin-top:13px}
  body[data-sn-shell][data-sn-task="note"] .review-ring{order:-1;width:84px;height:84px}
  body[data-sn-shell][data-sn-task="note"] .review-count strong{font-size:27px}
  body[data-sn-shell][data-sn-task="note"] .review-legend,
  body[data-sn-shell][data-sn-task="note"] .connection-card,
  body[data-sn-shell][data-sn-task="note"] .coach,
  body[data-sn-shell][data-sn-task="note"] .mastery-card,
  body[data-sn-shell][data-sn-task="note"] .korean-review-next{display:none!important}
  body[data-sn-shell][data-sn-task="note"] .desktop-family-card{display:block}
  body[data-sn-shell][data-sn-task="note"] .next-review-card{min-height:112px}
  body[data-sn-shell][data-sn-task="note"] .streak-card{min-height:122px}
}

@media(max-width:1260px) and (min-width:1024px){
  body[data-sn-shell][data-sn-task="note"] .hero-art{right:150px;width:340px;opacity:.75}
  body[data-sn-shell][data-sn-task="note"] .hero h1{max-width:540px;font-size:23px}
  body[data-sn-shell][data-sn-task="note"] .overview-row{grid-template-columns:1fr}
  body[data-sn-shell][data-sn-task="note"] .workspace{grid-template-columns:minmax(0,1fr) 300px}
  body[data-sn-shell][data-sn-task="note"] .tools{grid-template-columns:minmax(190px,1fr) 112px 112px}
}

@media(max-width:1023px){
  body[data-sn-task="note"] .back-action{display:none}
  body[data-sn-task="note"] .hero-art{content:normal!important;object-fit:contain}
  body[data-sn-task="note"] .desktop-hero-layers{display:none}
}

/* The shared dashboard shell keeps a 272px navigation rail beside this page. The
   original LayerLab breakpoints used the full browser width, so the composition
   overflowed as soon as the remaining content area became narrower than the
   1672px reference frame. These shell-aware rules keep the same assets and live
   controls while allowing the layout to reflow at the actual content width. */
@media(min-width:1024px) and (max-width:1535px){
  body[data-sn-shell][data-sn-task="note"] .hero-copy{max-width:clamp(400px,38vw,520px)}
  body[data-sn-shell][data-sn-task="note"] .hero h1{max-width:100%;font-size:clamp(22px,1.8vw,25px)}
  body[data-sn-shell][data-sn-task="note"] .hero p{max-width:100%}
  body[data-sn-shell][data-sn-task="note"] .hero-art{right:70px;width:clamp(280px,25vw,340px);opacity:.82}
  body[data-sn-shell][data-sn-task="note"] .overview-row{grid-template-columns:minmax(0,1fr);gap:14px}
  body[data-sn-shell][data-sn-task="note"] .study-flow{width:100%}
  body[data-sn-shell][data-sn-task="note"] .workspace{grid-template-columns:minmax(0,1fr) 300px}
  body[data-sn-shell][data-sn-task="note"] .list-head{
    position:static;width:auto;height:auto;margin:0 0 12px;clip:auto;overflow:visible;
    display:flex;align-items:center;gap:12px;white-space:normal;
  }
}

@media(min-width:1024px){
  body[data-sn-shell][data-sn-task="note"] .list-head{
    position:static;width:auto;height:auto;margin:0 0 12px;clip:auto;overflow:visible;
    display:flex;align-items:center;gap:12px;white-space:normal;
  }
}

@media(min-width:1024px) and (max-width:1299px){
  body[data-sn-shell][data-sn-task="note"] .hero-copy{max-width:clamp(390px,36vw,460px)}
  body[data-sn-shell][data-sn-task="note"] .hero-art{right:54px;width:300px}
  body[data-sn-shell][data-sn-task="note"] .workspace{grid-template-columns:minmax(0,1fr)}
  body[data-sn-shell][data-sn-task="note"] .rail{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;
  }
  body[data-sn-shell][data-sn-task="note"] .review-card{grid-row:span 2}
}

@media(max-width:1023px){
  html{overflow-x:hidden}
  body[data-sn-shell][data-sn-task="note"]{padding-left:0!important;overflow-x:hidden}
  body[data-sn-shell][data-sn-task="note"]>.sn-dashboard-sidebar{display:none!important}
  body[data-sn-shell][data-sn-task="note"]>.topbar,
  body[data-sn-shell][data-sn-task="note"]>.page{width:100%!important;max-width:none!important}
  body[data-sn-shell][data-sn-task="note"] .hero-copy{max-width:52%}
  body[data-sn-shell][data-sn-task="note"] .hero-art{
    left:auto;right:18px;top:54px;bottom:auto;width:min(38%,370px);height:auto;aspect-ratio:370/160;
    object-fit:contain;object-position:center;opacity:.92;
  }
  body[data-sn-shell][data-sn-task="note"] .auto-status{
    position:absolute;left:27px;right:auto;top:auto;bottom:29px;margin:0;
  }
  body[data-sn-shell][data-sn-task="note"] .list-head{
    position:static;width:auto;height:auto;margin:0 0 calc(18*var(--u));clip:auto;overflow:visible;
    display:flex!important;align-items:center;gap:calc(12*var(--u));white-space:normal;
  }
}

@media(max-width:700px){
  body[data-sn-shell][data-sn-task="note"]>.topbar{
    height:64px;padding:0 12px;gap:8px;flex-wrap:nowrap;overflow:hidden;
  }
  body[data-sn-shell][data-sn-task="note"] .brand{flex:none;gap:8px}
  body[data-sn-shell][data-sn-task="note"] .brand-mark{width:38px!important;height:38px!important;border-radius:10px;font-size:22px}
  body[data-sn-shell][data-sn-task="note"] .brand b{display:block!important;font-size:16px!important}
  body[data-sn-shell][data-sn-task="note"] .subject-picker{flex:1;min-width:0;height:40px;margin-left:auto}
  body[data-sn-shell][data-sn-task="note"] .subject-picker select{
    width:100%;min-width:0!important;height:40px!important;padding:0 28px 0 34px!important;border-radius:10px;font-size:13px!important;
  }
  body[data-sn-shell][data-sn-task="note"] .subject-picker .picker-icon{display:block;left:10px;width:16px;height:16px}
  body[data-sn-shell][data-sn-task="note"] .subject-picker .caret{right:11px;width:7px;height:7px}
  body[data-sn-shell][data-sn-task="note"] .top-actions{flex:none;width:38px;height:40px;margin:0;gap:0}
  body[data-sn-shell][data-sn-task="note"] .top-actions .bug-action,
  body[data-sn-shell][data-sn-task="note"] .top-actions .top-user{display:none!important}
  body[data-sn-shell][data-sn-task="note"] .top-actions .icon-button{display:grid!important;width:38px;height:38px;padding:0}
  body[data-sn-shell][data-sn-task="note"]>.page{padding:12px 12px 90px!important}
  body[data-sn-shell][data-sn-task="note"] .hero{
    width:100%!important;max-width:100%;height:285px;min-height:285px;aspect-ratio:auto!important;
    margin:0;padding:18px;border:1px solid #dde7f7;border-radius:14px;
  }
  body[data-sn-shell][data-sn-task="note"] .hero-copy{max-width:100%}
  body[data-sn-shell][data-sn-task="note"] .hero-copy{
    position:relative!important;inset:auto!important;width:auto!important;height:auto!important;max-width:100%!important;
  }
  body[data-sn-shell][data-sn-task="note"] .eyebrow{font-size:12px}
  body[data-sn-shell][data-sn-task="note"] .hero h1{
    width:auto;max-width:100%;margin:8px 0 0;font-size:25px!important;line-height:1.34;
  }
  body[data-sn-shell][data-sn-task="note"] .hero p{
    width:auto;max-width:100%!important;margin-top:9px;font-size:14px!important;line-height:1.55;
  }
  body[data-sn-shell][data-sn-task="note"] .hero-art{display:none!important}
  body[data-sn-shell][data-sn-task="note"] .auto-status{left:18px;bottom:20px}
  body[data-sn-shell][data-sn-task="note"] .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;margin:12px 0 14px;padding:0;overflow:visible;
  }
  body[data-sn-shell][data-sn-task="note"] .metric{width:auto;min-height:86px!important;padding:10px;gap:9px;border-radius:13px}
  body[data-sn-shell][data-sn-task="note"] .metric-icon{width:42px;height:42px;border-radius:11px}
  body[data-sn-shell][data-sn-task="note"] .metric-icon .ui-icon{width:23px;height:23px}
  body[data-sn-shell][data-sn-task="note"] .metric small{font-size:12px}
  body[data-sn-shell][data-sn-task="note"] .metric b{font-size:25px}
  body[data-sn-shell][data-sn-task="note"] .workspace{width:100%}
  body[data-sn-shell][data-sn-task="note"] .tabs{overflow-x:auto}
  body[data-sn-shell][data-sn-task="note"] .tab{font-size:12px;padding:0 10px}
  body[data-sn-shell][data-sn-task="note"] .list-head{flex-wrap:wrap}
  body[data-sn-shell][data-sn-task="note"] #resultCount{flex:0 0 100%;width:auto;white-space:nowrap;font-size:17px}
  body[data-sn-shell][data-sn-task="note"] #loadState{display:none}
  body[data-sn-shell][data-sn-task="note"] #notebookPager{
    flex:0 0 100%;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:3px;
  }
  body[data-sn-shell][data-sn-task="note"] .note-title{font-size:17px!important}
  body[data-sn-shell][data-sn-task="note"] .note-meta{font-size:11px}
  body[data-sn-shell][data-sn-task="note"] .note-actions button{min-width:0;height:42px;font-size:13px}
}