.scroll-story{height:calc(var(--scene-count) * 100svh);position:relative}.story-viewport{background:var(--paper);height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden}.story-viewport:before{content:"";opacity:.22;background-image:radial-gradient(#959595 .7px,#0000 .7px);background-size:22px 22px;position:absolute;inset:64px 0 0;-webkit-mask-image:radial-gradient(#000 15%,#0000 70%);mask-image:radial-gradient(#000 15%,#0000 70%)}.story-heading{text-align:center;z-index:20;pointer-events:none;width:min(640px,80%);position:absolute;top:12.5%;left:50%;transform:translate(-50%)}.story-heading .eyebrow{letter-spacing:1.7px;color:var(--muted);margin-bottom:14px;font-size:8px;display:block}.story-heading h1,.story-heading h2{letter-spacing:-1.8px;font-size:clamp(32px,3.3vw,48px);font-weight:500;line-height:1.06}.story-heading>p{color:var(--muted);max-width:380px;margin:13px auto 0;font-size:12px;line-height:1.5}.scene-corrections .story-heading,.scene-context .story-heading{width:min(760px,90%)}.scene-corrections .story-heading>p,.scene-context .story-heading>p{max-width:580px;font-size:14px}.story-canvas{position:absolute;inset:0}.story-card,.story-product{transform-origin:50%;will-change:transform,opacity;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}.story-card{opacity:0;z-index:4;width:410px}.story-product{z-index:5;width:360px}.surface-active{z-index:9}.scene-corrections .story-product,.scene-context .story-product,.scene-try .story-product{z-index:12}.scene-context .opening-product:before{content:"";border:1px solid var(--line);background:var(--recess);z-index:-1;opacity:.6;position:absolute;inset:26px -10px 0 10px;transform:translate(7px,-13px)rotate(4deg)}.story-annotation{left:var(--note-x);top:var(--note-y);z-index:20;background:var(--paper);width:190px;padding:12px 0;animation:.24s ease-out both note-arrives;position:absolute;transform:translate(-50%,-50%)}.annotation-label{font:8px/1.6 var(--mono);letter-spacing:1px;color:var(--green);margin-bottom:9px;display:block}.story-annotation>p{letter-spacing:-.1px;color:var(--ink);font-size:15px;line-height:1.5}.conversation-note{border:1px solid var(--line);background:var(--recess);width:208px;padding:16px 18px;box-shadow:0 10px 24px #1112}.conversation-note .annotation-label{color:var(--copper);font-size:7px}.conversation-note>p{font-size:15px;line-height:1.5}.annotation-leaders{pointer-events:none;z-index:16;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.annotation-leaders path{fill:none;stroke:#9a9a9a;stroke-width:1px;vector-effect:non-scaling-stroke}.annotation-leaders marker path{stroke:var(--green);stroke-width:1px}.annotation-leaders .conversation-leader{stroke:var(--copper);stroke-dasharray:3 5;opacity:.65}.annotation-leaders .component-link{stroke:var(--green);stroke-width:1.3px;opacity:.75}.annotation-leaders .shared-link{stroke-dasharray:3 4;opacity:.6}.package-outline{border:1px solid var(--line);opacity:0;pointer-events:none;position:absolute;inset:29% 16% 24%}.package-outline>span{background:var(--paper);font:10px var(--mono);color:var(--green);padding:0 9px;position:absolute;top:-8px;left:20px}.scene-shared .package-outline{opacity:1}.shared-intent{z-index:18;background:var(--paper);width:260px;padding:8px 12px;position:absolute;top:73%;left:50%;transform:translate(-50%,-50%)}.shared-intent>div{font:10px var(--mono);justify-content:space-between;align-items:center;gap:12px;display:flex}.shared-intent b{color:var(--green);border:1px solid var(--green);background:var(--intent-surface);padding:10px 14px;font-weight:500}.shared-intent i{color:var(--muted);font-style:normal}.shared-intent button{border-bottom:1px solid var(--line);background:0 0;justify-content:space-between;width:100%;padding:10px 0 7px;font-size:10px;display:flex}.shared-intent button span{color:var(--green)}.shared-intent small{color:var(--muted);margin-top:8px;font-size:9px;display:block}.process-reference{display:none}.check-annotation{width:210px}.try-evidence{margin-top:18px}.try-evidence button{background:var(--green);width:100%;color:var(--on-green);justify-content:space-between;padding:12px 13px;font-size:11px;display:flex}.try-evidence [role=status]{font:8px/1.5 var(--mono);color:var(--muted);margin-top:9px}.stage-footnote{font:8px var(--mono);color:var(--muted);position:absolute;bottom:28px;left:4%}.story-nav{z-index:30;align-items:center;gap:3px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.story-nav button{color:var(--muted);background:0 0;align-items:center;gap:6px;min-height:40px;padding:10px 7px;display:flex}.nav-dot{background:#8b8b8b;border-radius:50%;width:5px;height:5px}.nav-label{font:9px var(--mono);white-space:nowrap;display:none}.story-nav button[aria-current] .nav-dot{background:var(--green)}.story-nav button[aria-current] .nav-label{color:var(--green);display:block}.story-nav .next-scene{color:var(--green);margin-left:16px;font-size:22px}.scroll-invitation{font:8px var(--mono);color:var(--muted);align-items:center;gap:16px;display:flex;position:absolute;bottom:30px;right:4%}.scroll-invitation>span{color:var(--green);font-size:17px}@keyframes note-arrives{0%{opacity:0}to{opacity:1}}.product-label{font:9px var(--mono);letter-spacing:1px;align-items:center;gap:8px;margin-bottom:12px;display:flex}.product-label>span:last-child{color:var(--muted);letter-spacing:0;margin-left:auto;font-size:8px}.live-dot,.rule-dot{background:var(--green);border-radius:50%;width:6px;height:6px;display:inline-block}.example-app{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;box-shadow:0 16px 36px #1113}.app-topline{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:10px 20px;font-size:13px;display:flex}.app-symbol{font:500 25px var(--sans);color:var(--green)}.app-topline>span:last-child{font:8px var(--mono);color:var(--muted);margin-left:auto}.app-body{padding:16px 22px}.app-title-row{font:8px var(--mono);color:var(--muted);justify-content:space-between;align-items:center;display:flex}.task-state{border:1px solid var(--line);border-radius:2px;padding:4px 8px}.app-body h3{letter-spacing:-.6px;margin:10px 0 14px;font-size:21px;font-weight:500}.app-body label{justify-content:space-between;margin-bottom:7px;font-size:10px;display:flex}.app-body label span{color:var(--muted);font-size:8px}.app-body textarea{resize:none;border:1px solid var(--control-line);background:var(--recess);width:100%;height:72px;min-height:72px;color:var(--ink);border-radius:2px;padding:10px;font-size:12px;line-height:1.6;display:block}.app-body textarea.draft-preserved{border-color:var(--green);background:var(--intent-surface)}.attachment{border:1px solid var(--line);border-radius:2px;align-items:center;gap:10px;margin-top:10px;padding:9px 10px;display:flex;position:relative}.document-icon{text-align:center;width:26px;color:var(--copper);font-size:22px}.attachment-info{gap:4px;display:grid}.attachment-info strong{font-size:10px;font-weight:500}.attachment-info>span{color:var(--muted);font-size:9px}.cancel-button,.retry-button{background:0 0;margin-left:auto;padding:8px;font-size:11px}.cancel-button{padding:3px 8px;font-size:19px}.upload-track{background:var(--line);height:2px;position:absolute;bottom:0;left:0;right:0}.upload-track>span{background:var(--green);width:62%;height:100%;display:block}.attachment-interrupted .attachment-info>span{color:var(--copper)}.attachment-check{color:var(--green);margin-left:auto}.app-feedback{color:var(--green);min-height:12px;margin-top:10px;font-size:9px}.app-footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;display:flex}.app-footer>span{color:var(--muted);font-size:9px}.app-footer button{background:var(--green);color:var(--on-green);border-radius:2px;padding:9px 13px;font-size:10px}.example-intent{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px 0;display:flex}.example-intent>span{font:6.5px var(--mono);color:var(--muted)}.example-intent>p{color:var(--green);font-size:11px}.simulation-controls{margin-top:10px}.simulation-primary{color:var(--on-green);background:var(--green);border:1px solid var(--green);justify-content:space-between;width:100%;padding:10px 15px;font-size:11px;display:flex}.simulation-primary>span{font-size:16px}.simulation-secondary{justify-content:space-between;margin-top:6px;display:flex}.simulation-secondary button{color:var(--muted);background:0 0;padding:7px 2px;font-size:9px}.diagram-sheet{border:1px solid var(--line);--diagram:var(--ink);--tint:#373737;--stroke:#8b8b8b;background:#272727;border-radius:2px;padding:19px 18px 12px;box-shadow:0 12px 28px #1113}.sheet-sequence{--diagram:var(--ink);--tint:#373737;--stroke:#8b8b8b;border-color:var(--line);background:#2b2b2b}.sheet-data{--diagram:var(--ink);--tint:#373737;--stroke:#8b8b8b;border-color:var(--line);background:#303030}.diagram-heading{color:var(--diagram);align-items:center;gap:10px;display:flex}.diagram-heading>span:first-child{font:10px var(--mono);opacity:.7}.diagram-heading h3{letter-spacing:-.8px;font-size:25px;font-weight:500}.diagram-symbol{margin-left:auto;font-size:27px}.diagram-question{color:var(--muted);margin:5px 0 21px;font-size:11px}.diagram-sheet svg{width:100%;color:var(--diagram);display:block;overflow:visible}.diagram-sheet svg text{fill:var(--diagram);font:12px var(--sans)}.diagram-lines{fill:none;stroke:var(--stroke);stroke-width:1.3px}.diagram-lines .route-lit{stroke:var(--green);stroke-width:2.2px}.flow-node{fill:var(--panel);stroke:var(--stroke)}.flow-node.node-lit{fill:var(--green);stroke:var(--green);stroke-width:1.5px}.diagram-sheet svg .flow-node.node-lit+text{fill:var(--on-green)}.diagram-sheet svg .svg-small{font:8px var(--mono)}.diagram-sheet svg .svg-handwritten{font:500 12px var(--mono);fill:var(--green)}.lifeline{fill:none;stroke:var(--stroke);stroke-dasharray:3 4}.sheet-footer{border-top:1px solid var(--stroke);font:7px var(--mono);color:var(--diagram);letter-spacing:.6px;justify-content:space-between;margin-top:14px;padding-top:12px;display:flex}.sheet-footer span{opacity:.6}.data-note{border:1px solid var(--stroke);color:var(--diagram);border-radius:2px;align-items:center;gap:12px;margin-top:8px;padding:10px 8px;font-size:9px;display:flex}.data-note b{font:8px var(--mono);min-width:52px}.data-note i{font:8px var(--mono);background:var(--tint);margin-left:4px;padding:2px 4px}.note-active{background:var(--intent-surface);border-color:var(--green)}.note-active b{color:var(--green)}.sequence-result{color:var(--diagram);padding:10px 0 0;font-size:9px}.sequence-result b{font:8px var(--mono);margin-right:10px}.diagram-lines .index-lit{stroke:var(--green);stroke-width:2.5px}.diagram-sheet svg .index-text{font:8px var(--mono);fill:var(--green)}.note-linked{box-shadow:0 0 0 2px #d7f58a1a;background:var(--intent-surface)!important;border-color:var(--green)!important}.erd-tables{justify-content:space-between;align-items:flex-start;padding-top:5px;display:flex}.entity{border:1px solid var(--stroke);border-radius:2px;width:43%;font-size:10px;overflow:hidden}.entity-name{background:var(--tint);color:var(--diagram);padding:8px;font-weight:600}.entity-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;min-height:29px;padding:7px 8px;display:flex}.entity-row code{font:9px var(--mono)}.entity-row small{font:8px var(--mono);color:var(--diagram)}.entity-row .index-badge{font:7px var(--mono);background:var(--tint);color:var(--diagram);padding:4px 2px}.row-linked{background:var(--intent-surface)}.row-linked .index-badge{background:var(--green);color:var(--on-green)}.entity-relation{width:14%;font:8px var(--mono);color:var(--diagram);align-items:center;gap:3px;margin-top:60px;display:flex}.entity-relation i{background:var(--diagram);flex:1;height:1px}.index-compartment{border:1px solid var(--stroke);color:var(--diagram);border-radius:2px;margin-top:18px;padding:9px}.index-caption{font:7px var(--mono);letter-spacing:1px;justify-content:space-between;display:flex}.index-caption span{letter-spacing:0;opacity:.7}.index-compartment .index-definition{text-align:left;width:100%;color:var(--diagram);background:0 0;align-items:center;gap:8px;padding:9px 0;font-size:10px;display:flex}.index-compartment .index-definition b{font:9px var(--mono);background:var(--green);color:var(--on-green);padding:3px 4px}.index-compartment .index-definition>span:last-child{margin-left:auto;font-size:17px}.index-compartment>code{font:7px var(--mono);opacity:.8;display:block}.record-count{color:var(--diagram);align-items:center;gap:6px;margin-top:16px;font-size:8px;display:flex}.record-count>span:last-child{opacity:.7;margin-left:auto}.record-empty,.record-present{border:1px solid var(--diagram);border-radius:50%;width:6px;height:6px}.record-present{background:var(--diagram)}@media (max-width:1100px) and (min-width:761px){.story-card{width:360px}.story-product{width:340px}.story-annotation{width:150px}.story-annotation>p{font-size:13px}.annotation-label{font-size:7px}.conversation-note{width:175px;padding:13px}.check-annotation{width:170px}.stage-footnote{font-size:7px}.scroll-invitation{gap:7px;font-size:7px}}@media (min-width:1600px){.story-card{width:450px}.story-product{width:400px}.story-annotation{width:215px}.story-annotation>p{font-size:16px}}@media (max-height:740px) and (min-width:761px){.story-heading{top:12%}.story-heading h1,.story-heading h2{font-size:36px}.story-heading .eyebrow{margin-bottom:10px}.story-heading>p{margin-top:10px;font-size:11px}.story-card{width:370px}}@media (max-width:760px){.story-viewport{min-height:600px}.story-heading{width:90%;top:85px}.story-heading .eyebrow{letter-spacing:1.1px;margin-bottom:12px;font-size:7px}.story-heading h1,.story-heading h2{letter-spacing:-1.3px;font-size:33px}.story-heading>p{max-width:260px;margin-top:10px;font-size:10px}.story-card,.story-product{width:min(340px,100vw - 36px)}.story-annotation{left:var(--mobile-x);top:var(--mobile-y);width:145px;padding:7px 0}.annotation-label{letter-spacing:.65px;margin-bottom:6px;font-size:6.5px;line-height:1.4}.story-annotation>p{font-size:11px;line-height:1.45}.conversation-note{width:155px;padding:11px 12px}.conversation-note>p{font-size:12px}.conversation-note .annotation-label{font-size:6px}.annotation-leaders path{stroke-width:.8px}.annotation-leaders .component-link{stroke-width:1px}.package-outline{inset:38% 4% 29%}.package-outline>span{font-size:8px;left:12px}.shared-intent{width:240px;padding:8px 12px;top:70%}.shared-intent>div{font-size:9px}.shared-intent b{padding:8px 12px}.shared-intent button{padding-top:8px;font-size:10px}.shared-intent small{font-size:8px}.process-reference{z-index:18;background:var(--paper);font:8px var(--mono);color:var(--green);align-items:center;gap:7px;padding:7px;display:flex;position:absolute;top:79%;left:24%;transform:translate(-50%,-50%)}.process-reference>span{color:var(--muted);font-size:6px}.process-reference b{border:1px solid var(--green);padding:3px;font-weight:400}.scene-try .story-annotation:first-of-type{text-align:center;width:270px}.scene-try .story-annotation:first-of-type .annotation-label{display:none}.scene-try .check-annotation{width:min(255px,100vw - 48px);padding:0}.check-annotation>p{display:none}.check-annotation .annotation-label{text-align:center;font-size:6.5px}.try-evidence{margin-top:7px}.try-evidence button{padding:10px 12px;font-size:10px}.try-evidence [role=status]{text-align:center;margin-top:6px;font-size:7px}.stage-footnote{display:none}.story-nav{justify-content:space-between;gap:0;bottom:11px;left:6%;right:6%;transform:none}.story-nav button{gap:5px;padding:10px 5px}.nav-label{font-size:8px}.story-nav .next-scene{margin-left:6px;padding:8px 5px;line-height:1}.scroll-invitation{display:none}.scene-try .app-body{padding-top:10px;padding-bottom:10px}.scene-try .example-intent{margin-top:8px;padding:7px 0}.scene-try .simulation-primary{padding:8px 15px}.product-label{font-size:8px}.product-label>span:last-child{font-size:7px}.app-body{padding:14px 18px}.app-body h3{margin:8px 0 12px;font-size:20px}.app-topline{padding:9px 18px}.app-body textarea{height:70px;min-height:70px}.app-footer{margin-top:10px;padding-top:10px}.app-feedback{margin-top:8px}.diagram-sheet{padding:17px 16px 11px}.diagram-heading h3{font-size:24px}.diagram-question{margin:5px 0 18px;font-size:10px}.entity-row{padding:7px 6px}.entity-row code{font-size:8px}.entity-row .index-badge,.index-compartment>code{font-size:6.5px}.record-count{font-size:7px}}@media (max-width:360px){.story-heading{top:80px}.story-heading h1,.story-heading h2{font-size:29px}.story-annotation{width:133px}.conversation-note{width:140px;padding:9px 10px}.story-annotation>p{font-size:10.5px}.annotation-label{font-size:6px}.conversation-note>p{font-size:11px}.app-body{padding:12px 15px}.app-body h3{font-size:18px}.diagram-sheet{padding:15px 13px 10px}.diagram-heading h3{font-size:22px}.diagram-question{font-size:9px}.index-compartment>code{font-size:5.8px}.data-note{gap:7px;font-size:8px}.data-note b{min-width:46px;font-size:7px}.nav-label{font-size:7px}.story-nav .next-scene{margin-left:3px}}@media (max-height:740px) and (max-width:760px){.story-heading{top:77px}.story-heading .eyebrow{margin-bottom:8px;font-size:6px}.story-heading h1,.story-heading h2{font-size:27px}.story-heading>p{max-width:260px;margin-top:7px;font-size:9px}.story-card,.story-product{width:min(300px,100vw - 36px)}.story-annotation{width:137px;padding:5px 0}.story-annotation>p{font-size:10px}.annotation-label{margin-bottom:4px;font-size:5.8px}.conversation-note{width:143px;padding:9px 10px}.conversation-note>p{font-size:10.5px}.app-body{padding:11px 16px}.app-topline{padding:7px 16px}.app-body h3{margin:7px 0 10px;font-size:18px}.app-body textarea{height:58px;min-height:58px;font-size:11px}.attachment{margin-top:8px;padding:7px}.app-footer{margin-top:8px;padding-top:8px}.simulation-primary{padding:8px 12px}.simulation-secondary button{font-size:8px}.simulation-controls{margin-top:8px}.diagram-sheet{padding:15px 13px 10px}.diagram-heading h3{font-size:22px}.diagram-question{margin-bottom:14px;font-size:9px}.sheet-footer{margin-top:10px;padding-top:9px}.entity-row{min-height:25px;padding:5px 6px}.entity-name{padding:6px}.entity-relation{margin-top:53px}.index-compartment{margin-top:13px;padding:7px}.index-compartment .index-definition{padding:7px 0;font-size:9px}.record-count{margin-top:11px;font-size:6px}.data-note{gap:8px;padding:7px;font-size:8px}.data-note b{min-width:45px;font-size:7px}.sequence-result{font-size:8px}.scene-package .story-heading>p{display:none}.scene-package [data-annotation=inspect]{top:27%}.conversation-note{padding:7px 10px}.scene-try .product-label,.scene-try .app-title-row{display:none}.scene-try .app-symbol{font-size:20px}.scene-try .app-topline{padding-top:6px;padding-bottom:6px}.scene-try .app-body h3{margin-top:5px;margin-bottom:8px}.scene-try .example-intent{padding:5px 0}.scene-try .simulation-primary{padding:6px 15px}.scene-try .simulation-secondary button{padding-top:4px;padding-bottom:4px}.scene-try .check-annotation{padding:0}.scene-try .check-annotation .annotation-label{display:none}.scene-try .story-annotation:first-of-type{top:26.5%}.scene-try .check-annotation{top:88%}.scene-try .story-nav{bottom:2px}.example-intent{margin-top:8px;padding:7px 0}.example-intent>p{font-size:8px}.example-intent>span{font-size:6px}.scene-try .check-annotation{width:245px}.check-annotation .annotation-label{font-size:5.8px}.try-evidence{margin-top:5px}.try-evidence button{padding:8px 11px}.try-evidence [role=status]{margin-top:5px;font-size:6.5px}.shared-intent{width:220px}.shared-intent button{padding:7px 0 5px}.shared-intent small{margin-top:5px;font-size:7px}.shared-intent b{padding:6px 10px}.process-reference{padding:4px;font-size:7px}}@media (max-width:760px){.scene-corrections .story-heading h1,.scene-context .story-heading h2{font-size:30px}.scene-corrections .story-heading>p,.scene-context .story-heading>p{max-width:350px;font-size:12px;line-height:1.5}}@media (max-height:740px) and (max-width:760px){.scene-corrections .story-heading h1,.scene-context .story-heading h2{font-size:26px}.scene-corrections .story-heading>p,.scene-context .story-heading>p{font-size:11px}.scene-corrections .story-product,.scene-context .story-product{width:260px}.opening-product .app-title-row,.opening-product .app-feedback{display:none}.scene-corrections .conversation-note,.scene-context .conversation-note{top:87%}}@media (max-width:360px){.scene-corrections .story-heading h1,.scene-context .story-heading h2{font-size:27px}}@media (max-width:360px) and (max-height:740px){.scene-corrections .story-heading h1,.scene-context .story-heading h2{font-size:23px}.scene-corrections .story-heading>p,.scene-context .story-heading>p{font-size:10px;line-height:1.4}}