:root{color-scheme:light;--bg: #f6f8fb;--surface: #ffffff;--surface-2: #eef3f8;--ink: #20242b;--muted: #667085;--line: #d9e1ea;--teal: #1f8a87;--blue: #3867d6;--coral: #d95f4d;--gold: #c88a12;--violet: #7557c7;--green: #36895b;--navy: #172033;--shadow: 0 22px 60px rgba(32, 36, 43, .13)}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--ink);background:linear-gradient(120deg,rgba(31,138,135,.1),transparent 38%),linear-gradient(300deg,rgba(217,95,77,.08),transparent 42%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans JP,sans-serif;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:clamp(360px,25vw,440px) minmax(0,1fr);height:100vh;height:100dvh;min-height:0;overflow:hidden}.side-rail{display:flex;flex-direction:column;gap:12px;min-height:0;padding:16px;border-right:1px solid var(--line);background:#ffffffdb;backdrop-filter:blur(16px);overflow:hidden}.brand-block{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;min-height:60px}.brand-mark{display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--navy);border-radius:8px;background:#ffd25d;color:var(--navy);font-size:29px;font-weight:900}.brand-label,.category,.mini-label,.filter-title,.search-label{margin:0;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:0;text-transform:uppercase}.brand-block h1{margin:3px 0 0;font-size:22px;line-height:1.08}.filter-panel{display:grid;gap:9px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}#searchBox{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;color:var(--ink)}#searchBox:focus{outline:2px solid rgba(31,138,135,.28);border-color:var(--teal)}.filter-group{display:grid;gap:7px}.chip-row{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:28px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:800}.chip.is-active{border-color:var(--navy);background:var(--navy);color:#fff}.catalog-stats{margin:0;color:var(--muted);font-size:12px;font-weight:700;line-height:1.4}.lesson-list{flex:1;display:grid;align-content:start;gap:8px;min-height:0;overflow:auto;padding-right:4px;scrollbar-gutter:stable}.lesson-button{width:100%;min-height:82px;padding:12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);text-align:left;transition:background .16s ease,border-color .16s ease,transform .16s ease}.lesson-button:hover{border-color:var(--line);background:#eef3f8b8}.lesson-button.is-active{border-color:#172033e0;background:var(--surface);box-shadow:0 10px 26px #20242b14}.lesson-button:active{transform:translateY(1px)}.lesson-topline{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--muted);font-size:11px;font-weight:850;line-height:1.2}.lesson-name{display:block;margin-top:7px;font-size:16px;font-weight:850;line-height:1.25}.lesson-formula{display:block;margin-top:5px;color:var(--muted);font-family:Segoe UI Symbol,"Noto Sans Math",ui-sans-serif,system-ui;font-size:13px;line-height:1.25}.empty-list{padding:16px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);background:#ffffffa6;font-size:13px;font-weight:700;line-height:1.45}.main-stage{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-width:0;min-height:0;padding:16px;overflow:hidden}.stage-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;padding-bottom:12px;min-height:0}.title-group{min-width:0}.title-group h2{margin:4px 0 7px;font-size:clamp(24px,3vw,42px);line-height:1;letter-spacing:0}.formula-line{margin:0;color:var(--muted);font-family:Segoe UI Symbol,"Noto Sans Math",ui-sans-serif,system-ui;font-size:clamp(15px,1.45vw,20px);font-weight:800;line-height:1.25}.metric-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(86px,auto);gap:8px;max-width:100%}.metric{min-width:86px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#ffffffe0}.metric span{display:block;color:var(--muted);font-size:11px;font-weight:850;line-height:1.2}.metric strong{display:block;margin-top:5px;color:var(--ink);font-variant-numeric:tabular-nums;font-size:15px;line-height:1.05;white-space:nowrap}.workbench{display:grid;grid-template-columns:minmax(460px,1fr) clamp(390px,29vw,500px);gap:14px;height:100%;min-height:0;overflow:hidden}.visual-area{position:relative;height:100%;min-height:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:linear-gradient(rgba(32,36,43,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,36,43,.05) 1px,transparent 1px),var(--surface);background-size:28px 28px;box-shadow:var(--shadow)}#mainCanvas{display:block;width:100%;height:100%}.control-dock{display:grid;grid-template-rows:auto minmax(210px,1.05fr) minmax(150px,.95fr);gap:10px;min-width:0;min-height:0;overflow:hidden}.control-stack,.proof-panel,.notes-panel{border:1px solid var(--line);border-radius:8px;background:#ffffffeb}.control-stack{display:grid;gap:10px;padding:14px;overflow:auto;scrollbar-gutter:stable}.control-row{display:grid;gap:8px}.control-row label,.select-label{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:850;line-height:1.2}.control-value{color:var(--ink);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--teal)}.action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.action-row button{min-height:38px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-weight:850}.action-row .primary{border-color:#1f8a878c;background:#d8f1ef;color:#104d4b}.proof-panel,.notes-panel{display:grid;align-content:start;gap:10px;min-height:0;padding:14px;overflow:auto;scrollbar-gutter:stable}.panel-title{margin:0;color:var(--muted);font-size:12px;font-weight:850;text-transform:uppercase}.proof-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.proof-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;color:var(--ink);font-size:13px;font-weight:650;line-height:1.45}.proof-list span{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--surface-2);color:var(--navy);font-size:12px;font-weight:900}.equation-box{padding:12px;border-radius:8px;background:var(--navy);color:#fff;font-family:Segoe UI Symbol,"Noto Sans Math",ui-sans-serif,system-ui;font-weight:850;line-height:1.35}.status-line{margin:0;color:var(--muted);font-size:13px;font-weight:650;line-height:1.45}.scope-grid{display:grid;gap:7px}.scope-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:baseline;font-size:12px;line-height:1.35}.scope-row span{color:var(--muted);font-weight:850}.scope-row strong{color:var(--ink);font-weight:800}@media(max-width:1280px){.app-shell{grid-template-columns:340px minmax(0,1fr)}.side-rail{padding:14px}.workbench{grid-template-columns:minmax(420px,1fr) 370px}.visual-area{min-height:0}.control-dock{grid-template-columns:1fr;grid-template-rows:auto minmax(150px,.9fr) minmax(110px,1fr)}.notes-panel{grid-column:auto}}@media(max-width:1180px){body{overflow:auto}.app-shell{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:visible}.side-rail{position:relative;top:auto;z-index:auto;max-height:none;border-right:0;border-bottom:1px solid var(--line);overflow:visible}.filter-panel{grid-template-columns:minmax(220px,1fr)}.chip-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-gutter:auto}.chip{flex:0 0 auto}.lesson-list{grid-auto-flow:column;grid-auto-columns:minmax(240px,34vw);overflow-x:auto;overflow-y:hidden;padding-right:0;padding-bottom:4px;scrollbar-gutter:auto}.lesson-button{min-width:0;min-height:96px}.main-stage{min-height:auto;overflow:visible}.workbench{grid-template-columns:1fr;min-height:0;overflow:visible}.visual-area{height:min(58vh,560px);min-height:430px}.control-dock{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;overflow:visible}.notes-panel{grid-column:1 / -1}}@media(max-width:760px){.main-stage,.side-rail{padding:12px}.brand-block{grid-template-columns:44px minmax(0,1fr);min-height:48px}.brand-mark{width:44px;height:44px;font-size:24px}.brand-block h1{font-size:19px}.filter-panel{gap:8px;padding:10px}#searchBox{height:38px}.lesson-list{grid-auto-columns:minmax(230px,78vw)}.lesson-button{min-height:92px}.stage-header{grid-template-columns:1fr;align-items:start;padding-bottom:10px}.title-group h2{font-size:clamp(24px,8vw,34px)}.formula-line{font-size:15px}.metric-strip{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.visual-area{height:52vh;min-height:330px;max-height:460px}.control-dock{grid-template-columns:1fr;gap:10px}.control-stack,.proof-panel,.notes-panel{padding:12px}.notes-panel{grid-column:auto}}@media(max-width:430px){.metric-strip{grid-template-columns:1fr}.lesson-list{grid-auto-columns:minmax(216px,84vw)}.visual-area{min-height:300px}}.lesson-list,.control-stack,.proof-panel,.notes-panel{scrollbar-width:thin;scrollbar-color:rgba(23,32,51,.28) transparent}.lesson-list::-webkit-scrollbar,.control-stack::-webkit-scrollbar,.proof-panel::-webkit-scrollbar,.notes-panel::-webkit-scrollbar,.chip-row::-webkit-scrollbar{width:10px;height:10px}.lesson-list::-webkit-scrollbar-thumb,.control-stack::-webkit-scrollbar-thumb,.proof-panel::-webkit-scrollbar-thumb,.notes-panel::-webkit-scrollbar-thumb,.chip-row::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:#17203347;background-clip:content-box}.proof-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.step-toolbar{display:inline-grid;grid-auto-flow:column;gap:6px;align-items:center}.icon-button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);font-size:18px;font-weight:900;line-height:1}.icon-button:hover,.icon-button:focus-visible{border-color:#1f8a8773;outline:2px solid rgba(31,138,135,.16)}.icon-button.is-primary{background:var(--navy);color:#fff}.proof-list li{padding:7px;border:1px solid transparent;border-radius:8px;cursor:pointer}.proof-list li.is-done{color:var(--muted)}.proof-list li.is-active{border-color:#1f8a8761;background:#d8f1efad}.proof-list li.is-active span{background:var(--teal);color:#fff}.side-rail,.main-stage,.workbench,.control-dock,.filter-panel,.lesson-list,.chip-row,.visual-area,.proof-panel,.notes-panel{min-width:0}@media(max-width:1180px){.side-rail,.main-stage,.workbench,.control-dock,.filter-panel,.lesson-list,.chip-row,.visual-area,.control-stack,.proof-panel,.notes-panel{width:100%;max-width:100%}}