:root{--bg:#f5f8fb;--panel:#fff;--ink:#183148;--muted:#667e90;--line:#e0e9ef;--teal:#167b80;--teal-l:#e2f4f1;--blue:#e7efff;--amber:#b5791b;--amber-l:#fff4df;--red:#ad4554;--red-l:#fff0f1;--radius:18px;--shadow:0 10px 30px rgba(33,58,78,.055);font-family:Inter,-apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,'Noto Sans JP',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.68}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7dced1;outline-offset:2px}.app{display:flex;min-height:100vh}.sidebar{position:sticky;top:0;width:252px;flex-shrink:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:25px 17px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:10px;padding:5px 9px 30px}.brandmark{width:41px;height:41px;border-radius:14px;background:#ddf3f1;color:#096f73;display:grid;place-items:center;font-size:27px;font-weight:800;position:relative}.brandmark span{font-size:12px;position:absolute;right:4px;top:3px}.brand strong{font-size:16px;letter-spacing:-.45px}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav{background:transparent;border:0;text-align:left;width:100%;padding:13px 14px;border-radius:12px;color:#50677a;font-weight:640;display:flex;align-items:center;gap:14px}.nav span{font-size:19px;min-width:21px;text-align:center;color:#7896a6}.nav:hover{background:#f5f8fa}.nav.active{background:#e9f6f4;color:#11686d}.nav.active span{color:#167b80}.sidebar-bottom{margin-top:auto;padding:16px 10px 5px;color:var(--muted);font-size:12px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c49a44;margin-right:6px}.sidebar-note{font-size:11px;line-height:1.6;margin-top:14px}.main-shell{flex:1;min-width:0}.topbar{height:76px;padding:0 clamp(20px,4vw,54px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9eff3;background:rgba(255,255,255,.7)}.breadcrumb{color:#768c9c;font-size:12px;font-weight:600}.top-actions{display:flex;align-items:center;gap:9px}.pill{padding:7px 11px;border-radius:999px;font-size:11px;font-weight:670;white-space:nowrap}.pill.muted{background:#eef3f6;color:#63798c}.pill.teal{background:var(--teal-l);color:var(--teal)}.pill.warn{background:var(--amber-l);color:var(--amber)}.pill.red{background:var(--red-l);color:var(--red)}.avatar{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#607b87}.mobile-menu{display:none;border:0;background:none;font-size:20px}.footer{color:#8ba0b0;padding:15px 5vw 25px;font-size:11px}#view{max-width:1460px;margin:auto;padding:34px clamp(19px,4vw,54px) 30px;min-height:70vh}.eyebrow{text-transform:uppercase;color:var(--teal);letter-spacing:1.9px;font-size:11px;font-weight:800;margin:0 0 7px}.page-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:27px}.page-head h1{margin:0;font-size:clamp(23px,2.7vw,33px);line-height:1.35;letter-spacing:-1.1px;font-weight:770}.sub{color:var(--muted);margin:8px 0 0;font-size:13px}.btn{padding:10px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.35}.btn.primary{color:#fff;background:#167b80;border-color:#167b80}.btn.primary:hover{background:#11686e}.btn.soft{background:#e8f5f3;border-color:#e0f0ee;color:#11686e}.btn.danger{background:var(--red-l);border-color:#f1dadf;color:var(--red)}.btn:hover{filter:brightness(.98)}.btn.small{padding:7px 10px;font-size:12px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.stat-card,.panel,.lesson-card,.pattern-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.stat-card{padding:21px}.stat-card small{color:var(--muted);font-size:12px;font-weight:640}.stat-card strong{display:block;font-size:30px;line-height:1.4;letter-spacing:-1px;margin-top:8px}.stat-card span{color:#7a8f9d;font-size:11px}.layout-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:18px;margin-top:18px}.panel{padding:23px}.panel h2{font-size:16px;margin:0 0 13px}.panel h3{font-size:14px;margin:0 0 9px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.panel-head h2{margin:0}.notice{background:#fff6e8;border:1px solid #f5e2b7;color:#8d6627;border-radius:12px;padding:13px 15px;font-size:12px}.notice.info{background:#eff6fc;border-color:#dceaf6;color:#4a789a}.notice.positive{background:#e8f7f2;border-color:#d4eee7;color:#216e65}.row{display:flex;gap:11px;align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.space-1{margin-top:12px}.space-2{margin-top:22px}.space-3{margin-top:32px}.faint{color:var(--muted)}.muted{color:var(--muted)}.progress{height:7px;border-radius:20px;overflow:hidden;background:#e7eef1}.progress>span{display:block;background:#45a39c;height:100%;border-radius:20px}.step-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:20px 0 22px}.step{border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px 7px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:83px;color:#718698;font-size:11px;font-weight:680}.step b{width:28px;height:28px;border-radius:50%;background:#f0f4f6;display:grid;place-items:center;color:#688096}.step.active{border-color:#69b9b1;background:#ecfaf6;color:var(--teal)}.step.active b{background:#137e80;color:#fff}.step.done{border-color:#b7dfd9}.step.done b{background:#d9f4ed;color:#157873}.stage-box{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.72fr);gap:16px}.criteria{display:flex;flex-direction:column;gap:9px}.criterion{background:#f9fbfd;border:1px solid #e8eef2;padding:12px 15px;border-radius:11px;display:flex;justify-content:space-between;align-items:center;gap:10px}.criterion span{font-weight:630}.criterion input{height:17px;width:17px;accent-color:#167b80}.judge{padding:12px;border-radius:12px;background:#f3f7f9;color:#597789;font-size:12px}.mini-preview{display:flex;flex-direction:column;gap:10px}.mini-preview button{display:flex;gap:11px;text-align:left;align-items:center;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;width:100%}.mini-preview .thumb{width:94px;flex-shrink:0}.mini-preview .title{font-weight:700;font-size:12px}.mini-preview svg{display:block;width:100%;height:auto;border-radius:8px}.filters{display:flex;gap:10px;align-items:center;margin:17px 0;flex-wrap:wrap}.filter{border:1px solid var(--line);padding:9px 12px;background:#fff;border-radius:99px;color:#526b7d;font-size:12px;font-weight:650}.filter.active{background:#167b80;border-color:#167b80;color:#fff}.search{background:#fff;border:1px solid var(--line);padding:11px 13px;border-radius:11px;color:var(--ink);min-width:220px;width:100%}.search:focus{border-color:#54ada8}.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.pattern-card{padding:12px;text-align:left;display:block;width:100%;transition:transform .15s,box-shadow .15s}.pattern-card:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(28,64,78,.13)}.chart{display:block;width:100%;height:auto;border-radius:12px;background:#f8fbfd}.pattern-info{padding:12px 7px 6px}.pattern-info h3{font-size:14px;margin:5px 0}.pattern-info p{font-size:12px;color:var(--muted);margin:0;min-height:41px}.tag{display:inline-block;color:#267c7a;font-size:10px;font-weight:750}.tag.suggestion{color:#9b7941}.badge{border-radius:6px;background:#f0f6f8;padding:3px 8px;color:#607a89;font-size:10px;font-weight:720}.detail{max-width:830px;width:min(96vw,830px);max-height:92vh;overflow:auto;padding:25px;background:#fff;border-radius:21px;box-shadow:0 24px 80px rgba(8,35,57,.28)}.overlay{position:fixed;inset:0;background:rgba(17,34,48,.55);z-index:40;display:grid;place-items:center;padding:20px}.hidden{display:none!important}.close{float:right;border:0;background:#f2f5f7;width:34px;height:34px;border-radius:50%;font-size:20px}.detail h2{font-size:22px;margin:8px 0 12px}.detail .chart{margin:15px 0;max-height:340px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.callout{border:1px solid #e4edf0;border-radius:12px;padding:15px;font-size:13px;background:#fbfdfe}.callout strong{display:block;margin-bottom:5px}.callout.good{border-color:#cfe7e1;background:#f2faf7}.callout.bad{border-color:#f4d7d7;background:#fff8f8}.field{margin:0 0 17px}.field label{display:block;font-size:12px;color:#536e80;font-weight:760;margin-bottom:7px}.field input,.field textarea,.field select{border:1px solid #dbe5eb;padding:11px 12px;border-radius:10px;background:#fff;color:var(--ink);width:100%}.field textarea{resize:vertical;min-height:86px}.field small{color:var(--muted);display:block;margin-top:6px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dropzone{border:1.5px dashed #adc7d3;background:#f8fcfd;border-radius:14px;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;gap:8px;color:#57798e}.dropzone input{display:none}.dropzone.has{border-style:solid;border-color:#65b4a9;background:#f0fbf7}.dropzone img{max-width:100%;max-height:230px;object-fit:contain}.record{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;background:#fff}.record strong{font-size:15px}.record .meta{color:var(--muted);font-size:11px}.price{font-variant-numeric:tabular-nums}.trade-table{width:100%;border-collapse:collapse}.trade-table td,.trade-table th{border-bottom:1px solid var(--line);padding:11px 10px;text-align:left;font-size:12px}.trade-table th{color:#647d8f;font-weight:730}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #cbdce5;border-radius:13px;padding:45px 20px;color:var(--muted);background:#fafcfd;text-align:center}.empty .ico{font-size:36px;opacity:.65}.guide-highlight{font-size:12px;color:#718796;background:#f4f7fa;border-radius:10px;padding:12px}.source-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.source-row a{font-weight:690;color:#226e80;text-decoration:none}.source-row a:hover{text-decoration:underline}.source-row small{color:var(--muted);display:block}.tabs{display:flex;gap:6px;background:#eef3f5;border-radius:12px;padding:5px}.tabs button{flex:1;background:transparent;border:0;color:#587080;border-radius:9px;padding:9px;font-size:12px;font-weight:710}.tabs button.active{background:#fff;color:#167b80;box-shadow:0 2px 7px #dae5e7}.settings-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.steps-mini{margin:0;padding-left:20px;color:#647e8e;font-size:12px}.code-like{background:#f0f5f6;border-radius:8px;padding:11px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:11px}.toast-root{position:fixed;bottom:20px;right:20px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{background:#19394a;color:#fff;border-radius:12px;padding:12px 17px;box-shadow:var(--shadow);max-width:350px;font-size:12px}.instrument-grid{display:flex;flex-wrap:wrap;gap:6px}.instrument-grid button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 10px;font-size:11px;color:#607a8a}.instrument-grid button.on{background:#e9f7f3;border-color:#88c5bc;color:#0f787c;font-weight:800}.countline{font-size:12px;color:#718798;margin-bottom:16px}.heading-row{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}.heading-row h2{margin:0;font-size:18px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:15px}.swatches{display:flex;gap:7px;flex-wrap:wrap}.swatches span{font-size:11px;background:#f0f5f7;border-radius:6px;padding:4px 7px}.tooltip{font-size:10px;color:#8aa1ae}.row-end{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.test-label{font-size:11px;color:#687e8b;background:#eff4f7;padding:4px 7px;border-radius:6px}.sticker{font-size:32px;color:#178d87}.image-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.image-compare .chart{border:1px solid #e0e8ed}.image-compare small{display:block;text-align:center;color:var(--muted)}@media(max-width:1200px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-box,.settings-grid{grid-template-columns:1fr}}@media(max-width:850px){.sidebar{position:fixed;left:-260px;box-shadow:var(--shadow);transition:left .2s}.sidebar.open{left:0}.topbar{height:65px;padding:0 17px}.mobile-menu{display:block}.top-actions .pill{display:none}#view{padding:25px 18px}.layout-2{grid-template-columns:1fr}.page-head{align-items:start;flex-direction:column}.step-list{grid-template-columns:repeat(4,minmax(0,1fr))}.stage-box{grid-template-columns:1fr}}@media(max-width:550px){.cards,.pattern-grid,.detail-grid,.form-grid,.two-col,.image-compare{grid-template-columns:1fr}.step-list{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:17px}.detail{padding:18px}.source-row{align-items:flex-start;flex-direction:column}.stat-card strong{font-size:26px}.filters{gap:7px}.filter{padding:7px 10px}.top-actions{gap:4px}}

/* v0.2.0: diagram palette and persistent light/dark modes */
:root{
 --diagram-bg:#f8fbfe;--diagram-text:#244459;--diagram-muted:#668196;--diagram-grid:#e1eaf2;
 --diagram-up:#188b84;--diagram-down:#c66d72;--diagram-accent:#4c85c4;--diagram-warning:#c58a3b;
 --diagram-bad:#c34d5b;--diagram-band:#eaf3f7;color-scheme:light;
}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:7px 12px;font-size:12px;font-weight:760;white-space:nowrap;transition:background .15s}
.theme-toggle:hover{border-color:var(--teal)}
.theme-toggle #theme-icon{font-size:18px;line-height:1}
.chart-explained{width:100%;height:auto;aspect-ratio:382 / 221;background:var(--diagram-bg);border:1px solid var(--line)}
.image-compare .chart-explained{max-height:none;margin:6px 0;border:1px solid var(--line)}
.image-compare>div{min-width:0}
.image-compare small{font-size:11px;padding:0 6px}
.diagram-legend{font-size:11px;color:var(--muted);margin:7px 0 12px;line-height:1.8}
.legend-up{color:var(--diagram-up)}.legend-down{color:var(--diagram-down)}.legend-line{color:var(--diagram-accent)}.legend-alert{color:var(--diagram-warning)}
.card-focus{display:block;font-size:11px;font-weight:720;color:var(--teal);margin-top:8px}
.pattern-card .chart-explained{border:1px solid var(--line)}
.pattern-card .pattern-info p{min-height:0}
.mini-preview .thumb{width:110px}
.mini-preview .thumb svg{min-height:62px}
.theme-settings{margin-bottom:0}
.theme-settings label{color:var(--muted);font-weight:740}

