@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,800;0,900;1,900&family=DM+Sans:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{color:#edf1e9;background:#101416;margin:0;font-family:DM Sans,sans-serif}main{grid-template-columns:390px auto;justify-content:center;align-items:center;gap:80px;min-height:100svh;padding:30px;display:grid}.brand{color:#eff4e7;margin-bottom:58px;font-size:34px;font-weight:700;text-decoration:none;display:block}.brand span{color:#d7f98b}.eyebrow{letter-spacing:2px;color:#aab4aa;font-size:10px}h1{letter-spacing:-3px;margin:22px 0;font-size:57px;font-weight:500;line-height:1.08}h1 em{color:#d7f98b;font-family:Georgia,serif;font-weight:400}p{color:#8f9b96;max-width:345px;font-size:13px;line-height:1.8}nav{margin-top:34px}button{cursor:pointer;font:inherit}nav button{color:#8f9b96;text-align:left;background:0 0;border:0;border-top:1px solid #29302e;align-items:center;width:100%;padding:16px 0;font-size:12px;display:flex}nav button span{color:#60706a;width:34px;font-size:10px}nav button small{margin-left:auto;font-size:10px}nav button.active,nav button.active span{color:#d7f98b}.note{color:#c0c9c0;margin-top:32px;font-size:11px}.note i{background:#d7f98b;border-radius:50%;width:5px;height:5px;margin-right:7px;display:inline-block}.note small{color:#738077;margin-top:8px;font-size:10px;display:block}.preview{width:min(43vh,430px)}.stage{aspect-ratio:9/16;border-radius:14px;outline:1px solid #ffffff16;width:100%;position:relative;overflow:hidden;box-shadow:0 25px 100px #0009}canvas{width:100%;height:100%;display:block}#skip{color:#fff;text-shadow:2px 2px #233817;-webkit-text-stroke:1px #294215;background:linear-gradient(#b5e956,#57ae25);border:2px solid #467424;border-radius:14%;width:24%;height:8%;font:900 clamp(24px,4vh,42px)/.9 Barlow Condensed,sans-serif;position:absolute;bottom:2.4%;right:3%;box-shadow:inset 0 2px 1px #e8ffaa,0 3px #193d11}#skip span{margin-top:3px;font-size:50%;display:block}#skip[hidden]{display:none}.transport{align-items:center;gap:10px;margin-top:20px;display:flex}.transport button{color:#dbe6d7;background:0 0;border:1px solid #35403a;border-radius:6px;width:32px;height:30px}.transport input{accent-color:#d7f98b;flex:1;min-width:20px;height:3px}.transport output{color:#9ba89f;white-space:nowrap;font-size:10px}.caption{color:#647169;letter-spacing:.8px;justify-content:space-between;margin-top:14px;font-size:7px;display:flex}button:focus-visible{outline-offset:3px;outline:2px solid #d7f98b}@media (width<=850px){main{grid-template-columns:300px auto;gap:30px;padding:24px}h1{font-size:46px}.preview{width:min(45vw,43vh)}}@media (width<=620px){main{flex-direction:column;gap:24px;padding:18px;display:flex}aside{width:100%;max-width:430px}.brand{margin-bottom:20px}.eyebrow{font-size:8px}h1{margin:14px 0;font-size:36px}h1 br{display:none}p{max-width:none;font-size:12px}nav{gap:8px;margin-top:20px;display:flex}nav button{border:1px solid #29302e;border-radius:5px;justify-content:center;padding:10px;font-size:0}nav button span{width:auto;font-size:12px}nav button small,.note{display:none}.preview{width:min(100%,390px)}.caption{font-size:6px}}