:root{color-scheme:dark;--lime:#d8ff16;--blue:#2098ef;--text:#f3f7fa;--sub:#b7c5d4;--panel:rgba(9,29,48,.76);--panel-border:rgba(166,197,221,.24);--night:#081624;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{min-width:320px;background:#071a30}body{margin:0;min-height:100vh;min-height:100dvh;color:var(--text);background:linear-gradient(180deg,#132c40 0%,#0c253a 53%,#071a30 100%);overflow-x:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #e8ff65;outline-offset:3px}img{max-width:100%}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.background{position:fixed;inset:-6%;z-index:-2;background-image:url('./assets/ambient.webp');background-position:center 31%;background-size:cover;filter:blur(10px);transform:scale(1.04);opacity:.86;transition:filter .75s,opacity .75s}.atmosphere{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,14,32,.08) 0%,rgba(6,22,38,.35) 36%,rgba(5,21,36,.86) 86%);pointer-events:none;transition:background 1s}.app{position:relative;max-width:1050px;padding:30px 30px 22px;margin:0 auto;isolation:isolate}.brand{text-align:center}.brand-title{font-size:clamp(48px,8vw,84px);font-weight:850;font-style:italic;letter-spacing:-.065em;line-height:1.04;text-shadow:0 3px 30px rgba(1,9,22,.35)}.brand-stripe{margin:5px auto 18px;width:min(36%,285px);height:7px;border-radius:100% 100% 75% 75%;background:var(--lime);transform:rotate(-1deg) skew(-16deg)}.brand-subtitle{font-size:clamp(11px,1.7vw,16px);font-weight:650;color:#dce7f1;letter-spacing:.30em;text-shadow:0 2px 12px #112840}
.showcase{margin-top:12px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:center;gap:14px}.watch-column{align-self:center;display:flex;flex-direction:column;align-items:center;min-width:0}.watch{position:relative;aspect-ratio:571/730;width:min(100%,505px);max-height:min(660px,68vh);-webkit-user-select:none;user-select:none;filter:drop-shadow(0 24px 30px rgba(1,8,20,.50));}.watch-shell{display:block;width:100%;height:100%;object-fit:contain}.screen{position:absolute;left:14.01%;top:16.58%;width:75.66%;aspect-ratio:1;overflow:hidden;border-radius:50%;pointer-events:none;background:#05101d}.screen-layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;object-fit:cover;transition:opacity .44s ease}.screen-layer.visible{opacity:1}.glass-sheen{pointer-events:none;position:absolute;inset:16.58% auto auto 14.01%;width:75.66%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 4px 10px rgba(12,22,31,.16);background:linear-gradient(123deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%)}.scene-indicator{margin:-5px 0 14px;color:rgba(218,229,240,.75);font-size:12px;letter-spacing:.085em;text-transform:uppercase;text-align:center}
.controls{display:flex;flex-direction:column;gap:15px;padding:20px 0}.control-group{min-width:0;border:1px solid var(--panel-border);border-radius:19px;padding:14px 14px 15px;background:var(--panel);box-shadow:0 14px 30px rgba(2,14,28,.12);backdrop-filter:blur(12px)}legend{float:left;padding:0;margin:0 0 12px;width:100%;font-size:14px;font-weight:700;color:#d7e4ef;letter-spacing:.085em}.tiny-icon{display:inline-block;width:23px;font-size:19px;font-weight:400;opacity:.87;vertical-align:-1px}.segments{display:grid;gap:2px;padding:3px;border:1px solid rgba(170,196,214,.30);border-radius:50px;background:rgba(0,14,27,.25);clear:both}.segments-three{grid-template-columns:repeat(3,minmax(0,1fr))}.segments-two{grid-template-columns:repeat(2,minmax(0,1fr))}.segments button{min-width:0;padding:12px 7px;border:0;border-radius:50px;background:transparent;color:#e4edf7;font-size:14px;font-weight:650;white-space:nowrap;transition:background .15s,color .15s,transform .15s}.segments button span[aria-hidden]{font-size:16px;margin-right:4px}.segments button.selected{background:linear-gradient(160deg,#e6ff51,#d1fa03);color:#152331;box-shadow:0 2px 7px rgba(0,0,0,.13)}.segments button:active,.color-choice:active{transform:scale(.97)}.colors{clear:both;display:flex;gap:9px;justify-content:space-between}.color-choice{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;flex:1;padding:10px 7px;border:1px solid rgba(178,206,223,.25);border-radius:30px;background:rgba(0,15,30,.23);color:#eef6fb;font-size:13px;font-weight:600;white-space:nowrap}.color-choice.selected-color{border-color:rgba(211,242,247,.65);background:rgba(24,56,78,.4)}.dot{width:24px;height:24px;min-width:24px;border-radius:50%;border:2px solid rgba(255,255,255,.12)}.dot-green{background:#d8ff16}.dot-orange{background:#ff8c41}.selected-color .dot{outline:2px solid #d6ebfc;outline-offset:3px}.special-wrap{margin:6px 8px 0;display:flex;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid rgba(207,227,243,.17);padding-top:18px}.special-title{font-size:14px;color:#c7d7e5;font-weight:650}.special-title span{color:#e5eb99;font-size:19px;margin-right:5px}.special-button{border:1px solid rgba(194,215,232,.25);border-radius:25px;background:rgba(15,38,58,.68);padding:10px 17px;min-height:42px;color:#d0dce6;font-size:12px;font-weight:650;white-space:nowrap;user-select:none;-webkit-user-select:none;touch-action:none}.special-button span{font-size:15px;margin-right:4px}.special-button.is-held{background:rgba(218,255,27,.22);border-color:rgba(218,255,27,.48);color:#f6ffe5}
.bottom{max-width:900px;margin:0 auto;text-align:center}.store-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:67px;width:100%;border-radius:999px;background:linear-gradient(180deg,#279ffc,#0d6bd4);color:white;border:1px solid #56b7ff;box-shadow:0 13px 25px rgba(0,20,54,.3),inset 0 1px 4px #9ed8ff;font-size:clamp(15px,2.8vw,23px);font-weight:800;letter-spacing:-.01em}.store-button:hover{filter:brightness(1.06)}.store-button:active{transform:translateY(1px)}.benefits{display:grid;grid-template-columns:repeat(4,1fr);margin:28px auto 20px;max-width:790px}.benefit{display:flex;align-items:center;flex-direction:column;gap:6px;min-width:0;min-height:86px;color:var(--lime);text-align:center}.benefit:not(:last-child){border-right:1px solid rgba(203,220,236,.4)}.benefit span{color:#edf5fc;font-size:14px;font-weight:620;line-height:1.15}.tagline{font-size:clamp(20px,3.4vw,32px);font-weight:800;font-style:italic;line-height:1.1;margin:16px auto 8px}.tagline em{color:var(--lime)}.copyright{margin:10px 0 0;font-size:11px;letter-spacing:.12em;color:#b8c7d6}
body[data-scene="day"] .background{filter:blur(10px) brightness(1.28) saturate(.8);opacity:.85}body[data-scene="day"] .atmosphere{background:linear-gradient(180deg,rgba(19,46,78,.12) 0%,rgba(9,44,76,.26) 30%,rgba(5,25,45,.85) 90%)}body[data-scene="night"] .background{filter:blur(10px) brightness(.48) saturate(1.25)}body[data-scene="night"] .atmosphere{background:linear-gradient(180deg,rgba(2,9,30,.27) 0%,rgba(2,10,30,.55) 44%,rgba(2,8,25,.96) 100%)}
@media(max-width:780px){.app{padding:19px 14px 19px}.brand-title{font-size:clamp(44px,10.5vw,68px)}.brand-stripe{width:45%;height:6px;margin:3px auto 12px}.brand-subtitle{font-size:10px;letter-spacing:.21em}.showcase{grid-template-columns:minmax(0,1fr);gap:0;margin-top:6px}.watch{width:min(90vw,365px);max-height:none}.watch-column{margin-top:0}.scene-indicator{margin-top:-9px;margin-bottom:6px}.controls{gap:9px;padding:5px 0 22px;max-width:560px;width:100%;margin:auto}.control-group{padding:10px 12px 12px;border-radius:15px}legend{margin-bottom:7px;font-size:11px}.tiny-icon{font-size:15px;width:19px}.segments button{padding:10px 4px;font-size:13px}.segments button span[aria-hidden]{font-size:14px;margin-right:2px}.color-choice{padding:7px;gap:8px;font-size:12px}.dot{width:19px;height:19px;min-width:19px}.special-wrap{margin:4px 8px 0;padding-top:12px}.special-title{font-size:13px}.special-button{padding:7px 15px;min-height:35px}.store-button{min-height:56px;font-size:clamp(14px,4.2vw,18px);gap:9px}.store-button svg{width:19px;height:19px}.benefits{margin:23px auto 10px}.benefit{min-height:70px}.benefit svg{width:27px;height:27px}.benefit span{font-size:11px}.tagline{margin:8px auto 6px}.copyright{font-size:10px}}
@media(max-width:370px){.app{padding-inline:10px}.watch{width:min(89vw,340px)}.segments button{font-size:12px}.color-choice{font-size:11px}.benefit span{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}