:root{--scr-rd:#d2342a;--scr-ink:#1e1e1e}.scr-page,.scr-hub{max-width:none;margin:0;padding:0}.scr-hero,.scr-hub-hero{text-align:center;padding:22px 0 10px}.scr-kicker{color:var(--scr-rd);letter-spacing:.12em;text-transform:uppercase;font-family:"Baloo 2",sans-serif;font-size:13px;font-weight:700}.scr-hero h1,.scr-hub-hero h1{margin:8px 0 12px;font-family:"Baloo 2",sans-serif;font-size:clamp(28px,5vw,44px);font-weight:800;line-height:1.05}.scr-intro,.scr-hub-lede{color:#444;max-width:68ch;margin:0 auto 6px;font-size:16.5px;line-height:1.6}.scr-hub-lede{max-width:60ch}#scr-tool,#dpt-tool{max-width:900px;margin:24px auto 8px}#scr-stage,#dpt-stage{aspect-ratio:16/9;border:2px solid var(--scr-ink);cursor:pointer;border-radius:14px;width:100%;transition:background .1s linear}:-webkit-any(#scr-stage:fullscreen,#scr-stage:-webkit-full-screen,#dpt-stage:fullscreen,#dpt-stage:-webkit-full-screen){aspect-ratio:auto;border:none;border-radius:0}:is(#scr-stage:fullscreen,#scr-stage:fullscreen,#dpt-stage:fullscreen,#dpt-stage:fullscreen){aspect-ratio:auto;border:none;border-radius:0}.scr-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin:16px 0 6px;display:flex}.scr-swatches{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.scr-swatch{border:2px solid var(--scr-ink);border-radius:50%;width:26px;height:26px;display:block}.scr-swatch.on{outline:2px solid var(--scr-rd);outline-offset:2px}.scr-custom{color:#444;align-items:center;gap:8px;font-size:13.5px;display:flex}.scr-custom label{font-weight:600}.scr-custom input[type=color]{border:2px solid var(--scr-ink);cursor:pointer;background:0 0;border-radius:8px;width:34px;height:34px;padding:0}.scr-custom #scr-hex-code{min-width:7ch;font-family:SFMono-Regular,Consolas,monospace;font-weight:600}.scr-fs-btn{border:2px solid var(--scr-ink);background:var(--scr-rd);color:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--scr-ink);border-radius:999px;padding:10px 22px;font-family:"Baloo 2",sans-serif;font-size:15px;font-weight:800;transition:transform .12s,box-shadow .12s}.scr-fs-btn:hover{box-shadow:4px 4px 0 var(--scr-ink);transform:translate(-1px,-1px)}.scr-controls-2{margin-top:4px}.scr-slider-group,.scr-download-group{color:#444;align-items:center;gap:8px;font-size:13.5px;display:flex}.scr-slider-group label,.scr-download-group label{font-weight:600}.scr-slider-group input[type=range]{width:120px;accent-color:var(--scr-rd)}#scr-brightness-val{min-width:4.5ch;font-family:SFMono-Regular,Consolas,monospace;font-weight:600}.scr-download-group select{border:2px solid var(--scr-ink);background:#fff;border-radius:8px;padding:6px 8px;font-family:inherit;font-size:13px}.scr-dl-btn{border:2px solid var(--scr-ink);color:var(--scr-ink);cursor:pointer;box-shadow:2px 2px 0 var(--scr-ink);background:#fff;border-radius:8px;padding:7px 14px;font-family:"Baloo 2",sans-serif;font-size:13px;font-weight:700;transition:transform .12s,box-shadow .12s}.scr-dl-btn:hover{box-shadow:3px 3px 0 var(--scr-ink);background:var(--scr-ink);color:#fff;transform:translate(-1px,-1px)}.scr-hint{text-align:center;color:#888;margin:4px 0 0;font-size:13px}.scr-hint kbd{background:#f0f0f0;border:1px solid #ccc;border-radius:4px;padding:1px 6px;font-family:SFMono-Regular,Consolas,monospace;font-size:12px}.scr-body{max-width:none;margin:40px 0}.scr-body h2{margin:28px 0 10px;font-family:"Baloo 2",sans-serif;font-size:22px;font-weight:800}.scr-body h3{margin:18px 0 4px;font-family:"Baloo 2",sans-serif;font-size:16.5px;font-weight:700}.scr-faq details{border:2px solid var(--scr-ink);background:#fff;border-radius:12px;margin:0 0 10px;padding:4px 16px}.scr-faq summary{cursor:pointer;padding:11px 0;font-family:"Baloo 2",sans-serif;font-size:15.5px;font-weight:700;list-style:none}.scr-faq summary::-webkit-details-marker{display:none}.scr-faq summary:after{content:"+";float:right;color:var(--scr-rd);font-size:20px;line-height:1}.scr-faq details[open] summary:after{content:"–"}.scr-faq p{color:#555;margin:0 0 11px;font-size:14.5px}.scr-uses-list{gap:8px;margin:0 0 12px;padding:0;list-style:none;display:grid}.scr-uses-list li{color:#333;padding-left:18px;font-size:15px;line-height:1.5;position:relative}.scr-uses-list li:before{content:"—";color:var(--scr-rd);position:absolute;left:0}.scr-uses-list strong{font-weight:700}.post-share{margin:24px 0}.scr-related-grid,.scr-hub-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:14px 0;display:grid}.scr-hub-grid{max-width:none;margin:28px 0}.scr-related-card,.scr-hub-card{color:inherit;border:2px solid var(--scr-ink);box-shadow:2px 2px 0 var(--scr-ink);background:#fff;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.scr-related-card:hover,.scr-hub-card:hover{box-shadow:4px 4px 0 var(--scr-rd);transform:translate(-1px,-1px)}.scr-related-swatch,.scr-hub-swatch{border:2px solid var(--scr-ink);border-radius:50%;flex:none;width:40px;height:40px}.scr-related-swatch-pixel{background:conic-gradient(red 0 20%, #0f0 20% 40%, #00f 40% 60%, #fff 60% 80%, #000 80% 100%)}.scr-hub-card-body{flex-direction:column;display:flex}.scr-hub-card-body strong{font-family:"Baloo 2",sans-serif;font-size:15px;font-weight:800}.scr-hub-card-body small{color:#777;font-size:12px}@media (width<=640px){#scr-tool{margin:16px auto 4px}.scr-controls,.scr-controls-2{gap:10px}}[data-theme=dark] .scr-faq details,[data-theme=dark] .scr-related-card,[data-theme=dark] .scr-hub-card,[data-theme=dark] .scr-download-group select,[data-theme=dark] .scr-dl-btn{color:#f2f0ed;background:#1e1e1e;border-color:#2f2e2b}[data-theme=dark] .scr-dl-btn:hover{color:#141414;background:#f2f0ed}[data-theme=dark] .scr-faq summary{color:#f2f0ed}[data-theme=dark] .scr-faq p,[data-theme=dark] .scr-hub-card-body small{color:#b8b2a8}[data-theme=dark] .scr-hint kbd{color:#d8d3c9;background:#2a2a28;border-color:#3a3a37}