:root{--ground:#0A1A2F;--rule:#8FB0CE;--chalk:#E8F0F7;--active:#FFFC00;--peri:#8A93FF;--plate:rgba(232,240,247,0.045);}*{box-sizing:border-box}html,body{margin:0;padding:0}html{overflow-x:clip}body{background:var(--ground);color:var(--chalk);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;}body::before{content:"";position:fixed;inset:0;background: linear-gradient(to right,rgba(143,176,206,0.10) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(to bottom,rgba(143,176,206,0.10) 1px,transparent 1px) 0 0/48px 48px;pointer-events:none;z-index:0;}.sheet{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;gap:clamp(0.5rem,0.2rem + 1.4vw,1.4rem);padding:calc(0.8rem + env(safe-area-inset-top)) calc(1.05rem + env(safe-area-inset-right)) calc(0.9rem + env(safe-area-inset-bottom)) calc(1.05rem + env(safe-area-inset-left));max-width:1180px;margin:0 auto;}.brand{display:flex;align-items:center;gap:0.6rem}.brand img{width:clamp(52px,11vw,160px);height:auto;aspect-ratio:1 / 1;display:block;}.brand span{font-family:"Bodoni Moda",Georgia,serif;font-weight:600;font-size:clamp(1rem,0.9rem + 0.7vw,1.35rem);letter-spacing:0.01em;}h1{font-family:"Bodoni Moda",Georgia,serif;font-weight:600;font-size:clamp(1.5rem,1.05rem + 2.9vw,3.4rem);line-height:1.08;letter-spacing:-0.012em;margin:0;max-width:19ch;overflow-wrap:break-word;}h1 .hl{color:var(--active)}.lede{margin:0.55rem 0 0;font-size:clamp(0.92rem,0.86rem + 0.4vw,1.1rem);line-height:1.5;color:rgba(232,240,247,0.82);max-width:46ch;}.lede b{font-weight:600;color:var(--chalk)}.main{display:flex;flex-direction:column;gap:clamp(0.7rem,0.4rem + 1.2vw,1.4rem);flex:1 1 auto;}.plate{border:1px solid rgba(143,176,206,0.42);background:var(--plate);border-radius:12px;padding:clamp(0.7rem,0.5rem + 0.8vw,1.15rem);display:grid;gap:clamp(0.4rem,0.25rem + 0.6vw,1rem);}.figure{position:relative;width:100%;max-width:330px;margin:0 auto}.figure svg{display:block;width:100%;height:auto}.hotspots{position:absolute;inset:0;display:grid;grid-template-columns:30% 36% 34%}.hotspots button{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px;}.hotspots button:focus-visible{outline:2px solid var(--peri);outline-offset:2px}.key{list-style:none;margin:0;padding:0;display:grid;gap:0.3rem;align-content:start}.key li{margin:0}.key button{width:100%;display:flex;align-items:center;gap:0.6rem;min-height:44px;text-align:left;appearance:none;cursor:pointer;background:none;border:0;border-left:2px solid rgba(143,176,206,0.35);padding:0.32rem 0.2rem 0.32rem 0.6rem;color:rgba(232,240,247,0.8);font-family:inherit;font-size:clamp(0.8rem,0.76rem + 0.26vw,0.95rem);line-height:1.35;-webkit-tap-highlight-color:transparent;transition:color 180ms cubic-bezier(0.16,1,0.3,1),border-color 180ms cubic-bezier(0.16,1,0.3,1);}.key button:focus-visible{outline:2px solid var(--peri);outline-offset:2px}.key .n{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.72rem;letter-spacing:0.08em;color:var(--rule);flex:0 0 auto;transition:color 180ms cubic-bezier(0.16,1,0.3,1);}.key li[data-on="true"] button{color:var(--chalk);border-left-color:var(--active)}.key li[data-on="true"] .n{color:var(--active)}.last{border-top:1px dashed rgba(143,176,206,0.35);padding-top:clamp(0.6rem,0.45rem + 0.5vw,0.95rem);display:grid;gap:0.45rem;justify-items:start;}.lead{display:flex;align-items:center;gap:0.5rem;color:var(--active)}.lead svg{display:block;width:12px;height:24px}.lead span{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.72rem;letter-spacing:0.08em;}.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0.85rem 1.5rem;border-radius:10px;background:var(--peri);color:#081225;font-weight:600;font-size:clamp(0.98rem,0.92rem + 0.4vw,1.12rem);text-decoration:none;letter-spacing:0.005em;transition:transform 200ms cubic-bezier(0.16,1,0.3,1);}.cta:focus-visible{outline:3px solid var(--active);outline-offset:3px}.cta:active{transform:translateY(1px)}.note{margin:0;font-size:clamp(0.78rem,0.75rem + 0.2vw,0.88rem);color:rgba(232,240,247,0.7);}footer{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.72rem;letter-spacing:0.1em;color:rgba(232,240,247,0.5);padding-top:0.3rem;}.ln{stroke:var(--rule);fill:none;stroke-width:1.1;opacity:0.75}.dash{stroke:var(--rule);fill:none;stroke-width:1.1;stroke-dasharray:4 4;opacity:0.7}.fig-t{fill:var(--rule);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:9px;letter-spacing:0.08em;opacity:0.9}.mark{fill:var(--rule);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:10px;letter-spacing:0.1em}.hub{fill:var(--rule);opacity:0.55}.row1{stroke:var(--active);stroke-width:1.6;opacity:1}.chip{fill:var(--active);opacity:0.9}g[data-stage]{transition:opacity 200ms cubic-bezier(0.16,1,0.3,1)}g[data-stage][data-on="true"] .ln,g[data-stage][data-on="true"] .dash{stroke:var(--active);opacity:1}g[data-stage][data-on="true"] .mark,g[data-stage][data-on="true"] .fig-t{fill:var(--active)}g[data-stage][data-on="true"] .hub{fill:var(--active);opacity:1}@media (hover:hover) and (pointer:fine){.cta:hover{transform:translateY(-2px)}.key button:hover{color:var(--chalk)}}@media (min-width:900px){.sheet{justify-content:center;gap:1.6rem}.main{flex:0 0 auto}.figure{max-width:none}.top-copy{max-width:32ch}.layout{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center}.plate{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;padding:1.5rem}.key button{font-size:0.95rem}.figure{grid-column:1}.key{grid-column:2}.last{grid-column:1 / -1}}@media (prefers-reduced-motion:reduce){*{transition:none !important}}