*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 57% 44%,#235052 0%,#112a30 37%,#081115 80%);color:#eef6f5}header{position:absolute;left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));display:flex;align-items:center;gap:22px;z-index:2;pointer-events:none}header img{object-fit:contain}h1{font-size:19px;font-weight:600;margin:0}header p{font-size:13px;color:#a6c1c3;margin:7px 0 0}header button{margin-left:auto;pointer-events:auto}#stage{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid #42e3cf;outline-offset:-4px}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;pointer-events:none;z-index:1;color:#c6dada}.spinner{width:30px;height:30px;border:2px solid #ffffff24;border-top-color:#42e3cf;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2;width:max-content;max-width:calc(100% - 32px);padding:13px 15px 12px;border:1px solid #ffffff18;border-radius:15px;background:#0a191ee8;box-shadow:0 14px 50px #0003;backdrop-filter:blur(14px)}.row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}button{font:inherit;font-size:13px;font-weight:500;background:#243c42;color:#eef6f5;border:1px solid #ffffff15;border-radius:8px;min-height:44px;padding:10px 16px;cursor:pointer;transition:background .16s}button:hover{background:#34535a}button:focus-visible{outline:2px solid #64eddf;outline-offset:3px}button[aria-pressed=true]{background:#42e3cf;color:#082225}button:disabled{opacity:.4;cursor:wait}#zoom-in,#zoom-out{font-size:23px;width:44px;padding:5px}.subtle{background:#ffffff0a}.separator{height:24px;width:1px;background:#ffffff20;margin:0 3px}.controls p{text-align:center;font-size:11px;color:#9fb9bd;margin:12px 8px 0}.touch-help{display:none}.notice{position:absolute;top:110px;left:50%;transform:translateX(-50%);font-size:13px;background:#0b1c22e8;border-radius:8px;padding:10px 16px;z-index:3;max-width:90%;text-align:center}.notice:empty{display:none}[hidden]{display:none!important}@media(max-width:650px){header{left:18px;right:18px;top:18px;gap:12px}header img{width:105px;height:auto}h1{font-size:14px}.heading p{font-size:11px;margin-top:4px}#fullscreen{display:none}.controls{bottom:max(18px,env(safe-area-inset-bottom));padding:10px;max-width:calc(100% - 24px)}button{padding:10px 12px}.row{gap:6px}.separator{display:none}.controls p{font-size:11px;max-width:300px;line-height:1.45}.desktop-help{display:none}.touch-help{display:block}}@media(pointer:coarse){.desktop-help{display:none}.touch-help{display:block}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}button{transition:none}}

.hotspot{position:absolute;left:0;top:0;z-index:2;border-radius:50%;width:44px;height:44px;padding:0;background:#102d32e8;border:1px solid #8df9e9;box-shadow:0 0 0 6px #43e4cf15,0 4px 24px #0006;font-size:17px;font-weight:700;will-change:transform}.hotspot.behind:not([aria-pressed=true]){opacity:.48;border-style:dashed}.hotspot:hover{background:#42e3cf;color:#082225;opacity:1}.feature-nav{display:flex;gap:8px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #ffffff15}.feature-nav button{flex:1;white-space:nowrap;background:#ffffff08}.feature-nav button[aria-pressed=true]{background:#42e3cf}.feature-nav b{margin-right:8px;font-size:12px}.feature-card{position:absolute;z-index:3;left:32px;top:50%;transform:translateY(-50%);width:306px;padding:28px;border:1px solid #6ce9da50;border-radius:20px;background:linear-gradient(135deg,#153a40f2,#091b23f5);box-shadow:0 24px 80px #0005;backdrop-filter:blur(18px);animation:card-in .45s ease both}.feature-card h2{font-size:24px;font-weight:500;margin:18px 0 10px;line-height:1.15}.feature-card strong{display:block;color:#70f5dc;font-size:43px;letter-spacing:-2px}.feature-card p{line-height:1.6;font-size:14px;color:#c4dcdf}.feature-card #feature-number{font-size:10px;letter-spacing:2px;color:#78e4d6;margin:0}.feature-card small{font-size:10px;color:#8ba6ac}#feature-close{position:absolute;right:10px;top:10px;background:none;border:0;font-size:24px;padding:0;width:32px;min-height:32px}.feature-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.feature-connector line{stroke:#7aefdc;stroke-width:1.5;stroke-dasharray:4 5;opacity:0}@keyframes card-in{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}
@media(max-width:650px){.controls{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom))}.controls .row button{font-size:11px;padding:7px 9px;min-height:36px}#zoom-in,#zoom-out{width:32px;font-size:20px}.feature-nav{gap:5px;margin-bottom:8px;padding-bottom:8px}.feature-nav button{font-size:11px;padding:8px 6px;min-height:36px}.feature-nav b{margin-right:4px}.controls p{margin:8px auto 0;font-size:10px}.feature-card{top:auto;bottom:calc(var(--controls-height,210px) + 24px);left:12px;width:calc(100% - 24px);padding:16px 20px;transform:none;border-radius:16px}.feature-card h2{font-size:18px;margin:8px 0 4px}.feature-card strong{font-size:30px;letter-spacing:-1px}.feature-card p{font-size:12px;margin:7px 0;line-height:1.4}.feature-card small{font-size:9px}.hotspot{width:38px;height:38px;font-size:15px}header p{max-width:190px}}
@media(prefers-reduced-motion:reduce){.feature-card{animation:none}}