html{scroll-behavior:auto}.system-page{background:#000;color:var(--bg-gray);overflow-x:clip}.system-page .site-header{background:#fff}.system-story{height:1120svh;position:relative}.system-stage{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));overflow:hidden;background:#000;isolation:isolate}.system-page button{font-family:inherit}.system-page [hidden]{display:none!important}.skip-link{position:fixed;z-index:100;top:-60px;left:20px;padding:12px 18px;background:#fff;color:var(--text-dark)}.skip-link:focus{top:12px}.system-stage button:focus-visible,.system-stage a:focus-visible{outline:2px solid var(--primary);outline-offset:5px}
#scene,#sequence-canvas,#scene-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#sequence-canvas{display:block}#scene-fx{z-index:2;overflow:hidden}.story-topline{position:absolute;top:31px;left:var(--side);right:var(--side);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.2em;color:var(--text-gray);z-index:3}.experience-label{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:.15em}.experience-label i{width:4px;height:4px;border-radius:50%;background:var(--secondary);box-shadow:0 0 12px color-mix(in srgb, var(--secondary) 53.333%, transparent)}.story-copy{position:absolute;top:25%;left:var(--side);width:29%;max-width:430px;z-index:3;pointer-events:none}.story-kicker{font-size:9px;letter-spacing:.22em;margin:0 0 24px;color:var(--primary)}.story-copy h1{font-size:clamp(36px,4.05vw,66px);font-weight:430;line-height:1.045;letter-spacing:-.052em;margin:0 0 24px;text-wrap:balance}.story-copy h1 em{color:var(--secondary);font-style:normal}.story-description{font-size:clamp(13px,1.03vw,16px);color:var(--text-muted);max-width:315px;line-height:1.75;font-weight:350;margin:0}.story-detail{display:flex;align-items:flex-start;gap:9px;font-size:10px;line-height:1.7;color:var(--text-gray);max-width:300px;margin-top:28px}.detail-dot{width:4px;height:4px;border-radius:50%;background:var(--secondary);margin-top:7px;flex-shrink:0}.copy-enter{animation:copy-in .5s ease both}@keyframes copy-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.story-bottom{position:absolute;bottom:26px;left:var(--side);right:var(--side);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:15px}.scroll-invitation{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--text-gray);width:210px}.scroll-track{width:16px;height:26px;flex-shrink:0;border:1px solid var(--text-dark);border-radius:10px;position:relative}.scroll-track i{position:absolute;width:1px;height:6px;background:var(--primary);top:6px;left:7px;animation:scroll-cue 2s ease-in-out infinite}@keyframes scroll-cue{50%{transform:translateY(5px)}}.chapter-nav{display:flex;align-items:center;gap:11px;padding:13px 19px;border:1px solid var(--hero-deep);border-radius:35px;background:color-mix(in srgb, var(--hero-deep) 87.059%, transparent);backdrop-filter:blur(15px)}.chapter-nav button{font-size:10px;border:0;color:var(--text-gray);background:none;padding:8px 0;white-space:nowrap}.chapter-nav button[aria-current=step]{color:var(--primary-light)}.chapter-nav span{height:1px;width:14px;background:var(--hero-deep)}.step-controls{width:210px;display:flex;align-items:center;justify-content:flex-end;gap:7px}.step-controls>span{font-size:10px;letter-spacing:.07em;color:var(--text-muted);margin-right:10px;font-variant-numeric:tabular-nums}.step-controls i{font-style:normal;color:var(--text-dark);font-size:9px}.step-controls button{width:34px;height:34px;border-radius:50%;border:1px solid var(--primary-dark);color:var(--primary-light);background:var(--hero-deep);font-size:17px}.step-controls button:hover{background:var(--hero-deep)}.step-controls button:disabled{opacity:.3;cursor:default}.total-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--hero-deep);z-index:6}.total-progress span{display:block;height:100%;background:var(--secondary);width:0;box-shadow:0 0 10px color-mix(in srgb, var(--primary) 40.000%, transparent)}
.scene-tag{width:max-content;max-width:calc(100% - 40px);position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-50%);border:1px solid var(--primary-dark);background:color-mix(in srgb, var(--hero-deep) 90.980%, transparent);backdrop-filter:blur(12px);border-radius:15px;padding:12px 17px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 35px #0003}.scene-tag svg{width:26px;height:26px;stroke:var(--primary);fill:none;stroke-width:1.5}.scene-tag b{font-weight:450;font-size:18px;letter-spacing:-.025em}.scene-tag small{display:block;color:var(--text-gray);font-size:8px;letter-spacing:.1em;margin-top:5px}.scene-tag small i{display:inline-block;background:#27ccab;width:4px;height:4px;border-radius:50%;margin-right:6px}.utilities-status{position:absolute;z-index:3;left:var(--side);top:calc(25% + 330px);display:grid;gap:12px;pointer-events:none}.utilities-status span{display:flex;gap:10px;align-items:center;color:var(--text-gray);font-size:10px;letter-spacing:.02em;transition:color .3s}.utilities-status i{width:6px;height:6px;border-radius:50%;border:1px solid currentColor}.utilities-status .active{color:var(--primary-light)}.utilities-status .active i{background:var(--line-color,var(--secondary));border-color:var(--line-color,var(--secondary));box-shadow:0 0 12px color-mix(in srgb, var(--primary) 26.667%, transparent)}.utilities-status .done{color:var(--text-muted)}.utilities-status .done i{background:var(--line-color);border-color:var(--line-color)}
.pos-surface{position:absolute;left:0;top:0;width:540px;height:840px;transform-origin:0 0;border-radius:22px;overflow:hidden;backface-visibility:hidden;background:var(--primary-dark);z-index:4;box-shadow:0 0 0 4px var(--hero-deep),0 0 25px color-mix(in srgb, var(--primary) 9.412%, transparent);will-change:transform}.pos-surface iframe{display:block;width:540px;height:840px;border:0}.pos-caption{position:absolute;z-index:5;left:69%;bottom:108px;transform:translateX(-50%);text-align:center;font-size:10px;white-space:nowrap;background:color-mix(in srgb, var(--hero-deep) 92.941%, transparent);border:1px solid var(--primary-dark);border-radius:22px;padding:10px 17px;color:var(--primary-light);pointer-events:none}.pos-caption small{display:block;font-size:8px;color:var(--text-gray);margin-top:5px}.pulse-dot{display:inline-block;width:5px;height:5px;background:var(--secondary);border-radius:50%;margin-right:7px;box-shadow:0 0 9px color-mix(in srgb, var(--secondary) 40.000%, transparent)}.tap-card{position:absolute;left:0;top:0;width:430px;height:270px;transform-origin:0 0;z-index:5;border-radius:24px;border:1px solid color-mix(in srgb, var(--primary-light) 47.059%, transparent);background:linear-gradient(135deg,var(--hero-deep),var(--primary-dark));padding:28px 32px;color:var(--brand-tint);box-shadow:0 18px 35px #0008;pointer-events:none}.tap-card b{font-size:23px;letter-spacing:.1em;font-weight:500}.card-chip{position:absolute;top:96px;left:34px;width:56px;height:44px;border-radius:8px;background:linear-gradient(135deg,#f2deac,#ae9152);border:1px solid #dec894}.card-chip:after{content:'';position:absolute;inset:13px 0;border-block:1px solid #8a774e}.card-chip:before{content:'';position:absolute;inset:0 18px;border-inline:1px solid #8a774e}.card-wifi{position:absolute;left:112px;top:98px;font-size:28px;letter-spacing:-5px}.tap-card small{position:absolute;left:33px;bottom:44px;font-size:24px;letter-spacing:5px}.tap-card i{position:absolute;right:28px;bottom:24px;font-size:10px;letter-spacing:.14em;font-style:normal}
.story-loading{position:absolute;left:68%;top:54%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;color:var(--text-muted);background:color-mix(in srgb, var(--hero-deep) 91.765%, transparent);border:1px solid var(--hero-deep);padding:15px 21px;border-radius:30px;z-index:6;font-size:11px}.loading-ring{width:19px;height:19px;border:2px solid var(--primary-dark);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.scene-error{position:absolute;z-index:8;left:68%;top:54%;transform:translate(-50%,-50%);background:var(--hero-deep);border:1px solid var(--primary-dark);border-radius:18px;padding:24px;text-align:center;max-width:300px;color:var(--brand-line);font-size:12px}.scene-error button{display:block;margin:16px auto 0;border:1px solid var(--primary-dark);border-radius:20px;background:var(--primary-dark);color:#fff;padding:9px 15px}.sequence-buffer{position:absolute;right:var(--side);top:63px;z-index:7;font-size:8px;letter-spacing:.08em;color:var(--text-gray)}.end-actions{margin-top:26px;pointer-events:auto}.end-actions button{border:1px solid var(--primary-dark);background:var(--hero-deep);color:var(--primary-light);border-radius:26px;padding:13px 20px;font-size:11px}.end-actions button span{margin-left:25px;color:var(--primary)}.system-noscript{padding:35px var(--side);background:var(--hero-deep);color:var(--brand-line);line-height:1.8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:901px) and (max-width:1000px){.story-copy{width:30%;top:23%}.story-copy h1{font-size:38px}.story-description{font-size:12px}.story-detail{font-size:9px}.story-bottom{gap:8px}.scroll-invitation,.step-controls{width:140px}.chapter-nav{gap:7px;padding:10px 13px}.chapter-nav span{width:7px}.utilities-status{top:calc(23% + 340px)}}
@media(max-width:900px){.system-story{height:1180svh}.story-topline{top:21px;left:21px;right:21px;font-size:8px}.experience-label{font-size:6px;letter-spacing:.08em;gap:7px}.story-copy{left:22px;top:67px;width:calc(100% - 44px);max-width:none}.story-kicker{font-size:7px;letter-spacing:.17em;margin-bottom:12px}.story-copy h1{font-size:35px;line-height:1.04;max-width:360px;margin-bottom:13px;letter-spacing:-.045em}.story-copy h1 br{display:none}.story-copy h1 em:before{content:' '}.story-description{font-size:12px;line-height:1.6;max-width:315px}.story-description br{display:none}.story-detail{display:none}.story-bottom{left:18px;right:18px;bottom:20px;display:grid;grid-template-columns:1fr auto;gap:14px}.chapter-nav{grid-row:1;grid-column:1/-1;justify-self:center;justify-content:center;padding:9px 16px;gap:11px}.chapter-nav button{font-size:9px;padding:5px 0}.chapter-nav span{width:12px}.scroll-invitation{width:auto;font-size:9px;gap:8px}.scroll-track{width:13px;height:22px}.scroll-track i{left:5px;top:5px}.step-controls{width:auto;gap:6px}.step-controls button{width:28px;height:28px;font-size:14px}.step-controls>span{font-size:9px;margin-right:6px}.step-controls i{font-size:8px}.pos-caption{left:50%;bottom:120px;font-size:8px;padding:8px 13px;max-width:95%}.pos-caption small{font-size:7px}.utilities-status{left:22px;top:auto;bottom:131px;right:22px;display:flex;justify-content:center;gap:17px}.utilities-status span{font-size:8px;gap:5px}.utilities-status i{width:4px;height:4px}.scene-tag{padding:9px 13px;gap:9px;border-radius:12px}.scene-tag b{font-size:16px}.scene-tag small{font-size:7px;margin-top:3px}.scene-tag svg{width:22px}.story-loading,.scene-error{left:50%;top:58%}.sequence-buffer{top:49px;font-size:7px}.end-actions{margin-top:17px}.end-actions button{padding:10px 16px;font-size:10px}}
@media(max-width:360px){.story-copy{top:60px}.story-copy h1{font-size:30px}.story-description{font-size:11px}.chapter-nav{gap:8px;padding:9px 12px}.chapter-nav span{width:8px}.chapter-nav button{font-size:8px}.experience-label{font-size:5px}.utilities-status{gap:10px}}
@media(max-height:650px) and (min-width:901px){.story-copy{top:20%}.story-copy h1{font-size:38px}.story-kicker{margin-bottom:14px}.story-description{font-size:12px}.story-detail{margin-top:16px}.story-bottom{bottom:19px}.pos-caption{bottom:92px}.utilities-status{top:auto;bottom:120px}}
@media(prefers-reduced-motion:reduce){.system-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(min-width:701px) and (max-width:900px){.story-copy h1{max-width:650px;font-size:44px}.story-description{max-width:480px;font-size:14px}}

#ground-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}