:root { color-scheme: light dark; --bg:#4b5563; --fg:#ffffff; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { background:var(--bg); color:var(--fg); margin:0; min-height:100svh; display:flex; flex-direction:column; }
button,input { font:inherit; color:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; background:transparent; border:1px solid currentColor; border-radius:8px; min-height:44px; padding:.65rem 1rem; }
button:hover { background:color-mix(in srgb,var(--fg) 10%,transparent); }
button:disabled { cursor:wait; opacity:.6; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
main { flex:1; width:min(1100px,100%); padding:clamp(1.5rem,5vh,4rem) 1.5rem 2rem; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.intro { width:100%; }
.title-wrap { position:relative; width:100%; margin:0 auto 2.4rem; }
h1 { font-size:clamp(2.6rem,6vw,4.8rem); line-height:1.12; letter-spacing:-.045em; margin:0 auto; max-width:100%; overflow-wrap:anywhere; font-weight:700; }
#title { display:inline-block; cursor:text; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
#title:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; text-decoration-color:color-mix(in srgb,currentColor 30%,transparent); }
#title:focus { outline:none; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; }
#title::selection { color:var(--bg); background:var(--fg); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
::view-transition-group(root) { animation:none; }
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; height:100%; }
::view-transition-new(root) { clip-path:none; }
::view-transition { pointer-events:none; }
#description { min-height:7em; display:grid; align-items:center; max-width:760px; margin:0 auto 2.6rem; font-weight:350; font-size:clamp(1rem,2vw,1.22rem); line-height:1.65; }
#description p { margin:.65rem 0; }
.reveal-sheen #title, .reveal-sheen #story {
  background-image:linear-gradient(110deg,var(--fg) 42%,color-mix(in srgb,var(--fg) 55%,var(--bg)) 50%,var(--fg) 58%);
  background-size:300% 100%; background-position:-20% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tools { width:100%; display:grid; grid-template-columns:1fr 1.25fr 1.4fr .85fr; gap:1rem; text-align:left; }
.code-form,.picker-field { min-width:0; border:1.5px solid currentColor; border-radius:8px; padding:1rem .85rem .65rem; position:relative; }
.code-form>label,.picker-field>label { position:absolute; top:-.65rem; left:.6rem; background:var(--bg); padding:0 .4rem; font-size:.8rem; font-weight:600; }
.code-form input { width:100%; padding:.2rem 0 .6rem; background:transparent; border:0; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.91rem; border-radius:2px; min-height:40px; }
.field-actions { display:flex; justify-content:space-between; gap:.3rem; border-top:1px solid color-mix(in srgb,var(--fg) 30%,transparent); }
.field-actions button { padding:.4rem 0; border:0; border-radius:3px; font-size:.7rem; min-height:36px; }
#colorPicker { width:100%; height:46px; padding:0; background:transparent; border:0; cursor:pointer; }
#colorPicker::-webkit-color-swatch-wrapper { padding:0; }
#colorPicker::-webkit-color-swatch { border:1px solid currentColor; border-radius:3px; }
#colorPicker::-moz-color-swatch { border:1px solid currentColor; border-radius:3px; }
.picker-field span { display:block; font-size:.7rem; padding-top:.75rem; }
#error { width:min(640px,100%); font-size:.8rem; line-height:1.5; margin:1.5rem 0 0; }
@media(max-width:760px) { .tools { grid-template-columns:1fr 1fr; gap:1.5rem 1rem; } }
@media(max-width:420px) { main { padding:2rem 1rem 1rem; } .tools { gap:1.4rem .75rem; } .code-form,.picker-field { padding:.9rem .6rem .5rem; } .code-form input { font-size:.8rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }