:root{font-family:Arial,"Helvetica Neue",sans-serif;color:#fff7e9;background:#102943;font-synthesis:none}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #fff;outline-offset:3px}[hidden]{display:none!important}
.experience{position:relative;width:100%;height:100%;min-height:460px;overflow:hidden;isolation:isolate}
#panorama{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#panorama.dragging{cursor:grabbing}
.top-shade{position:absolute;inset:0 0 auto;height:27%;pointer-events:none;background:linear-gradient(180deg,rgba(9,31,53,.72),transparent)}
.bottom-shade{position:absolute;inset:auto 0 0;height:36%;pointer-events:none;background:linear-gradient(0deg,rgba(9,31,53,.72),transparent)}
.header{position:absolute;top:0;left:0;right:0;padding:clamp(18px,2.4vw,34px) clamp(20px,3vw,48px);display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}
.eyebrow{margin:0 0 9px;color:#ffd88e;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.header h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,3.3vw,53px);line-height:1.02;font-weight:600;letter-spacing:-.035em;text-shadow:0 2px 18px #152d4e80}.subtitle{margin:10px 0 0;font-size:clamp(13px,1.14vw,18px);font-weight:600;opacity:.92}
.head-right{display:flex;gap:8px;align-items:center;pointer-events:auto}.pill{background:#fff8e9e8;color:#31506a;border:1px solid #fff9;border-radius:100px;padding:10px 15px;font-size:13px;font-weight:700;box-shadow:0 8px 25px #10294338}.pill:hover{background:white}
.hotspots{position:absolute;inset:0;pointer-events:none}.spot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;background:transparent;color:white;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;filter:drop-shadow(0 4px 8px #061526a6)}.spot-core{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#ffe7ae;color:#852b2c;border:3px solid white;box-shadow:0 0 0 6px #fff5,0 0 0 14px #ffdf9838;font-size:15px;font-weight:700;transition:transform .2s}.spot:hover .spot-core,.spot.active .spot-core{transform:scale(1.12);background:#f87f64;color:white}.spot-text{background:#112c49ed;color:white;border:1px solid #fff7;border-radius:99px;padding:5px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.activity-nav{position:absolute;left:clamp(16px,2.7vw,42px);right:clamp(16px,2.7vw,42px);bottom:clamp(16px,2.6vw,36px);display:flex;gap:10px;z-index:5;max-width:900px}.nav-item{flex:1;min-width:0;min-height:72px;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 14px;color:#23445c;background:#fffaefed;border:1px solid #fff;border-radius:17px;box-shadow:0 10px 28px #10294355;backdrop-filter:blur(12px);transition:transform .18s,background .18s}.nav-item:hover{transform:translateY(-4px);background:white}.nav-item.active{background:#ffe3ad;border-color:#ffce74}.nav-num{font-family:Georgia,serif;font-size:24px;font-weight:700;color:#ba5b48}.nav-copy{min-width:0}.nav-copy strong{display:block;font-size:clamp(13px,1.13vw,16px);line-height:1.16}.nav-copy small{display:block;color:#647b89;font-size:11px;margin-top:4px}
.tap-hint{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);z-index:3;border:1px solid #fff9;border-radius:99px;color:#1e465d;background:#fff9e6ee;padding:14px 24px;font-size:clamp(16px,1.5vw,22px);font-weight:700;box-shadow:0 12px 35px #152b4a77;animation:float 2.3s ease-in-out infinite}.tap-hint span{color:#b8523e}@keyframes float{50%{transform:translate(-50%,-54%)}}
.speaking-card{position:absolute;top:clamp(128px,20vh,190px);left:clamp(18px,3vw,48px);width:min(460px,34vw);max-height:calc(100vh - 315px);overflow:auto;z-index:4;padding:22px 24px 23px;background:#fff8eaf2;color:#183a51;border:1px solid #fff;border-radius:22px;box-shadow:0 18px 50px #091d3970;backdrop-filter:blur(18px)}.speaking-card .eyebrow{color:#af543e;margin-bottom:8px}.speaking-card h2{font-size:clamp(22px,2vw,31px);line-height:1.16;margin:0 28px 7px 0;color:#16334c}.phrase{font-size:clamp(18px,1.45vw,23px);font-weight:700;color:#bb5b41;margin:0 0 14px}.rule{height:1px;background:#e2cbb0;margin:13px 0}.cue{font-size:14px;color:#536b78;margin:0 0 12px}.model{font-size:clamp(20px,1.7vw,26px);font-weight:700;line-height:1.28;margin:0 0 12px}.frame-label{font-size:11px;color:#9c694f;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 5px}.frame{font-size:clamp(18px,1.38vw,22px);font-weight:700;line-height:1.25;margin:0}.card-close{position:absolute;right:14px;top:10px;width:32px;height:32px;border:0;border-radius:50%;background:#eadcc8;color:#27465b;font-size:23px}
.card-right .speaking-card{left:auto;right:clamp(18px,3vw,48px)}
.amy-panel{position:absolute;right:clamp(18px,3vw,48px);bottom:clamp(122px,13vw,154px);z-index:6;width:clamp(125px,12vw,168px);text-align:center}.amy-stage{position:relative;width:100%;height:clamp(130px,18vh,190px);background:transparent;overflow:visible}.amy-stage video{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;background:transparent}.amy-controls{display:flex;justify-content:center;gap:3px;margin-top:5px}.amy-controls button{border:1px solid #fff8;background:#fff9e6ee;color:#28455a;padding:6px 3px;min-width:0;flex:1;white-space:nowrap;border-radius:8px;font-size:11px;font-weight:700}.amy-play{width:100%;border:0;border-radius:11px;background:#e57454;color:white;margin-top:6px;padding:8px 5px;font-weight:700;font-size:12px;box-shadow:0 5px 15px #122e4660}.amy-play:disabled{background:#8a9ca4;cursor:default}.amy-panel.hidden-amy .amy-stage,.amy-panel.hidden-amy .amy-play{display:none}.amy-status{position:absolute;right:0;top:-24px;padding:3px 7px;border-radius:6px;background:#183a51de;color:white;font-size:10px;white-space:nowrap}
.card-right .amy-panel{right:auto;left:clamp(18px,3vw,48px)}
.load-status,.fatal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 25px;border-radius:15px;background:#132f4be0;color:white;font-weight:700}.fatal{width:min(90%,500px);line-height:1.5}
@media(max-width:980px){.header{padding:18px 18px}.header h1{font-size:32px}.subtitle{font-size:13px}.activity-nav{left:13px;right:13px;bottom:13px;gap:6px;max-width:none}.nav-item{min-height:64px;padding:7px;gap:6px}.nav-num{font-size:19px}.nav-copy strong{font-size:12px}.nav-copy small{display:none}.speaking-card{top:125px;left:16px;width:min(420px,50vw);max-height:calc(100vh - 230px);padding:16px}.amy-panel{right:16px;bottom:88px;width:125px}.amy-stage{height:125px}}
@media(max-width:650px){.experience{min-height:0}.header{padding:14px 14px}.header h1{font-size:27px}.eyebrow{font-size:9px}.subtitle{display:none}.pill{padding:8px 10px;font-size:10px}.activity-nav{bottom:max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:5px}.nav-item{min-height:46px;border-radius:11px;padding:5px 8px}.nav-num{font-size:16px}.nav-copy strong{font-size:11px}.spot-core{width:38px;height:38px}.spot-text{font-size:10px}.speaking-card{top:77px;left:10px;width:min(80vw,350px);max-height:calc(100vh - 205px);padding:12px 14px;border-radius:15px}.card-right .speaking-card{left:auto;right:10px}.speaking-card h2{font-size:20px}.phrase{font-size:16px}.model{font-size:18px}.frame{font-size:16px}.cue{font-size:12px}.amy-panel{right:10px;bottom:114px;width:86px}.card-right .amy-panel{left:10px;right:auto}.amy-stage{height:100px}.amy-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.amy-controls button{font-size:9px;padding:3px 4px}.amy-play{font-size:9px;padding:5px 2px}}