*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--ui-bg: #000;--ui-surface: #121214;--ui-line: #232427;--ui-text: #f0f0f0;--ui-muted: #9c9ea4;--ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background-color:var(--ui-bg);color:var(--ui-text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:82rem;margin:0 auto;padding:1.5rem 1.5rem 3rem}.topbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;padding:.5rem 0 1.5rem}.topbar h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}.topbar p{color:var(--ui-muted);font-size:.875rem;max-width:34rem}.presets{display:flex;gap:.375rem}.preset-button{border:1px solid var(--ui-line);background:transparent;color:var(--ui-muted);font:inherit;font-size:.8125rem;font-weight:500;padding:.375rem .875rem;border-radius:9999px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.preset-button:hover{color:var(--ui-text);border-color:var(--ui-muted);background:#ffffff0a}.layout{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:1.25rem;align-items:start}.controls{display:grid;gap:1.25rem;border:1px solid var(--ui-line);border-radius:1rem;background:var(--ui-surface);padding:1.25rem}.controls h2,.export h2{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ui-muted);margin-bottom:.75rem}.field{display:block;margin-bottom:.625rem}.field:last-child{margin-bottom:0}.field__label{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:var(--ui-text);margin-bottom:.25rem}.field__label code,.field__control code{font-family:var(--ui-mono);font-size:.75rem;color:var(--ui-muted)}.field__control{display:flex;align-items:center;gap:.625rem}.field input[type=color]{width:2.25rem;height:1.5rem;padding:0;border:1px solid var(--ui-line);border-radius:.375rem;background:transparent;cursor:pointer}.field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.field input[type=color]::-webkit-color-swatch{border:none;border-radius:.25rem}.field input[type=range]{width:100%;accent-color:#d7d7d7;cursor:pointer}.contrast{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.75rem;padding:.375rem 0;border-bottom:1px solid var(--ui-line)}.contrast:last-child{border-bottom:none}.contrast__label{color:var(--ui-muted)}.contrast__value{font-family:var(--ui-mono);white-space:nowrap}.contrast__value strong{font-weight:600;margin-left:.25rem}.contrast--good .contrast__value strong{color:#7ee2a8}.contrast--warn .contrast__value strong{color:#e2c97e}.contrast--bad .contrast__value strong{color:#e28c7e}.stage{display:grid;gap:1.25rem;min-width:0}.preview{background:var(--dt-bg);color:var(--dt-text);border:1px solid var(--ui-line);border-radius:1rem;padding:calc(var(--dt-space) * 1.5);font-size:var(--dt-fs-body);transition:background-color .15s ease,color .15s ease;overflow:hidden}.pv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--dt-space);padding-bottom:var(--dt-space);border-bottom:var(--dt-border-w) solid color-mix(in srgb,var(--dt-text) 14%,transparent)}.pv-brand{display:inline-flex;align-items:center;gap:.5em;font-weight:650;font-size:var(--dt-fs-body);letter-spacing:-.01em}.pv-brand__dot{width:.625em;height:.625em;border-radius:50%;background:var(--dt-accent)}.pv-nav{display:flex;gap:calc(var(--dt-space) * .9);font-size:var(--dt-fs-sm);color:var(--dt-muted)}.pv-hero{padding:calc(var(--dt-space) * 1.6) 0;max-width:34em}.pv-h1{font-size:var(--dt-fs-h1);line-height:1.1;letter-spacing:-.02em;font-weight:650}.pv-lead{margin-top:calc(var(--dt-space) * .75);color:var(--dt-muted);line-height:1.55}.pv-actions{display:flex;flex-wrap:wrap;gap:calc(var(--dt-space) * .5);margin-top:var(--dt-space)}.pv-button{font:inherit;font-size:var(--dt-fs-sm);font-weight:600;padding:.55em 1.1em;border-radius:var(--dt-radius);border:var(--dt-border-w) solid transparent;cursor:pointer;transition:opacity .15s ease}.pv-button:hover{opacity:.85}.pv-button--primary{background:var(--dt-accent);color:var(--dt-accent-ink)}.pv-button--ghost{background:transparent;color:var(--dt-text);border-color:color-mix(in srgb,var(--dt-text) 25%,transparent)}.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--dt-space)}.pv-card{background:var(--dt-surface);border:var(--dt-border-w) solid color-mix(in srgb,var(--dt-text) 12%,transparent);border-radius:var(--dt-radius);padding:calc(var(--dt-space) * 1.1)}.pv-badge{display:inline-block;font-size:var(--dt-fs-sm);font-weight:600;color:var(--dt-accent);border:var(--dt-border-w) solid color-mix(in srgb,var(--dt-accent) 40%,transparent);border-radius:calc(var(--dt-radius) / 1.5);padding:.15em .7em}.pv-h3{font-size:var(--dt-fs-h3);font-weight:650;letter-spacing:-.01em;margin-top:calc(var(--dt-space) * .7)}.pv-body{color:var(--dt-muted);margin-top:calc(var(--dt-space) * .4);line-height:1.55}.pv-form{display:flex;gap:calc(var(--dt-space) * .4);margin-top:calc(var(--dt-space) * .8)}.pv-form input{flex:1;min-width:0;font:inherit;font-size:var(--dt-fs-sm);color:var(--dt-text);background:var(--dt-bg);border:var(--dt-border-w) solid color-mix(in srgb,var(--dt-text) 20%,transparent);border-radius:var(--dt-radius);padding:.55em .9em}.pv-form input::placeholder{color:var(--dt-muted)}.pv-type-row{display:flex;align-items:baseline;gap:calc(var(--dt-space) * .75);margin-top:calc(var(--dt-space) * .7)}.pv-type{font-weight:650;letter-spacing:-.01em}.pv-type--h1{font-size:var(--dt-fs-h1)}.pv-type--h2{font-size:var(--dt-fs-h2)}.pv-type--h3{font-size:var(--dt-fs-h3)}.pv-type--body{font-size:var(--dt-fs-body)}.pv-type--sm{font-size:var(--dt-fs-sm);color:var(--dt-muted)}.pv-small{font-size:var(--dt-fs-sm);color:var(--dt-muted);margin-top:calc(var(--dt-space) * .5)}.export{border:1px solid var(--ui-line);border-radius:1rem;background:var(--ui-surface);padding:1.25rem}.export__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.export__header h2{margin-bottom:0}.export__actions{display:flex;align-items:center;gap:.5rem}.segmented{display:inline-flex;border:1px solid var(--ui-line);border-radius:9999px;overflow:hidden}.segmented button{font:inherit;font-size:.75rem;font-weight:600;color:var(--ui-muted);background:transparent;border:none;padding:.3rem .9rem;cursor:pointer}.segmented button.is-active{background:#ffffff17;color:var(--ui-text)}.copy-button{font:inherit;font-size:.75rem;font-weight:600;color:#000;background:#fff;border:none;border-radius:9999px;padding:.3rem .9rem;cursor:pointer;transition:background-color .15s ease}.copy-button:hover{background:#d7d7d7}.export pre{font-family:var(--ui-mono);font-size:.78rem;line-height:1.6;color:var(--ui-muted);background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:.625rem;padding:1rem;overflow-x:auto}.footer{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--ui-line);font-size:.8125rem;color:var(--ui-muted)}.footer a{color:var(--ui-text);text-decoration:underline;text-underline-offset:.2em}@media(max-width:60rem){.layout{grid-template-columns:1fr}.pv-nav{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}