:root { --pine:#102b29; --pine-light:#22433e; --paper:#fbf4e4; --cream:#e4d5b2; --gold:#efc983; --gold2:#b88b4a; --white:#fff9eb; --red:#bd3d36; }
* { box-sizing:border-box; }
html { min-height:100%; background:#071a19; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:var(--white); background:radial-gradient(ellipse at top,#2b4a41 0%,#102b29 45%,#081d1d 100%); min-height:100vh; min-height:100svh; }
button { font-family:inherit; }
.app-shell { position:relative; width:min(100%,500px); min-height:100vh; min-height:100svh; margin:0 auto; overflow:hidden; box-shadow:0 0 85px #00100e77; padding-bottom:env(safe-area-inset-bottom, 0); }
.app-shell::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 35% 11%,#ffe0a00d 0%,transparent 35%), radial-gradient(circle at 92% 74%,#ffeeaa0b 0%,transparent 38%); pointer-events:none; }
.twinkle { position:absolute; font-size:17px; color:var(--gold); z-index:2; pointer-events:none; opacity:.75; }
.twinkle-1{top:29px;left:9%}.twinkle-2{top:80px;right:6%;font-size:14px}.twinkle-3{top:390px;left:5%;font-size:14px}
.screen { position:relative; z-index:1; padding-bottom:24px; }
.is-hidden{display:none!important;}
.eyebrow { text-align:center; display:block; font-size:9.5px; font-weight:800; letter-spacing:2px; color:#edcf99; padding:18px 0 15px; white-space:nowrap; }
.sparkle-icon{font-size:13px;padding:0 6px;}
.hero{ height: min(104vw,490px); max-height:490px; min-height:330px; position:relative; overflow:hidden; margin:0 18px; border-radius:190px 190px 12px 12px; border:1px solid #c7a46b83; background:#0c201e; box-shadow:0 16px 36px #0006; }
.hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 37%;}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(to bottom, #0000 20%,#0e24222a 42%,#0a1c1beb 90%,#071a1b 100%),linear-gradient(to top,#071b1a20,transparent 47%);}
.hero-copy{position:absolute;bottom:19px;left:14px;right:14px;text-align:center;text-shadow:0 2px 12px #0008;}
.hero-label{font-size:8.5px;letter-spacing:1.8px;color:#ffe1a9;font-weight:700;margin-bottom:8px;}
.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(29px,8.3vw,44px);font-weight:500;line-height:1.06;margin:0;color:#fff5dc;letter-spacing:-.4px;}
.hero-copy h1 em{font-style:normal;color:#fbd48a;}
.hero-copy p{font-size:12px;line-height:1.45;color:#f1e5cf;max-width:270px;margin:11px auto 0;}
.choose{padding:10px 24px 0;text-align:center;}
.separator{display:flex;align-items:center;gap:14px;justify-content:center;margin:0 auto 9px;color:var(--gold);font-size:19px;width:70%;}
.separator span{width:70px;height:1px;background:linear-gradient(to right,transparent,#c9a36a99);}
.separator span:last-child{transform:rotate(180deg)}
.choose h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(24px,6.1vw,30px);line-height:1.12;margin:0 auto 9px;max-width:380px;}
.choose-subtitle{font-size:12.5px;color:#d6cab2;line-height:1.5;margin:0 auto 20px;max-width:340px;}
.options{display:flex;flex-direction:column;gap:11px;text-align:left;}
.choice{appearance:none;width:100%;padding:14px 15px 14px 14px;display:flex;gap:14px;align-items:center;text-align:left;border:1px solid #e7c58066;background:linear-gradient(110deg,#ffffff10,#fff5da07);border-radius:15px;color:#fff4de;cursor:pointer;min-height:76px;box-shadow:0 3px 12px #0002;transition:background .16s, transform .16s,border-color .16s;}
.choice:hover,.choice:focus-visible{border-color:#f3d193; background:linear-gradient(110deg,#fff5dc20,#fff5da0a);transform:translateY(-1px);outline:none;}
.choice-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#e1b66d22;color:#edc681;font-size:28px;flex:0 0 43px;border:1px solid #d0a96e37;}
.choice-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.choice-text strong{font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.06;font-weight:400;}
.choice-text small{font-size:11px;color:#d5c4a8;line-height:1.35;}
.choice-arrow{color:#f1d9a7;font-size:27px;padding-right:2px;}
.footnote{color:#bda77f;text-align:center;letter-spacing:.1px;font-size:11px;padding:24px 0 0;}
.footnote span{padding:0 8px;color:#d3b16f;}
.back-button{margin:19px 20px 0;display:inline-flex;gap:12px;align-items:center;padding:9px 0;border:0;background:none;color:#eed5a5;cursor:pointer;font-size:14px;}
.video-header{text-align:center;padding:8px 24px 19px;}
.video-header .eyebrow{padding:8px 0 11px;}
.video-header h1{font-family:Georgia,serif;font-weight:normal;font-size:32px;line-height:1.09;margin:0;}
.video-header p{font-size:13px;color:#d8c7a7;margin-top:12px;}
.player-wrap{position:relative;max-width:350px;margin:0 auto;aspect-ratio:9/16;border:1px solid #d2aa6f99;border-radius:19px;overflow:hidden;background:linear-gradient(#122a28,#0e2221);box-shadow:0 15px 55px #0008;}
.video-player{width:100%;height:100%;object-fit:cover;background:#081c1a;display:none;}
.video-player.is-visible{display:block;}
.media-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:34px 25px;text-align:center;background:linear-gradient(#06201d77,#071d1cf2),url('./assets/ded-moroz.webp') center 42%/cover;}
.media-placeholder[hidden]{display:none;}
.placeholder-snow{font-size:39px;color:#f7dbab;text-shadow:0 0 13px #e5b87f;}
.media-placeholder h2{font-family:Georgia,serif;font-size:28px;font-weight:400;line-height:1.15;margin:18px 0 8px;}
.media-placeholder p{font-size:13px;color:#eadbc0;line-height:1.55;margin:0 0 22px;}
.sample-btn{border:1px solid #efcf91;color:#172c29;background:#edd09b;border-radius:12px;font-size:13px;font-weight:700;min-height:42px;padding:11px 16px;cursor:pointer;}
.demo-label{font-size:12px;color:#edc682;text-align:center;margin:12px auto 0;}
.video-tools{max-width:350px;margin:19px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.secondary-btn{border:1px solid #e1bc8170;background:#ffffff0c;border-radius:12px;color:#f3e2c2;min-height:45px;font-size:12px;cursor:pointer;padding:8px;}
.secondary-btn:focus-visible{outline:2px solid #edd09b;outline-offset:2px;}
.quiet{text-align:center;font-family:Georgia,serif;color:#dbbd82;font-size:15px;margin:26px 0;}
@media(max-width:340px){.eyebrow{font-size:8px;letter-spacing:1.3px}.hero{min-height:300px}.choice-text strong{font-size:18px}.choose h2{font-size:23px}.choice{gap:9px}.choice-icon{width:37px;flex-basis:37px;height:37px}}
@media(min-width:501px){body{padding:28px 0}.app-shell{border:1px solid #d5ae7744;border-radius:22px;min-height:calc(100vh - 56px)}.hero{height:460px}}
@media(prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important}}
