.creative-starter{--reel-height:120px;--bg:var(--color-surface);--panel:var(--color-panel);--raised:var(--color-panel-high);--border:var(--color-border);--text:var(--color-text);--muted:var(--color-muted);& .tool-heading{min-width:0}& h1{letter-spacing:-.055em;align-items:center;gap:12px;margin:12px 0;font-size:clamp(2rem,3.8vw,3.4rem);font-weight:600;line-height:1.05;display:flex}& .tool-mark{letter-spacing:0;flex-shrink:0;font-family:Inter,Arial,sans-serif;font-size:1.15em;line-height:1}& .tool-heading p{color:var(--muted);margin:0;font-size:14px;line-height:1.5}& .back-link{color:var(--muted);font-size:13px;text-decoration:none}& .back-link:hover{color:var(--text)}& .roll-controls{max-width:100%}& #lock-count{text-align:center;max-width:24rem;line-height:1.5}& *{box-sizing:border-box}& button,& a{-webkit-tap-highlight-color:transparent}& button{font:inherit;cursor:pointer}& button:disabled{cursor:default}& button:focus-visible,& a:focus-visible{outline-offset:5px;outline:2px solid #fff}& ::selection{color:#000;background:#fff}&{max-width:1500px;margin:auto;padding:0 5% 32px}& .intro{justify-content:space-between;align-items:center;gap:32px;padding:32px 0;display:flex}& .roll-controls{flex-direction:column;flex-shrink:0;align-items:center;gap:14px;display:flex}& .primary{color:#050505;background:#fff;border:1px solid #fff;border-radius:3px;align-items:center;gap:12px;min-height:60px;padding:17px 21px;font-weight:600;transition:background .2s,transform .2s;display:flex}& .primary:hover:not(:disabled){background:#d8d8d8;transform:translateY(-2px)}& .primary:active:not(:disabled){transform:translateY(0)}& .primary:disabled{background:#b3b3b3;border-color:#b3b3b3}& .roll-symbol{font-size:28px;line-height:1}& kbd{border:1px solid #b0b0b0;border-radius:2px;margin-left:12px;padding:4px 6px;font:11px Inter,sans-serif}& .roll-controls>span{color:var(--muted);font-size:12px}& .workspace{grid-template-columns:minmax(0,1fr) 340px;gap:28px;display:grid}& .section-heading{border-bottom:1px solid var(--border);letter-spacing:.09em;justify-content:space-between;align-items:center;gap:12px;height:51px;font-size:12px;display:flex}& .section-heading button{color:var(--muted);letter-spacing:0;background:0 0;border:0;padding:10px 0;font-size:14px}& .section-heading button:hover:not(:disabled){color:#fff}& .section-heading button:disabled{opacity:.35}& .section-heading button span{margin-left:8px}& .reel{min-height:calc(var(--reel-height) + 1px);border-bottom:1px solid var(--border);grid-template-columns:130px minmax(0,1fr) 96px;align-items:center;gap:18px;padding-right:10px;transition:background .2s;display:grid;position:relative}& .reel.locked{background:var(--raised)}& .reel-label{color:var(--muted);align-items:center;gap:16px;padding-left:2px;font-size:14px;display:flex}& .reel-label span:first-child{color:#777;font-variant-numeric:tabular-nums;font-size:12px}& .reel.locked .reel-label{padding-left:12px}& .reel-window{height:var(--reel-height);position:relative;overflow:hidden;mask-image:none}& .reel-track{position:relative;top:0}& .reel-value{height:var(--reel-height);letter-spacing:-.04em;overflow-wrap:anywhere;align-items:center;font-family:TikTok Sans,Inter,sans-serif;font-size:clamp(22px,2vw,30px);font-weight:500;line-height:1.07;display:flex}& .lock{border:1px solid var(--border);width:44px;height:44px;color:var(--muted);background:0 0;border-radius:3px;place-items:center;transition:background .15s,color .15s;display:grid}& .lock:hover{color:#fff;background:var(--raised);border-color:#777}& .lock[aria-pressed=true]{color:#050505;background:#fff;border-color:#fff}& .lock:disabled{opacity:.4}& .lock svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}& .brief-panel{background:var(--panel);border:1px solid var(--border);border-radius:3px;flex-direction:column;padding:0 25px 24px;display:flex}& .brief-content{flex:1;padding:19px 0 25px}& .brief-asterisk{margin-bottom:28px;font-size:66px;line-height:1;display:block}& #brief{letter-spacing:-.035em;color:var(--muted);margin:0;font-family:TikTok Sans,Inter,sans-serif;font-size:27px;line-height:1.28}& #brief strong{color:var(--text);font-weight:500}& #brief .direction{letter-spacing:-.02em;margin-top:20px;font-family:Inter,sans-serif;font-size:15px;line-height:1.6;display:block}& .copy-button{color:#fff;text-align:left;background:0 0;border:1px solid #454545;border-radius:2px;justify-content:space-between;min-height:46px;padding:13px 15px;font-size:14px;display:flex}& .copy-button:hover{background:var(--raised);border-color:#888}& .copy-button:disabled{opacity:.4}& .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}&.rolling .roll-symbol{animation:.8s linear infinite creative-starter-turn}& .reel-actions{align-items:center;gap:8px;display:flex}& .exclude{width:44px;height:44px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:3px;font-size:24px;line-height:1}& .exclude:hover{color:#fff;border-color:var(--border);background:var(--raised)}& .exclude:disabled{opacity:.4}& .excluded .reel-window,& .excluded .lock{visibility:hidden}& .excluded .exclude{border-color:var(--border)}&.rolling .reel:not(.locked) .reel-window{mask-image:linear-gradient(#0000,#000 20% 80%,#0000)}@media (width<=1100px){--reel-height:176px;& .workspace{grid-template-columns:minmax(0,1fr) 290px;gap:22px}& .reel{grid-template-columns:110px minmax(0,1fr) 96px;gap:12px}& .reel-label{gap:10px}& .brief-panel{padding-inline:20px}& #brief{font-size:25px}}@media (width<=800px){& .intro{flex-direction:column;align-items:stretch;padding:24px 0}& .roll-controls{align-items:flex-start;width:100%}& .primary{justify-content:center;width:100%}& .workspace{grid-template-columns:1fr;gap:28px}& .reel-value{font-size:28px}& .brief-content{padding-top:10px}& .brief-asterisk{margin-bottom:20px;font-size:44px}& .brief-panel{padding-bottom:20px}& #brief{font-size:29px}& .roll-controls>span{align-self:center}}@media (width<=600px){--reel-height:160px;& .reel{grid-template-columns:minmax(0,1fr) 88px;gap:0 12px;padding-right:0}& .lock,& .exclude{width:40px}& .reel-label{grid-area:1/1;padding-top:16px;font-size:13px}& .reel-label span:first-child{display:none}& .reel-window{grid-area:2/1}& .reel-actions{grid-area:1/2/span 2}& .reel-value{font-size:20px;line-height:1.2}}@media (width<=450px){padding:0 16px 24px}@media (prefers-reduced-motion:reduce){& *,& :before,& :after{transition:none!important;animation:none!important}}}@keyframes creative-starter-turn{to{transform:rotate(360deg)}}