:root{--ink:#0a2232;--navy:#071d2c;--panel:#133549;--gold:#c5a76b;--paper:#f7f5ef;--muted:#657784;--line:#d7d3c9;--teal:#77c1b2;color-scheme:light}
*{box-sizing:border-box}html:root{overflow-anchor:none;scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans",sans-serif;line-height:1.55}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;line-height:1.4}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #308bcb;outline-offset:4px}p,h1,h2,h3{margin:0;overflow-wrap:anywhere;line-break:strict;word-break:normal}html:lang(ko) p,html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) button{word-break:keep-all;overflow-wrap:anywhere}html:lang(en){hyphens:auto}h1{font-size:clamp(28px,4.8vw,56px);line-height:1.22;letter-spacing:-.045em;font-weight:650}h2{font-size:20px;line-height:1.4}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.21em;color:#967239;margin-bottom:16px}.topbar{max-width:1200px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gold)}.wordmark{font-size:27px;font-weight:750;letter-spacing:-1.5px}.wordmark span{color:#b99554}.languages{display:flex;gap:2px;background:#fff9;padding:3px;border:1px solid var(--line);border-radius:30px}.languages button{border:0;background:transparent;color:var(--muted);min-width:42px;min-height:42px;border-radius:50%;font-size:12px}.languages button[aria-pressed=true]{background:var(--navy);color:white}main{max-width:1160px;margin:auto;padding:0 24px}.page{padding:38px 0 16px;min-height:calc(100svh - 168px)}.button{border:1px solid transparent;border-radius:8px;min-height:46px;padding:12px 18px;font-weight:650;font-size:14px}.gold{background:var(--gold);color:var(--navy)}.secondary{background:transparent;color:inherit;border-color:currentColor}.text-button{border:0;color:inherit;background:transparent;padding:9px 10px;min-height:44px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.demo-note{font-size:11px;text-align:center;color:var(--muted);margin:12px 0;min-height:18px}footer{display:flex;justify-content:center;align-items:center;gap:24px;padding:4px 20px 12px;font-size:12px;color:var(--muted)}footer a{padding:10px 0}.skip{position:absolute;left:0;top:-100px}.skip:focus{top:0;background:white;padding:16px;z-index:99}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* A finite intro animation. The activity screen always requires a user action. */
.intro{display:grid;grid-template-columns:1fr 1.1fr;column-gap:50px;align-content:center;align-items:center}.intro-heading{grid-column:1;grid-row:1}.intro-heading>p:last-child{font-size:19px;color:var(--muted);margin-top:22px;min-height:60px}.concept-cabin{grid-column:2;grid-row:1/3;background:var(--navy);color:#f6f4ee;border-radius:80px 80px 24px 24px;min-height:460px;position:relative;padding:34px 22px 24px;box-shadow:0 24px 60px #08213318;border:1px solid #284352}.offline-badge{text-align:center;font-size:12px;letter-spacing:.02em;color:#bdd3d7}.offline-badge:before{content:'◌';color:var(--gold);margin-right:8px}.intro-actions{grid-column:1;grid-row:2;align-self:start;margin-top:24px;display:flex;align-items:flex-start;flex-direction:column;gap:12px}.intro-actions>.gold{min-width:250px}.intro-dots{display:flex;gap:7px;margin-bottom:8px}.intro-dots i{height:4px;width:24px;background:#d9d5cc;border-radius:2px}.intro-dots i.active{background:#a9843f}.network{position:relative;height:340px}.network-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#54747d;stroke-width:1;fill:none}.network-lines path{stroke-dasharray:4 5}.network[data-shared=true] .network-lines path{stroke:var(--gold);animation:flow 1.4s linear 2}.network-node{position:absolute;background:#143347;border:1px solid #355362;border-radius:12px;text-align:center;padding:12px 6px;font-size:11px;line-height:1.5;width:28%;left:36%;top:45%;transition:background .3s,border-color .3s}.network-node strong{display:block;font-size:12px;font-weight:600}.network-node .node-icon{display:block;font-size:24px;line-height:1.2;margin-bottom:8px;color:var(--gold)}.network-node p{font-size:10px;margin:7px 0;color:#c6d6db;min-height:30px}.network-node small{color:var(--gold);font-size:11px}.network-node.hub{top:6%;left:33%;width:34%;border-color:var(--gold);background:#0b2637}.network-node.crew-1{left:0;top:65%}.network-node.crew-2{left:36%;top:65%}.network-node.crew-3{left:72%;top:65%}.network-node.has-record{border-color:var(--gold);background:#23464f}.network-node.has-record p{color:#fff}.network-node.offline{border-style:dashed;border-color:#d7a773}.network .record-dot{position:absolute;top:52%;left:49%;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:0}.network[data-shared=true] .record-dot{animation:packet 1.3s ease-in-out 2}.network-node .store{display:block;color:var(--teal);font-size:10px}
/* Three equal activities; joining and closing remain optional short paths. */
.choose{display:flex;flex-direction:column;justify-content:center;padding-bottom:32px}.choose>p:not(.eyebrow){color:var(--muted);font-size:14px;margin-top:16px;max-width:580px}.role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 20px}.role-card{text-align:left;border:1px solid #315060;background:var(--navy);color:#faf8f2;padding:26px 24px;border-radius:12px;position:relative;min-height:230px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s,border-color .2s}.role-card:hover{transform:translateY(-3px);border-color:var(--gold)}.role-icon{color:var(--gold);font-size:32px;height:65px}.role-card strong{font-size:22px;letter-spacing:-.025em}.role-card .role-desc{font-size:13px;color:#b6c9ce;margin-top:8px}.role-card .role-count{font-size:11px;margin-top:auto;padding-top:20px;color:var(--gold)}.role-card .arrow{position:absolute;right:24px;bottom:22px;font-size:26px;color:var(--gold)}.extra-cards{display:flex;gap:16px}.extra-cards button{border:1px solid var(--line);border-radius:8px;padding:14px 20px;min-height:50px;flex:1;text-align:left;background:transparent;color:var(--ink);font-size:14px}.extra-cards button:after{content:' →';float:right;color:#997537}.choose>#replay{align-self:center;margin-top:20px;color:var(--muted)}
/* Move the same live stage into enlarged view: no image-only modal. */
.experience{padding-top:14px}.experience-bar{max-width:580px;margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.experience-bar strong{font-size:14px;text-align:center}.experience-bar .text-button{font-size:12px;white-space:nowrap;color:var(--muted)}.device{width:min(100%,390px);margin:auto;background:var(--navy);color:#f9f7f0;border:8px solid #142b37;border-radius:26px;overflow:hidden;box-shadow:0 20px 45px #061d291f}.device-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:9px 12px;color:#c8d6da;min-height:32px}.progress-track{height:2px;background:#314a58}.progress-track span{display:block;height:2px;background:var(--gold);transition:width .2s}.screen{position:relative;isolation:isolate;aspect-ratio:912/1523;background:var(--navy);overflow:hidden}#capture-crop{position:absolute;inset:0;overflow:hidden}#capture{display:block;width:100%;height:auto;max-width:none;object-fit:contain;position:absolute;left:0;top:0}#screen-shade{position:absolute;inset:0;background:#03121b88;z-index:1;pointer-events:none}.screen.has-target #screen-shade{display:none}#hotspot{position:absolute;background:transparent;border:2px solid #ecc77b;border-radius:9px;z-index:2;box-shadow:0 0 0 2000px #03121b99;min-height:0;min-width:0;padding:0}#hotspot>span{position:absolute;right:-8px;top:-12px;background:#e9c67e;color:var(--navy);font-size:11px;font-weight:bold;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}#coach{position:absolute;left:12px;right:12px;padding:15px;background:#14394a;border:1px solid #779393;border-radius:12px;z-index:3;box-shadow:0 8px 24px #0003}#coach h2{font-size:17px;line-height:1.45;font-weight:650;color:#fff}#coach p{font-size:12px;line-height:1.55;color:#c4d7db;margin:7px 0 14px}#coach .controls{display:flex;gap:10px}#coach .controls .gold{flex:1}#coach .button{padding:10px 12px;font-size:12px;min-height:44px}#coach .secondary{border-color:#67838d;color:#dce9ec}#coach[data-side=above]:after,#coach[data-side=below]:after{content:'';position:absolute;left:var(--pointer,50%);border:7px solid transparent}#coach[data-side=above]:after{bottom:-14px;border-top-color:#779393}#coach[data-side=below]:after{top:-14px;border-bottom-color:#779393}.screen.adjacent-coach{overflow:visible;aspect-ratio:auto;padding-top:166.9956%}.screen.adjacent-coach #capture-crop,.screen.adjacent-coach #illustration{height:auto;aspect-ratio:912/1523;bottom:auto}.screen.adjacent-coach #coach{position:relative;left:auto;right:auto;margin:12px;top:auto!important}.screen.adjacent-coach #screen-shade{height:auto;bottom:auto;aspect-ratio:912/1523}.device-bottom{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:0 10px;min-height:36px;font-size:9px;color:#9db7bf}.device-bottom .text-button{font-size:11px;padding:6px;min-height:36px}#illustration{position:absolute;inset:0;background:var(--navy);padding:20px 12px}#illustration>.eyebrow{color:var(--gold);font-size:9px;text-align:center;margin-bottom:12px}#illustration .network{height:320px;margin-top:20px}#illustration .network-node{padding:8px 3px}#illustration .network-node strong{font-size:10px}#illustration .network-node p{font-size:9px}#illustration .network-node small{font-size:10px}.ready-list{list-style:none;padding:0;margin:70px 10px 20px}.ready-list li{padding:20px;border-bottom:1px solid #365463;display:flex;justify-content:space-between;font-size:17px}.ready-list li:after{content:'✓';color:var(--gold)}.room-mark{display:block;margin:20px auto;width:38px;height:104px;object-fit:contain}.illustration-state{text-align:center;margin-top:20px;color:var(--gold);font-size:13px}#completion{position:absolute;inset:0;background:var(--navy);z-index:5;padding:30px 24px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px;text-align:center}.completion-mark{width:62px;height:62px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:28px;margin:0 auto 12px}#completion h2{font-size:25px}#completion-outcome{font-size:14px;color:#c8d8dc}#completion-count{font-size:12px;color:var(--gold)}#completion-notice{font-size:11px;color:#9cb5be}.is-summary #capture-crop,.is-summary #illustration,.is-summary #coach,.is-summary #hotspot,.is-summary #screen-shade{display:none!important}#image-error{font-size:12px;color:#9e3a28;max-width:430px;margin:10px auto}#retry-image{display:block;margin:auto}
dialog{border:1px solid #49616c;border-radius:18px;background:var(--paper);color:var(--ink);padding:18px;max-height:94dvh;max-width:calc(100vw - 20px)}dialog::backdrop{background:#021522bb;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:12px}.dialog-heading h2{font-size:16px}.dialog-heading .text-button{font-size:13px;white-space:nowrap}#zoom-dialog{width:640px}#zoom-stage .device{width:min(100%,500px)}#help-dialog{width:480px;padding:24px}#help-body{font-size:15px;line-height:1.85}.guide-zoom-open{overflow:hidden}
@keyframes flow{to{stroke-dashoffset:-36}}@keyframes packet{0%{transform:translateY(-55px);opacity:0}30%{opacity:1}100%{transform:translateY(60px);opacity:0}}
@media(min-width:720px) and (min-height:800px){.experience .device{width:min(390px,calc((100svh - 240px)*.599))}.experience .device:has(.adjacent-coach){width:390px}}
@media(max-width:719px){.topbar{padding:10px 16px}.wordmark{font-size:24px}.languages button{min-width:36px;min-height:36px}.languages{gap:0}.page{min-height:calc(100svh - 150px);padding-top:26px}main{padding:0 16px}.intro{display:flex;flex-direction:column;justify-content:center;gap:18px}.intro-heading{width:100%;text-align:center}.intro-heading .eyebrow{margin-bottom:10px;font-size:9px}.intro-heading>p:last-child{font-size:14px;margin-top:12px;min-height:44px}.concept-cabin{width:min(100%,400px);min-height:300px;padding:20px 18px 18px;border-radius:45px 45px 20px 20px}.concept-cabin .network{height:255px}.concept-cabin .network-node{padding:8px 4px}.network-node .node-icon{font-size:20px;margin-bottom:4px}.network-node p{font-size:9px;margin:4px 0;min-height:26px}.intro-actions{margin:0;width:100%;gap:4px;align-items:center}.intro-actions>.gold{width:100%}.intro-dots{margin:0 0 10px}.offline-badge{font-size:10px}.choose>p:not(.eyebrow){font-size:12px;margin-top:12px}.role-cards{grid-template-columns:1fr;gap:10px;margin:22px 0 14px}.role-card{min-height:100px;padding:16px 16px 16px 72px;justify-content:center;border-radius:10px}.role-icon{position:absolute;left:21px;top:29px;font-size:27px;height:auto}.role-card strong{font-size:19px}.role-card .role-desc{font-size:12px;margin-top:3px}.role-card .role-count{padding-top:7px;font-size:10px}.role-card .arrow{right:18px;bottom:32px;font-size:22px}.extra-cards{flex-direction:column;gap:8px}.extra-cards button{font-size:13px;padding:12px 16px}.choose>#replay{margin-top:12px}.experience{padding-top:6px}.experience-bar{gap:4px;margin-bottom:4px}.experience-bar strong{font-size:12px}.experience-bar .text-button{font-size:11px;padding:8px 4px}.device{border-width:6px;border-radius:20px;width:min(100%,360px)}.device-top{font-size:10px;padding:7px 10px;min-height:28px}.demo-note{font-size:10px;line-height:1.5}footer{font-size:11px;gap:20px}#coach{padding:12px;left:10px;right:10px}#coach h2{font-size:16px}#coach p{font-size:12px}#completion{padding:20px}#completion h2{font-size:22px}.dialog-heading{gap:10px}#zoom-dialog{padding:8px}#zoom-stage .device{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.screen{aspect-ratio:430/800}.screen.adjacent-coach{aspect-ratio:auto;padding-top:186.0465%}.screen.adjacent-coach #capture-crop,.screen.adjacent-coach #illustration,.screen.adjacent-coach #screen-shade{aspect-ratio:430/800}
.hub-mark{display:block;height:38px;width:16px;object-fit:contain;margin:0 auto 8px}.network-node.hub{top:0}.network-node small{font-size:14px}.network-node p{font-size:11px}.concept-cabin{min-height:480px}.concept-cabin .network{height:360px}
@media(max-width:719px){.concept-cabin{min-height:350px}.concept-cabin .network{height:300px}.concept-cabin .network-node:not(.hub){top:58%}.concept-cabin .network-node p{font-size:10px}.concept-cabin .network-node.hub{top:2%}.hub-mark{height:30px}}
@media(min-width:720px) and (min-height:800px){.experience .device{width:min(390px,calc((100svh - 280px)*.5375))}}
#illustration .network{height:280px}#illustration .network-node:not(.hub){top:55%}#illustration .hub-mark{height:30px}.ready-list{margin:20px 10px}.ready-list li{padding:15px}.room-mark{height:70px}
.intro-playback{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.role-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#coach{z-index:10;transition:opacity 220ms ease,transform 220ms cubic-bezier(.2,.7,.3,1);transform:translateY(0)}
#capture-crop,#illustration,#hotspot,#screen-shade,#completion{transition:opacity 180ms ease}
.screen[data-transition=exit]>:not(#coach){opacity:0;transition-duration:140ms}
.screen[data-transition=exit] #coach{opacity:0;transition-duration:110ms}
.screen.step-loading #coach,.screen.step-loading #capture-crop,.screen.step-loading #hotspot,
.screen.step-loading #illustration,.screen.step-loading #screen-shade,
.screen[data-transition=loading]>*{opacity:0;pointer-events:none;transition:none}
.screen.step-loading #coach,.screen[data-transition=loading] #coach{transform:translateY(8px)}
.screen[data-transition=enter] #coach{transition-delay:110ms}
.screen[data-transition=exit],.screen[data-transition=loading],.screen[data-transition=enter]{pointer-events:none}
@media(max-width:719px){.role-cards{grid-template-columns:1fr}.role-card{min-height:116px}.role-icon{font-size:22px}}
.concept-cabin .intro-network{height:400px}
.intro-network .network-node{height:140px;transition:opacity .65s ease,transform .65s ease,background .5s,border-color .5s}
.intro-network .network-node.hub{height:165px}
.intro-network[data-phase="0"] .network-node.hub{animation:hub-arrive .9s ease both}
.intro-network .network-node:not(.hub){top:65%}
.intro-network[data-phase="1"] .network-node:not(.hub){animation:crew-arrive .7s ease both}
.intro-network .crew-2{animation-delay:.12s!important}.intro-network .crew-3{animation-delay:.24s!important}
.intro-network[data-phase="0"] .network-node:not(.hub){opacity:0;visibility:hidden}
.intro-network .network-lines{transition:opacity .7s;stroke:var(--gold)}
.intro-network[data-phase="0"] .network-lines{opacity:0}
.intro-network .scene-order{display:block;margin:5px auto 0;color:#f2d598;font-size:10px;animation:order-arrive .6s ease both}
.intro-network .network-node p{min-height:32px;margin:6px 0}
.intro-network .network-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px}
.intro-network .network-node .node-icon{font-size:20px;margin:0;line-height:1}
.intro-network .network-node p{margin:0;min-height:30px;line-height:1.4}
.intro-network .network-node small{line-height:1.2}
.intro-network .scene-order{margin:0;line-height:1.3}
.intro-network .hub-mark{height:34px;margin:0 auto 4px}
.intro-network .scene-packet{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#f5d697;box-shadow:0 0 14px #e3ba6899;animation:scene-travel 1.2s ease-in-out both}
.intro-network.scene-paused *{animation-play-state:paused!important}
@keyframes hub-arrive{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes crew-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes order-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes scene-travel{0%{opacity:0;transform:translate(calc(var(--fx) - 4px),calc(var(--fy) - 4px))}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--tx) - 4px),calc(var(--ty) - 4px))}}
@media(max-width:719px){.concept-cabin .intro-network{height:345px}.intro-network .network-node.hub{height:152px}.intro-network .network-node:not(.hub){top:58%;height:140px}.intro-network .network-node p{font-size:10px}.intro-playback{gap:4px}.intro-playback .text-button{font-size:12px}}