html[data-theme="dark"]{
 color-scheme:dark;
 --bg:#101923;--panel:#182633;--ink:#edf5f9;--muted:#adc0ce;--line:#344a5b;
 --teal:#75d2ca;--teal-l:#1a4549;--blue:#263e5c;--amber:#f2c477;--amber-l:#463a24;
 --red:#ff9b9e;--red-l:#452b35;--shadow:0 12px 34px rgba(0,0,0,.22);
 --diagram-bg:#172633;--diagram-text:#e7f5fc;--diagram-muted:#9bb4c7;--diagram-grid:#314656;
 --diagram-up:#70d7bf;--diagram-down:#fb979e;--diagram-accent:#80afea;
 --diagram-warning:#ecc078;--diagram-bad:#ff8f98;--diagram-band:#233849;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .pattern-card,
html[data-theme="dark"] .detail,
html[data-theme="dark"] .record{background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .topbar{background:rgba(22,35,47,.92);border-color:var(--line)}
html[data-theme="dark"] .brandmark{background:#234a51;color:#a4ece2}
html[data-theme="dark"] .nav{color:#bfd0df}
html[data-theme="dark"] .nav span{color:#93b3c8}
html[data-theme="dark"] .nav:hover{background:#283e50}
html[data-theme="dark"] .nav.active{background:#244447;color:#9be9de}
html[data-theme="dark"] .nav.active span{color:#a0e9e0}
html[data-theme="dark"] .topbar .avatar,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .step,
html[data-theme="dark"] .filter,
html[data-theme="dark"] .search,
html[data-theme="dark"] .mini-preview button,
html[data-theme="dark"] .instrument-grid button,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select{background:#1d3040;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .filter.active{background:#2b7c7e;border-color:#459a97;color:white}
html[data-theme="dark"] .btn.soft{background:#224547;color:#abeae3;border-color:#2f6364}
html[data-theme="dark"] .btn.danger{background:#422d36;color:#ffa6ac;border-color:#69404d}
html[data-theme="dark"] .notice{background:#3d3427;border-color:#685638;color:#f2d19a}
html[data-theme="dark"] .notice.info{background:#243a4b;border-color:#3c627b;color:#b5d9fa}
html[data-theme="dark"] .notice.positive{background:#223e39;border-color:#36685d;color:#a5e2cd}
html[data-theme="dark"] .criterion{background:#1d303f;border-color:#354b5c;color:var(--ink)}
html[data-theme="dark"] .judge,
html[data-theme="dark"] .guide-highlight,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .code-like,
html[data-theme="dark"] .test-label,
html[data-theme="dark"] .swatches span{background:#253c4c;color:#bfdae9}
html[data-theme="dark"] .tabs button{color:#c1d4e0}
html[data-theme="dark"] .tabs button.active{background:#355e61;color:#e9fffc;box-shadow:none}
html[data-theme="dark"] .step{color:#b4cadb}
html[data-theme="dark"] .step b{background:#2f465a;color:#d4e7f5}
html[data-theme="dark"] .step.active{background:#234444;border-color:#4caa9e;color:#a6ebe2}
html[data-theme="dark"] .step.active b{background:#287f79;color:white}
html[data-theme="dark"] .step.done{border-color:#3e7774}
html[data-theme="dark"] .step.done b{background:#29584f;color:#c3f6e8}
html[data-theme="dark"] .notice+.cards{color:var(--ink)}
html[data-theme="dark"] .pill.muted{background:#2a3c4b;color:#d0deeb}
html[data-theme="dark"] .pill.warn{background:#513e25;color:#f6d092}
html[data-theme="dark"] .pill.teal{background:#24494a;color:#b3eae4}
html[data-theme="dark"] .pill.red{background:#4d2d3b;color:#ffb0b8}
html[data-theme="dark"] .callout{background:#1e3442;color:var(--ink);border-color:#3b5160}
html[data-theme="dark"] .callout.good{background:#1c3b36;border-color:#346f61}
html[data-theme="dark"] .callout.bad{background:#3b2932;border-color:#81505a}
html[data-theme="dark"] .dropzone{background:#1d3344;border-color:#537184;color:#bdd9e9}
html[data-theme="dark"] .dropzone.has{background:#244a43;border-color:#58a18e}
html[data-theme="dark"] .empty{background:#1b2b39;border-color:#496173}
html[data-theme="dark"] .close{background:#30485a;color:#eff8ff}
html[data-theme="dark"] .progress{background:#304655}
html[data-theme="dark"] .progress>span{background:#5ac1b4}
html[data-theme="dark"] .filter.active{color:#fff}
html[data-theme="dark"] .tag{color:#8de1d5}
html[data-theme="dark"] .tag.suggestion{color:#f2c77f}
html[data-theme="dark"] .source-row a{color:#93d6f6}
html[data-theme="dark"] .instrument-grid button.on{background:#25514c;border-color:#5bada0;color:#b7f6e7}
html[data-theme="dark"] .stat-card span,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .faint,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .panel small{color:#aabfce}
html[data-theme="dark"] .toast{background:#36556a;color:#fff}
@media(max-width:550px){.theme-toggle{padding:7px 9px}.theme-toggle #theme-name{display:none}.image-compare{grid-template-columns:1fr}}