@font-face{font-family:Manrope;src:url('/assets/manrope-regular.ttf')}@font-face{font-family:Manrope;src:url('/assets/manrope-bold.ttf');font-weight:700}
:root{--paper:#f5f4ee;--ink:#1d2b2a;--muted:#596561;--line:#d7ddd7;--pine:#155b53;--mint:#a0cebc;--lime:#d1ed83;--surface:#fff}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.5 Manrope,sans-serif;transition:background .3s,color .3s}button{font:700 16px/22px Manrope,sans-serif;cursor:pointer}button:focus-visible{outline:3px solid #245ec7;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}button[hidden],[hidden]{display:none!important}.filter-defs{position:absolute;pointer-events:none}header{height:89px;max-width:1440px;margin:auto;padding:22px 40px;display:flex;gap:24px;align-items:center;border-bottom:1px solid var(--line)}.brand{width:180px;height:auto}.edition{font-size:12px;letter-spacing:.13em;margin-left:auto;font-weight:700}.edition i{font-style:normal;color:#8d9e96;margin:0 14px}.theme{min-width:48px!important;width:48px;padding:0!important;font-size:24px!important}main{max-width:1440px;margin:auto;padding:25px 40px 0}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px}.intro h1{font-size:40px;line-height:48px;letter-spacing:-1.6px;margin:0}.intro p{color:var(--muted);font-size:16px;margin:0;max-width:320px}.mobile{display:none}nav{display:flex;gap:8px;margin:22px 0 0;border-bottom:1px solid var(--line);padding-bottom:16px}nav button{padding:10px 22px;border:1px solid transparent;border-radius:8px;color:var(--muted);background:none;white-space:nowrap;transition:background .2s,color .2s}nav small{font-size:11px;margin-right:12px;font-weight:400;color:#81928a}nav button[aria-pressed=true]{background:var(--ink);color:var(--paper)}nav button[aria-pressed=true] small{color:var(--mint)}nav button:hover{border-color:var(--line)}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:28px;min-height:430px;height:clamp(425px,53vh,620px)}.description{padding:32px 0 18px;display:flex;flex-direction:column;position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--pine);font-weight:700}.description h2{font-size:32px;line-height:38px;letter-spacing:-1px;margin:14px 0 16px}.description>p{font-size:16px;line-height:25px;margin:0;color:var(--muted)}.behavior{display:flex;gap:12px;margin:18px 0 22px}.behavior p{font-size:14px;line-height:22px;margin:0;color:var(--muted)}.tiny-cross{color:var(--pine);font-size:24px}.actions{display:flex;flex-wrap:wrap;gap:10px}.glass{position:relative;isolation:isolate;min-height:48px;border-radius:8px;border:1px solid rgba(210,245,230,.72);padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:white;background:radial-gradient(ellipse at 17% 0%,#ffffff52,transparent 62%),linear-gradient(165deg,#155b53ef,#155b53d4 61%,#70ae99a3);backdrop-filter:url(#glass) saturate(145%);-webkit-backdrop-filter:blur(1px) saturate(145%);box-shadow:inset 0 1px 1px #fffffff2,inset 1px 0 2px #ffffff6b,inset -1px 0 2px #ffffff38,inset 0 -5px 5px #042f2645,0 8px 16px #15372b24,0 1px 1px #155b5342;transition:transform .15s,box-shadow .15s}.glass:before{content:'';position:absolute;inset:3px 4px 7px;border-top:1px solid #ffffffb3;border-radius:5px;pointer-events:none}.glass span{position:relative;z-index:2}.glass:hover{box-shadow:inset 0 2px 2px #fff,inset 0 -5px 5px #042f2670,0 10px 20px #15372b35}.glass:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #042f2640,0 2px 5px #15372b20}.glass.secondary{background:radial-gradient(ellipse at 17% 0%,#ffffffa6,transparent 66%),linear-gradient(165deg,#ffffff30,#b1d7c528);color:var(--ink);border-color:#ffffffb8;box-shadow:inset 0 1px 1px #fff,inset 1px 0 2px #ffffff8c,inset 0 -4px 5px #477a6421,0 6px 14px #15372b13}.voice-note{font-size:12px!important;min-height:18px;line-height:18px!important;margin-top:7px!important}.concept-count{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:12px;color:var(--muted);padding-top:16px}.concept-count b{font-size:18px;color:var(--ink)}.concept-count i{height:1px;flex:1;background:var(--line);margin:0 8px}.stage{position:relative;min-width:0;overflow:hidden;isolation:isolate;touch-action:pan-y}.stage:before{content:'';position:absolute;width:65%;height:80%;left:18%;top:4%;background:radial-gradient(ellipse,#a0cebc4a,transparent 68%);z-index:-1}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#155b5309 1px,transparent 1px),linear-gradient(90deg,#155b5309 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse,black,transparent 66%);z-index:-1}.stage-ring{position:absolute;width:55%;aspect-ratio:1;left:23%;top:7%;border:1px solid #155b5312;border-radius:50%;z-index:-1}.stage-ring:after{content:'';position:absolute;inset:20px;border:1px solid #155b530b;border-radius:50%}canvas{width:100%;height:100%;display:block;outline:none}.stage-label{position:absolute;left:22px;top:22px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);pointer-events:none}.dot{width:6px;height:6px;background:var(--pine);border-radius:50%}.stage-index{position:absolute;right:8px;top:22px;font-size:10px;letter-spacing:.16em;color:var(--muted);pointer-events:none}.role-picker{position:absolute;bottom:14px;left:8px;right:8px;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.role-picker button{font-size:12px;line-height:18px;min-height:36px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.role-picker button[aria-pressed=true]{border-color:var(--pine);background:#e5eee5;color:var(--pine)}.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--pine);background:var(--paper)}.fallback{position:absolute;inset:0;display:grid;align-content:center;padding:32px;background:var(--paper)}.fallback img{max-width:100%}.fallback p{font-size:14px}.narrative{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;min-height:88px}.speaker{display:grid;grid-template-columns:8px 1fr;column-gap:12px;align-items:center}.speaker>span{width:8px;height:30px;border-radius:5px;grid-row:span 2;background:#006f9d}.speaker b{font-size:16px}.speaker small{font-size:12px;color:var(--muted)}.narrative p{margin:0;font-size:16px;line-height:25px;max-width:760px}footer{max-width:1440px;padding:18px 40px 22px;margin:auto;display:flex;justify-content:space-between;gap:24px;font-size:11px;color:var(--muted)}body.dark{--paper:#101f1d;--ink:#e6eee7;--muted:#b0c4ba;--line:#30443f;--pine:#a0cebc;--surface:#1d302b}body.dark .brand{background:#f5f4ee;border-radius:6px;padding:7px;width:194px}body.dark .eyebrow{color:#a0cebc}body.dark .stage:before{background:radial-gradient(ellipse,#155b535e,transparent 70%)}body.dark .stage-grid{background-image:linear-gradient(#a0cebc0c 1px,transparent 1px),linear-gradient(90deg,#a0cebc0c 1px,transparent 1px)}body.dark .role-picker button[aria-pressed=true]{background:#155b53;color:white}body.dark nav button[aria-pressed=true]{color:#142923}body.dark nav button[aria-pressed=true] small{color:#496256}body.dark .glass.secondary{background:linear-gradient(150deg,#ffffff20,#a0cebc0a)}
@media(min-width:1500px){.workspace{grid-template-columns:350px 1fr}.description>p{font-size:18px;line-height:27px}.behavior p{font-size:16px;line-height:24px}.description h2{font-size:40px;line-height:46px}}@media(max-width:1000px){header{padding:18px 24px}.edition{font-size:10px}main{padding:24px 24px 0}.intro{display:block}.intro p{max-width:none;margin-top:8px}.workspace{grid-template-columns:260px 1fr;gap:12px;height:480px}.description h2{font-size:29px;line-height:35px}nav{gap:0}nav button{padding:10px 14px}nav small{margin-right:7px}footer{padding:18px 24px}footer span:last-child{display:none}.stage-label{left:8px;max-width:190px}.stage-index{display:none}.role-picker{bottom:12px}.narrative{grid-template-columns:200px 1fr}}
@media(max-width:680px){header{height:74px;padding:16px 20px}.brand{width:145px}.edition{font-size:9px;letter-spacing:.05em}.edition i{margin:0 4px}.theme{margin-left:auto}.intro h1{font-size:32px;line-height:38px;letter-spacing:-1px}.intro p{font-size:14px}.mobile{display:block}main{padding:24px 20px 0}nav{overflow-x:auto;margin-top:20px;padding-bottom:12px}nav button{padding:9px 12px;font-size:14px}nav small{font-size:10px}.workspace{display:flex;flex-direction:column-reverse;height:auto;gap:0}.stage{height:360px;width:100%;flex:none}.description{padding:12px 0 24px}.description h2{font-size:28px;line-height:34px;margin:10px 0}.description h2 br{display:none}.behavior{margin:14px 0}.concept-count{display:none}.stage-label{top:14px;font-size:10px}.role-picker{bottom:2px;gap:5px}.role-picker button{font-size:11px;padding:5px 7px;min-height:32px}.narrative{grid-template-columns:1fr;gap:10px;padding:18px 0}.narrative p{font-size:16px}.speaker{max-width:240px}footer{padding:18px 20px;display:block}footer span{display:block;margin-bottom:8px}.actions{gap:8px}.glass{font-size:14px;padding:12px 16px}body.dark .brand{width:150px}.edition{max-width:115px}.voice-note{min-height:0}}
@media(min-width:1001px) and (max-height:850px){header{height:72px;padding-top:16px;padding-bottom:16px}main{padding-top:18px}.intro h1{font-size:36px;line-height:44px}nav{margin-top:16px;padding-bottom:12px}.workspace{height:calc(100dvh - 334px);min-height:350px}.description{padding-top:22px}.description h2{font-size:30px;line-height:35px;margin:10px 0}.description>p{font-size:15px;line-height:23px}.behavior{margin:12px 0}.behavior p{font-size:13px;line-height:20px}.concept-count{padding-top:8px}.actions .glass{font-size:14px;padding:12px 14px}.narrative{padding:12px 0;min-height:76px}.narrative p{font-size:15px;line-height:23px}footer{padding-top:12px;padding-bottom:12px}.stage-label{top:14px}.stage-index{top:14px}.actions{gap:8px;flex-wrap:nowrap}.concept-count{font-size:10px}}
.workspace{grid-template-rows:minmax(0,1fr)}.stage,.description{min-height:0}.voice-note:empty{display:none}
@media(min-width:1001px) and (max-height:850px){.description .behavior{display:none}.description .actions{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important}}