:root{--ink:#27342e;--sub:#7d8982;--line:#e4eae5;--mint:#14b97f;--pale:#edf8f1}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f4f6f3;font-family:"Avenir Next","PingFang SC",sans-serif;font-size:13px}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #147d59;outline-offset:3px}a{color:inherit;text-decoration:none}.workspace-header{height:78px;border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:#fff}.workspace-header>div{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#172f25;color:#9effd3;font-weight:900;font-size:22px}.workspace-header b{display:block;font-size:16px;letter-spacing:-.3px}.workspace-header small{display:block;color:var(--sub);font-size:11px;margin-top:3px}.workspace-header nav{display:flex;gap:6px}.workspace-header nav a{padding:10px 15px;border-radius:8px;font-size:12px;color:#657269}.workspace-header nav .active{background:#edf7f0;color:#216647;font-weight:700}.workbench{display:grid;grid-template-columns:240px minmax(320px,1fr) 300px;max-width:1600px;margin:auto;min-height:calc(100dvh - 78px)}.console,.spec-panel{padding:26px 22px;background:#fcfdfb}.console{border-right:1px solid var(--line)}.spec-panel{border-left:1px solid var(--line)}.panel-heading>span{font-size:9px;letter-spacing:1.5px;font-weight:750;color:#99a49d}.panel-heading h1,.panel-heading h2{margin:10px 0;font-size:21px;letter-spacing:-.6px}.panel-heading p{font-size:12px;line-height:1.8;color:var(--sub);margin-bottom:23px}.console-section{margin-top:24px}.console-section h2{font-size:11px;font-weight:700;letter-spacing:.3px;color:#86938b;margin-bottom:12px}.scene-button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:10px 12px;margin:3px 0;border:0;border-radius:7px;background:none;color:#5a6b61;font-size:12px;min-height:38px}.scene-button span{font-size:10px;color:#a5afa8}.scene-button.active{color:#175d3d;background:#e4f3e9;font-weight:750}.scene-button:hover{background:#edf3ee}label{display:block;font-size:11px;color:#748178;margin:14px 0}select{display:block;width:100%;background:white;border:1px solid #e1e8e2;padding:8px;border-radius:6px;color:#42594a;margin-top:6px;font-size:11px;min-height:36px}.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.event-grid button,.reset-button{min-height:38px;border:1px solid #e0e7df;border-radius:7px;background:#fff;color:#63766a;font-size:10px;padding:7px}.reset-button{width:100%;margin-top:10px;background:#f2f5f0}.console-footnote{font-size:10px;line-height:1.8;color:#a1aaa4;margin-top:20px}.prototype-panel{padding:22px 24px 0;display:flex;flex-direction:column;align-items:center;min-width:0;background:radial-gradient(ellipse at 50% 35%,#e1eae3,#f4f6f3 70%)}.preview-topline{width:min(100%,430px);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#7a8b80;margin-bottom:20px}.preview-topline>span{font-size:8px;letter-spacing:1px}.preview-topline>b{font-size:11px;font-weight:600;color:#4f6458}.preview-topline>a{font-size:10px;border-bottom:1px solid #aab9ac}.device{width:clamp(280px,calc((100dvh - 180px)*.462),390px);aspect-ratio:390/844;flex:none;border-radius:40px;border:7px solid #242b27;box-shadow:0 20px 40px #23392a1c,0 0 0 1px #151d19;overflow:hidden;background:white}.device iframe{width:100%;height:100%;display:block;border:0;background:white}.preview-caption{font-size:10px;color:#89978d;margin:18px 0 22px}.notes-block{padding:18px 0;border-bottom:1px solid #e8ede7}.notes-block h3{font-size:12px;margin:0 0 10px;color:#3f5a48}.notes-block p{font-size:12px;line-height:1.9;color:#7a8980;margin:7px 0}.notes-block b{color:#455e4f;font-weight:650}.state-card{background:#edf5ee;border-radius:12px;padding:16px;margin-top:25px}.state-card>span{font-size:10px;color:#85988a}.state-card>div{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}.state-card b{font-size:13px}.state-card em{font-size:11px;font-style:normal;color:#297753}.state-card p{font-size:10px;color:#7c9483;margin-bottom:0}.scope-note{margin-top:25px}.scope-note>b{font-size:11px;color:#536e5c}.scope-note p{font-size:11px;color:#8b9b90;line-height:1.85}.flow-link{display:block;margin-top:23px;color:#4c7d60;font-size:11px}@media(min-width:1440px){.workbench{grid-template-columns:270px minmax(430px,1fr) 340px}.console,.spec-panel{padding:30px}}@media(max-width:950px){.workbench{grid-template-columns:200px minmax(320px,1fr) 260px;min-width:780px}.console,.spec-panel{padding:22px 15px}.workspace-header{min-width:780px;padding:0 20px}.prototype-panel{padding:22px 15px}.device{width:280px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Keep the three review columns visible while their contents scroll independently. */
@media(min-width:951px){
  body{height:100dvh;overflow:hidden}
  .workbench{height:calc(100dvh - 78px);min-height:0}
  .console,.spec-panel{height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d9e5dc transparent}
  .prototype-panel{height:100%;overflow-y:auto;padding-top:18px}
  .preview-topline{margin-bottom:14px}
  .device{width:clamp(240px,calc((100dvh - 188px)*.462),390px)}
  .preview-caption{margin:13px 0 14px}
}
.scene-button{transition:background .15s ease,color .15s ease}
.scene-button.active{box-shadow:inset 3px 0 0 #34a779;background:#e8f4ec}
@media(prefers-reduced-motion:reduce){.scene-button{transition:none}}

.scene-group{margin:9px 0 17px}
.scene-group>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 2px;font-size:11px;font-weight:700;color:#5b7464;list-style:none;user-select:none}
.scene-group>summary::-webkit-details-marker{display:none}
.scene-group>summary::before{content:'›';font-size:17px;line-height:1;transform:rotate(0deg);transition:transform .15s}
.scene-group[open]>summary::before{transform:rotate(90deg)}
.scene-group>summary>span{margin-left:auto;min-width:23px;padding:3px 5px;text-align:center;border-radius:7px;background:#edf4ee;color:#7c9283;font-size:10px}
.scene-group .scene-button{font-size:11.5px;padding:10px;gap:6px}
.scene-group .scene-button span{flex-shrink:0;font-size:9px}
.scene-group>summary:focus-visible{outline:2px solid #147d59;outline-offset:3px;border-radius:5px}