:root{--bg:#171717;--rail:#20201e;--panel:#f3f1eb;--panel2:#e8e6de;--ink:#20201d;--soft:#77766f;--acid:#d6f45c;--orange:#ff7655;--blue:#738aff;--mono:"DM Mono",monospace;--sans:Inter,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink)}a{color:inherit;text-decoration:none}
.desktop{min-height:100vh;display:grid;grid-template-columns:205px minmax(0,1fr);max-width:1720px;margin:auto;background:var(--panel)}
.rail{background:var(--rail);color:#efeee8;padding:27px 20px 22px;min-height:100vh;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.rail-brand{display:flex;gap:11px;align-items:center;color:var(--acid)}.rail-brand>span{font-size:35px;font-weight:700;letter-spacing:-.14em}.rail-brand i{font:8px/1.35 var(--mono);font-style:normal;letter-spacing:.06em;color:#b8b8ad}
.rail-caption,.rail-code,.rail-bottom,.panel-label,.panel-date,.crumb,.top-state,.brief-bottom,.head-index,.row-tag,.row-index,.table-foot,.step-dot,.workspace-footer{font:9px var(--mono);letter-spacing:.06em}
.rail-caption{color:#8a8a82;margin-top:72px;padding:0 8px 13px;border-bottom:1px solid #41413c}.rail-nav{display:flex;flex-direction:column;gap:5px;margin-top:13px}.menu-toggle{display:none}
.rail-nav a{padding:13px 10px;display:flex;gap:12px;align-items:center;color:#c1c1b7;font-size:11px;border-left:2px solid transparent}.rail-nav a span{font:9px var(--mono);color:#808078}.rail-nav a.active{background:#2c2d29;color:white;border-left-color:var(--acid)}.rail-nav a.active span{color:var(--acid)}
.rail-bottom{margin-top:auto;color:#a7a79d;font-size:8px;white-space:nowrap}.rail-led{display:inline-block;width:7px;height:7px;background:var(--acid);border-radius:50%;margin-right:7px}.rail-code{margin-top:17px;color:#6e6f67;font-size:8px;line-height:1.7}
.workspace{min-width:0;padding:0 35px;background:var(--panel)}.topline{height:63px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d4d2ca}.crumb{color:#86857d;font-size:8px}.crumb b{color:#bbb9af;padding:0 12px}.crumb strong{font-weight:500;color:#34342f}.top-state{display:flex;align-items:center;gap:11px;color:#828179;font-size:8px}.divider{height:13px;width:1px;background:#c8c6bd}
.board{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,.68fr);gap:13px;padding:16px 0 30px}.brief-pane,.note-pane,.capability-pane,.workflow-pane,.principles-pane{border:1px solid #d4d2ca;position:relative}
.brief-pane{grid-column:1;min-height:300px;background:var(--panel2);padding:20px 23px 18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.brief-pane:after{content:"S7";position:absolute;right:23px;bottom:-66px;font-size:232px;line-height:1;font-weight:700;letter-spacing:-.16em;color:#dedcd3;pointer-events:none}
.panel-label{position:relative;z-index:1;color:#77766e;display:flex;align-items:center;gap:8px;font-size:8px}.square{width:7px;height:7px;background:var(--acid);display:inline-block}.square.orange{background:var(--orange)}.square.blue{background:var(--blue)}.panel-date{margin-left:auto;color:#aaa89f;font-size:8px}
.brief-title{position:relative;z-index:1}.brief-title h1{font-size:clamp(41px,5.2vw,74px);line-height:.96;letter-spacing:-.085em;font-weight:500;margin:30px 0 17px}.brief-title h1 span{color:#65774b}.brief-title>p{font-size:12px;line-height:1.7;color:#6d6c64;max-width:400px;margin:0}
.brief-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-top:27px}.scribble{font:italic 12px Georgia;color:#7a806b;letter-spacing:0}.brief-bottom a{font-size:8px;color:#71716a}.brief-bottom a b{font:14px var(--sans);color:#65774b;margin-left:8px}
.note-pane{grid-column:2;grid-row:1;background:#242521;color:#eeede6;padding:18px 18px 14px;min-height:300px;display:flex;flex-direction:column}.note-pane .panel-label{color:#a8a89e}.note-tabs{display:flex;gap:7px;margin-top:25px}.note-tab{border:1px solid #505149;background:transparent;color:#b9b9ae;font:8px var(--mono);width:26px;height:23px;cursor:pointer}.note-tab.active{background:var(--acid);color:#25261f;border-color:var(--acid)}
.note-content{margin:auto 0;padding:24px 0 15px}.note-type{font:8px var(--mono);color:#a4a598;letter-spacing:.08em}.note-content h2{font-size:clamp(27px,3vw,40px);letter-spacing:-.07em;line-height:.97;font-weight:500;margin:14px 0}.note-content>p:last-child{font-size:11px;line-height:1.65;color:#b8b8ae;max-width:240px}.note-foot{border-top:1px solid #46473f;padding-top:12px;display:flex;justify-content:space-between;font:8px var(--mono);color:#95968b}.note-foot span:last-child{color:var(--acid);font-size:14px}
.capability-pane{grid-column:1/-1;padding:20px 23px;background:#faf9f5}.section-head{display:flex;justify-content:space-between;align-items:end;margin:31px 0 21px}.section-head h2,.workflow-pane h2{font-size:clamp(30px,4.3vw,55px);line-height:.95;letter-spacing:-.08em;font-weight:500;margin:12px 0 0}.head-index{text-align:right;color:#a6a49a;font-size:8px;line-height:1.6}
.capability-table{border-top:1px solid #d4d2ca}.capability-row{min-height:75px;display:grid;grid-template-columns:48px 1fr 100px 25px;align-items:center;border-bottom:1px solid #d4d2ca;gap:12px}.row-index{color:#98978e;font-size:8px}.row-main h3{font-size:13px;font-weight:600;margin:0 0 5px;letter-spacing:-.03em}.row-main p{font-size:10px;margin:0;color:#85847c}.row-tag{font-size:8px;color:#748248}.row-arrow{color:#77766e;font-size:15px}.table-foot{display:flex;justify-content:space-between;margin-top:12px;color:#aaa89f;font-size:7px}
.workflow-pane{grid-column:1;padding:22px 23px;background:#e5e7ef;border-color:#d2d4df;min-height:274px}.workflow-pane .panel-label{color:#777985}.workflow-pane h2{margin:32px 0 27px}.workflow-pane h2 span{color:#626c9b;font-family:Georgia,serif;font-style:italic;font-weight:400}.workflow-track{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #c7c9d5;padding-top:15px;gap:18px}.workflow-track article{position:relative;padding-left:20px}.step-dot{position:absolute;left:0;top:2px;color:#737b9f;font-size:8px}.workflow-track h3{font-size:11px;margin:0 0 5px}.workflow-track p{font-size:9px;line-height:1.5;color:#727583;margin:0}
.principles-pane{grid-column:2;grid-row:3;background:#d6f45c;border:0;padding:20px 18px;display:flex;flex-direction:column;min-height:274px}.principles-pane .panel-label{color:#55602a}.principle-line{display:grid;grid-template-columns:27px 1fr 17px;align-items:center;border-bottom:1px solid #b8ce4d;min-height:55px;gap:4px}.principle-line:first-of-type{margin-top:auto}.principle-line span{font:8px var(--mono);color:#737e3c}.principle-line p{font-size:10px;font-weight:600;letter-spacing:-.02em;margin:0}.principle-line b{font-size:12px;font-weight:400;color:#657631}
.workspace-footer{height:40px;border-top:1px solid #d4d2ca;display:flex;justify-content:space-between;align-items:center;color:#96948b;font-size:7px}.workspace-footer a{color:#6f7c42}
@media(max-width:850px){.desktop{grid-template-columns:160px minmax(0,1fr)}.rail{padding:22px 13px}.workspace{padding:0 21px}.board{grid-template-columns:minmax(0,1.4fr) minmax(200px,.8fr)}.brief-pane,.note-pane{min-height:285px}.brief-title h1{font-size:clamp(39px,6vw,60px)}.brief-pane:after{font-size:180px;bottom:-51px}.capability-row{grid-template-columns:36px 1fr 76px 18px;gap:7px}}
@media(max-width:650px){.desktop{display:block}.rail{position:relative;top:auto;height:auto;min-height:0;padding:12px 16px;display:grid;grid-template-columns:1fr auto;align-items:center}.rail-brand>span{font-size:27px}.rail-brand i{font-size:7px}.rail-caption,.rail-bottom,.rail-code{display:none}.rail-nav{display:none;position:absolute;top:57px;left:0;right:0;margin:0;padding:12px 16px;background:#20201e;z-index:5}.rail-nav.open{display:flex;flex-direction:column;gap:2px}.menu-toggle{display:block;background:none;border:1px solid #4a4b44;color:#efeee8;padding:9px 11px;font:8px var(--mono);letter-spacing:.06em}.menu-toggle b{color:var(--acid);font-size:14px;margin-left:8px}.workspace{padding:0 13px}.topline{height:49px}.crumb{font-size:7px}.crumb b{padding:0 5px}.top-state{font-size:6px;gap:5px}.board{display:flex;flex-direction:column;padding-top:10px;gap:9px}.brief-pane{order:1;min-height:270px;padding:16px}.brief-title h1{font-size:clamp(42px,11vw,62px);margin:31px 0 14px}.brief-title>p{font-size:11px;max-width:290px}.brief-pane:after{font-size:160px;right:16px;bottom:-39px}.brief-bottom{font-size:7px}.note-pane{order:2;min-height:225px;padding:15px 16px}.note-tabs{margin-top:15px}.note-content{padding:17px 0 10px}.note-content h2{font-size:32px}.note-content>p:last-child{font-size:10px}.capability-pane{order:3;padding:16px}.section-head{margin:23px 0 15px}.section-head h2,.workflow-pane h2{font-size:35px}.capability-row{grid-template-columns:27px 1fr 60px 15px;min-height:73px;gap:5px}.row-main h3{font-size:11px}.row-main p{font-size:8px;max-width:210px}.row-tag{font-size:6px}.table-foot{font-size:6px}.workflow-pane{order:4;padding:17px;min-height:0}.workflow-pane h2{margin:25px 0 23px}.workflow-track{gap:8px}.workflow-track article{padding-left:16px}.workflow-track h3{font-size:10px}.workflow-track p{font-size:8px}.principles-pane{order:5;min-height:215px;padding:16px}.principle-line{min-height:45px}.principle-line p{font-size:9px}.workspace-footer{font-size:6px;padding:0 2px}.workspace-footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}