:root{--bg:#333;--fg:#f4f4f4;--muted:#bcbcbc;--card:#222;--card-fg:#f4f4f4;--border:#f4f4f4;--accent:#dd8800;--swatch-default:#f8f8e8;--shadow:rgba(0,0,0,.7);--link:#fff;--link-hover:#dd8800}:root[data-theme=light]{--bg:#ddd;--fg:#333;--muted:#555;--card:#f8f8e8;--card-fg:#333;--border:#333;--accent:#dd8800;--swatch-default:#f8f8e8;--shadow:rgba(0,0,0,.25);--link:#333;--link-hover:#dd8800}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);transition:background .3s,color .3s;display:flex;flex-direction:column}:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}.sr,.theme-toggle input[type=radio]{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;left:-100vh;opacity:0}.skip-link{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--card-fg);padding:.5rem 1rem;z-index:100}.skip-link:focus{left:0}.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;flex-wrap:wrap}.brand{font-weight:800;font-size:1.25rem;letter-spacing:.5px;text-decoration:none;color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.brand-r{color:#e44}.brand-g{color:#4c4}.brand-b{color:#48f}.lang-nav ul{display:flex;flex-wrap:wrap;gap:.25rem .75rem;list-style:none;margin:0;padding:0;font-size:.92rem}.lang-nav a{color:var(--link);text-decoration:none;opacity:.7}.lang-nav a:hover,.lang-nav a:focus{color:var(--link-hover);opacity:1}.lang-nav .current a{opacity:1;font-weight:700;text-decoration:underline}main{flex:1;padding:1rem 1.5rem 3rem;display:flex;flex-direction:column;align-items:center;gap:3rem}.app{position:relative;width:100%;max-width:26rem;margin:4rem auto 0;padding:4rem 1rem;border:2px solid var(--border);background:var(--card);color:var(--card-fg);box-shadow:.5rem .5rem 0 var(--shadow);transition:background .3s,color .3s,box-shadow .3s,border-color .15s}.app *{color:inherit}.app h1{font-size:1.6rem;margin:0 0 .5rem;line-height:1.2}.app .tagline{margin:0 0 1rem;color:var(--muted);font-size:.95rem}.swatch-wrap{position:relative}.swatch{width:8rem;height:8rem;border-radius:50%;border:2px solid var(--border);position:absolute;top:-8rem;left:calc(50% - 4rem);background-color:var(--swatch-default);transition:background-color .2s,border-color .15s}.theme-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.5rem 0 0;position:relative;z-index:2}.theme-toggle input[type=radio]+label{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid var(--border);background:#f8f8e8;display:block;position:relative;cursor:pointer}.theme-toggle input[type=radio]+label[for=t-dark]{background:#333}.theme-toggle input[type=radio]:checked+label::after{content:"";position:absolute;left:-6px;top:-6px;width:calc(1.25rem + 8px);height:calc(1.25rem + 8px);border:2px solid var(--border);border-radius:50%}.app-form{margin:0 auto}.app-form .group{margin-top:2.5rem;text-align:left}.app-form label{display:block;font-weight:700;margin:.25em 0}.app-form input,.app-form button{font:1rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:.6em .75em;border-radius:.25em;border:2px solid var(--border);background:0 0;color:inherit}.app-form input{display:block;width:100%}.app-form input:disabled{opacity:.6}.app-form #result{border:none;border-bottom:2px solid var(--border);border-radius:0;padding-left:0}.app-form button{padding:.6em 1.25em;font-weight:700;cursor:pointer;background:0 0}.app-form button:disabled{opacity:.4;cursor:not-allowed}.app-form .flex{display:flex;align-items:stretch;flex-wrap:wrap;gap:.75rem}@media(min-width:440px){.app-form .flex{flex-wrap:nowrap}}.meta{padding:0;margin:1.5rem 0 0;list-style:none}.meta li+li{margin-top:.25rem}.intro{max-width:42rem;width:100%;line-height:1.6}.intro h2{font-size:1.4rem;margin:0 0 .75rem}.intro h3{font-size:1.1rem;margin:1.25rem 0 .5rem}.intro p{margin:0 0 1rem}.intro ul{padding-left:1.25rem;margin:0}.intro li{margin-bottom:.25rem}.intro strong{font-weight:700}.site-footer{text-align:center;padding:1rem;font-size:.85rem;color:var(--muted)}.site-footer p{margin:0}@media(min-width:440px){.app{padding:4rem 3rem}}@media(min-width:768px){.app{display:grid;grid-template-columns:auto 1fr;gap:3rem;max-width:768px;align-items:center;padding:3rem}.swatch{position:relative;left:auto;top:auto;width:12rem;height:12rem}.app-form{padding-left:3rem;border-left:2px dashed var(--border)}.app-form .group:first-of-type,.app h1{margin-top:0}}