:root{--ink:#071427;--blue:#1b6bff;--sky:#72c4ff;--white:#f4f7fb;--orange:#ff6b42}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#121722;color:var(--white);font-family:'Work Sans',Arial,sans-serif;display:flex;align-items:center;justify-content:center}#frame{position:relative;width:1080px;height:1920px;flex:none;overflow:hidden;background:var(--ink);transform-origin:center center;isolation:isolate}#field{position:absolute;inset:0;background:radial-gradient(ellipse 750px 870px at 50% 55%,#12376b 0%,#0c244b 51%,#071427 100%)}#halo{position:absolute;width:1020px;height:1020px;left:30px;top:520px;border-radius:50%;background:radial-gradient(circle,#2678ef49 0%,#2678ef1f 42%,transparent 69%);filter:blur(12px)}.grid-line{position:absolute;top:0;bottom:0;width:1px;background:#bad9ff12}.grid-line-a{left:80px}.grid-line-b{right:80px}#corner-label{position:absolute;left:84px;top:74px;font-size:27px;font-weight:700;letter-spacing:-1.5px}#corner-label span{font-size:18px;letter-spacing:2.2px;font-weight:600;margin-left:13px;color:#b8cae3}#edition{position:absolute;right:84px;top:82px;font:500 18px 'DM Mono',monospace;color:#aec3df;letter-spacing:1.5px}#ring-layer,#environment{position:absolute;inset:0;pointer-events:none}.ring{position:absolute;left:540px;top:1060px;width:500px;height:500px;margin-left:-250px;margin-top:-250px;border:4px solid #8fcfff;border-radius:50%;box-shadow:0 0 26px #2e80ff33;transform-origin:center center}.ring.orange-ring{border-color:var(--orange)}#ground{position:absolute;left:240px;top:1510px;width:600px;height:100px;border-radius:50%;background:#010919a6;filter:blur(35px)}#speaker{position:absolute;width:1060px;height:1060px;left:10px;top:550px;object-fit:contain;filter:drop-shadow(22px 40px 30px #0009);transform-origin:50% 50%;will-change:transform}#play{position:absolute;left:756px;top:665px;width:166px;height:166px;border-radius:50%;background:var(--orange);display:grid;place-items:center;box-shadow:0 20px 0 #ba452a,0 31px 40px #0006;will-change:transform,opacity}.triangle{display:block;width:0;height:0;border-top:28px solid transparent;border-bottom:28px solid transparent;border-left:43px solid #fff;margin-left:9px}#equalizer{position:absolute;left:80px;bottom:210px;width:192px;height:62px;display:flex;align-items:end;gap:10px}.eq-bar{width:10px;border-radius:8px;background:var(--sky);transform-origin:bottom}.eq-bar:nth-child(3n){background:var(--orange)}.headline{position:absolute;top:194px;left:80px;width:920px;pointer-events:none;visibility:hidden}.eyebrow{height:51px;color:#9bbde8;font:500 21px 'DM Mono',monospace;letter-spacing:2.3px;display:flex;align-items:start;gap:25px}.eyebrow i{width:88px;height:2px;background:var(--orange);margin-top:11px}.line{height:145px;overflow:hidden;font-weight:700;font-size:118px;line-height:1.08;letter-spacing:-.035em;white-space:nowrap}.line span{display:inline-block;will-change:transform}.orange{color:var(--orange)}#headline-c .line{font-size:128px}#headline-d .line{font-size:143px}#headline-d{top:187px}#headline-e .line{font-size:116px}.proof{margin-top:13px;font-size:40px;letter-spacing:1px;font-weight:600;display:flex;align-items:center;gap:17px}.proof strong{color:var(--orange);font-size:49px;font-weight:700}.proof-stroke{width:115px;height:3px;background:var(--orange);margin-left:9px}.drop{position:absolute;width:36px;height:55px;background:#78caff;border:3px solid #d5f0ff;border-radius:55% 55% 62% 62%;clip-path:polygon(50% 0,90% 46%,100% 70%,85% 95%,50% 100%,15% 95%,0 70%,10% 46%);box-shadow:0 0 28px #72c4ff88}.drop.small{width:24px;height:38px}.dust{position:absolute;width:17px;height:17px;border:3px solid #f8d4a3;transform:rotate(20deg);box-shadow:0 0 14px #ffa55a66}.dust.round{border-radius:50%}.sweep{position:absolute;left:-200px;top:1060px;width:1480px;height:6px;background:linear-gradient(90deg,transparent,#80d2ff,#e1f6ff,#80d2ff,transparent);box-shadow:0 0 28px #7dd4ff;transform-origin:center;opacity:0}#environment-label{position:absolute;right:82px;bottom:335px;color:#ddf0ff;display:flex;align-items:center;gap:18px;font:600 20px 'DM Mono',monospace;letter-spacing:2px;visibility:hidden}#environment-label b{width:38px;height:2px;background:var(--orange)}#qualifier{position:absolute;left:82px;bottom:254px;color:#c7d9f0;font:500 23px 'Work Sans',Arial,sans-serif;letter-spacing:.2px;visibility:hidden}#bottom-rule{position:absolute;left:80px;right:80px;bottom:160px;height:2px;background:#8aadd555}#baseline-left,#baseline-right{position:absolute;bottom:100px;color:#a4b9d6;font:500 17px 'DM Mono',monospace;letter-spacing:1.4px}#baseline-left{left:82px}#baseline-right{right:82px}#cta{position:absolute;left:80px;right:80px;bottom:253px;height:100px;padding:0 34px;background:var(--orange);color:#071427;border-radius:4px;display:flex;align-items:center;justify-content:space-between;font-size:34px;letter-spacing:.1px;font-weight:700;visibility:hidden;box-shadow:0 20px 40px #0004}.cta-arrow{font-size:56px;font-weight:400;line-height:1}#preview-controls{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#e8ecf1;color:#152032;border-radius:10px;padding:9px 14px;display:flex;gap:12px;align-items:center;z-index:100;font:14px Arial}#preview-controls button{border:0;background:#19345f;color:#fff;padding:8px 14px;border-radius:5px;cursor:pointer}#preview-controls input{width:220px}body.render{display:block;background:var(--ink)}body.render #frame{transform:none!important}body.render #preview-controls{display:none}

/* Original tutorial type family/weight/tracking; product palette retained. */
:root{--sans:"Work Sans","Noto Sans",Helvetica,Arial,sans-serif;--mono:"DM Mono",Menlo,monospace}
#frame{font-family:var(--sans);font-synthesis:none}.grid-line,#bottom-rule,.eyebrow i,.proof-stroke,#environment-label b{display:none}.line{font-weight:700}.eyebrow{font-weight:500}