.mode-teaser-route{--bg-solid: #ffffff;--bg-card: #ffffff;--text-primary: #26282b;--text-secondary: #5d5b66;--border-primary: #e7e2ef;--accent-primary: #6f3ad0;--teaser-mint: #d8fff3;--teaser-sky: #9dcfff;--teaser-pink: #fdc2ff;--teaser-violet: #a86cea;--teaser-feature: #6f3ad0;--teaser-pastel-ink: #26282b;background:radial-gradient(ellipse at 82% 38%,color-mix(in srgb,var(--teaser-pink) 24%,transparent),transparent 43%),radial-gradient(ellipse at 51% 55%,color-mix(in srgb,var(--teaser-sky) 20%,transparent),transparent 46%),radial-gradient(ellipse at 9% 16%,color-mix(in srgb,var(--teaser-mint) 20%,transparent),transparent 36%),var(--bg-solid)}.dark .mode-teaser-route{--bg-solid: #17151f;--bg-card: #292535;--text-primary: #f6f3fc;--text-secondary: #c5bfd0;--border-primary: #453c58;--accent-primary: #bd98ff;background:radial-gradient(ellipse at 82% 38%,color-mix(in srgb,var(--teaser-violet) 13%,transparent),transparent 43%),radial-gradient(ellipse at 51% 55%,color-mix(in srgb,var(--teaser-sky) 8%,transparent),transparent 46%),var(--bg-solid)}.mode-teaser-route main{padding:0}.mode-select.mode-teaser{display:flex;flex-direction:column;width:100%;max-width:1440px;min-height:100svh;margin:0 auto;padding:40px 48px 48px;color:var(--text-primary)}.mode-teaser-hero{flex:1;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;min-height:min(660px,calc(100svh - 240px))}.mode-select-heading{min-width:0;padding:32px 0 52px}.mode-select-eyebrow{display:block;margin-bottom:30px;color:var(--text-secondary);font-weight:600;letter-spacing:.12em;font-size:14px}.mode-select h1{margin:0;font-size:clamp(46px,5.7vw,82px);line-height:1.16;font-weight:800;letter-spacing:-.065em}.mode-select h1>span{display:block;white-space:nowrap}.mode-select h1 em{color:var(--accent-primary);font-style:normal;background:linear-gradient(110deg,var(--accent-primary),var(--teaser-violet));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mode-select-heading p{margin:30px 0 0;color:var(--text-secondary);font-size:18px;line-height:1.8;word-break:keep-all}.mode-sand-title{position:relative;isolation:isolate;touch-action:pan-y}.mode-sand-title h1{transition:opacity .3s}.mode-teaser[data-intro=pending] .mode-sand-title h1{opacity:0;transition:none}.mode-teaser[data-intro=pending] .mode-teaser-art{visibility:hidden}.mode-sand-title[data-active=true] h1{opacity:var(--sand-title-opacity, .16);transition:none}@media (prefers-reduced-motion: reduce){.mode-teaser[data-intro=pending] .mode-sand-title h1{opacity:1}.mode-teaser[data-intro=pending] .mode-teaser-art{visibility:visible}}.mode-sand-canvas{position:absolute;top:-24px;left:0;width:100%;height:calc(100% + 48px);pointer-events:none}.mode-sand-replay{display:inline-flex;align-items:center;gap:9px;max-width:100%;min-height:44px;margin-top:14px;padding:6px 0;color:var(--text-secondary);font-size:14px;line-height:1.5;text-align:left;transition:color .2s}.mode-sand-replay>svg{width:20px;height:20px;flex-shrink:0;color:var(--accent-primary)}.mode-sand-replay:not(:disabled):hover{color:var(--accent-primary)}.mode-sand-replay:disabled{opacity:.45;cursor:default}.mode-sand-replay:focus-visible{outline:3px solid var(--accent-primary);outline-offset:4px;border-radius:4px}.mode-sand-replay-arrow{font-size:20px;color:var(--accent-primary)}.mode-sand-hint-touch{display:none}@media (hover: none),(pointer: coarse){.mode-sand-hint-pointer{display:none}.mode-sand-hint-touch{display:inline}}.mode-teaser-stage{display:flex;flex-direction:column;align-self:stretch;min-width:0;min-height:460px}.mode-teaser-art{flex:1;position:relative;min-height:0}.mode-teaser-canvas{position:absolute;inset:0;touch-action:pan-y}.mode-teaser-canvas canvas{display:block;width:100%;height:100%}.mode-teaser-fallback{position:absolute;inset:6%;display:grid;place-items:center;border:1px solid var(--border-primary);border-radius:50%;transform:rotate(-12deg)}.mode-teaser-fallback[hidden]{display:none}.mode-teaser-fallback span{color:var(--accent-primary);font-size:clamp(100px,14vw,200px);line-height:1;font-weight:800;letter-spacing:-.1em}.mode-teaser-controls{display:flex;justify-content:center;align-items:center;gap:12px;padding-bottom:26px}.mode-teaser-controls[data-ready=false] .mode-teaser-arrangements{display:none}.mode-teaser-arrangements{display:flex;min-width:0;padding:4px;border:1px solid var(--border-primary);border-radius:14px;background:var(--bg-card)}.mode-teaser-arrangements button{min-height:44px;padding:8px 14px;border-radius:10px;color:var(--text-secondary);font-size:14px;transition:color .2s,background .2s;white-space:nowrap}.mode-teaser-arrangements button[aria-pressed=true]{background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-card));color:var(--text-primary);font-weight:600}.mode-teaser-arrangements button:hover{color:var(--accent-primary)}.mode-teaser-pause{display:grid;place-items:center;width:44px;height:44px;padding:0;flex-shrink:0;border:1px solid var(--border-primary);border-radius:50%;background:var(--bg-card);color:var(--text-secondary)}.mode-teaser-pause svg{display:block;width:20px;height:20px}.mode-teaser-pause:not(:disabled):hover{color:var(--accent-primary);border-color:var(--accent-primary)}.mode-teaser-pause:disabled{cursor:default;opacity:.55}.mode-select-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border-primary);border-bottom:1px solid var(--border-primary);background:color-mix(in srgb,var(--bg-card) 65%,transparent)}.mode-option{min-width:0;display:flex;align-items:center;gap:20px;padding:30px 26px;color:var(--text-primary);text-decoration:none;transition:background .2s}.mode-option+.mode-option{border-left:1px solid var(--border-primary)}.mode-option:hover{background:color-mix(in srgb,var(--accent-primary) 4%,var(--bg-solid))}.mode-option-copy{flex:1;min-width:0}.mode-option h2{margin:0 0 8px;font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.04em}.mode-option-copy p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}.mode-option-cta{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;white-space:nowrap}.mode-option-cta>span{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-primary);border-radius:50%;font-size:24px;font-weight:400;transition:background .2s,color .2s,transform .3s}.mode-option:hover .mode-option-cta>span{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;transform:rotate(45deg)}.mode-option-symbol{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent-primary) 7%,var(--bg-card));color:var(--accent-primary)}.mode-option-symbol svg{display:block;width:26px;height:26px}.mode-option-cta svg{display:block;width:20px;height:20px}.mode-option:focus-visible,.mode-teaser-controls button:focus-visible{outline:3px solid var(--accent-primary);outline-offset:4px}@media (prefers-reduced-motion: no-preference){.mode-select-heading{animation:mode-teaser-enter .8s both}.mode-teaser-stage{animation:mode-teaser-enter 1s .12s both}.mode-select-options{animation:mode-teaser-enter .7s .2s both}}@keyframes mode-teaser-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1100px){.mode-select.mode-teaser{padding-right:28px;padding-left:28px}.mode-option{padding:26px 18px;gap:14px}.mode-option-cta{font-size:0;gap:0}.mode-option h2{font-size:20px}.mode-teaser-stage{min-height:410px}}@media (max-width: 767px){.mode-select.mode-teaser{padding:28px 20px 32px}.mode-teaser-hero{grid-template-columns:minmax(0,1fr);min-height:0}.mode-select-heading{padding:0;text-align:center}.mode-select-eyebrow{margin-bottom:18px;font-size:14px}.mode-select h1{font-size:clamp(39px,10.5vw,64px);line-height:1.15}.mode-select-heading p{margin-top:18px;font-size:14px;line-height:1.7}.mode-sand-replay{margin-top:4px}.mode-teaser-stage{width:100%;max-width:440px;height:320px;min-height:0;margin:12px auto 0}.mode-teaser-controls{gap:8px;padding-bottom:18px}.mode-teaser-arrangements{padding:2px}.mode-teaser-arrangements button{padding:6px 10px}.mode-option{flex-direction:column;padding:20px 12px;gap:12px;text-align:center}.mode-option-copy{width:100%}.mode-option h2{display:grid;place-items:center;min-height:2.6em;font-size:18px;word-break:keep-all;overflow-wrap:anywhere}}@media (max-width: 360px){.mode-select.mode-teaser{padding-left:16px;padding-right:16px}.mode-teaser-stage{height:292px}.mode-teaser-controls{gap:6px}.mode-teaser-arrangements button{padding-left:8px;padding-right:8px}}@media (prefers-reduced-motion: reduce){.mode-select *,.mode-select *:before,.mode-select *:after{animation:none;transition:none}.mode-option:hover .mode-option-cta>span{transform:none}}
