.top h1 .home-link{color:inherit;text-decoration:none}.top h1 .home-link:hover{color:var(--ink-2)}.top h1 .crumb{font-weight:400;color:var(--ink-3)}.preview-wrap{margin-bottom:36px}.preview{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;display:grid;place-items:center;width:100%;min-height:180px;padding:24px;background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .12s ease;overflow:hidden}.preview:active{transform:scale(.99)}.preview-stage{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;overflow:visible}.preview-label{display:inline-flex;justify-content:center;align-items:center;max-width:100%;font-family:inherit;font-size:30px;font-weight:600;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;transform:scale(var(--preview-label-scale, 1));transform-origin:center;transition:transform .16s var(--ease-out)}@media(max-width:480px){.preview{min-height:140px}.preview-label{font-size:24px}}.preview-input-row{margin-top:10px}.preview-input{width:100%;font:500 12.5px/1 var(--font-mono);letter-spacing:var(--tracking);color:var(--ink);background:var(--control-bg);border:0;border-radius:var(--radius-md);padding:10px 12px;box-shadow:var(--shadow-pill);outline:none;transition:box-shadow .12s ease}.preview-input::placeholder{color:var(--ink-3)}.preview-input:focus{box-shadow:var(--shadow-control)}.controls{margin-bottom:36px}.control-row{min-height:50px}.slider-group{display:inline-flex;align-items:center;gap:10px;min-width:176px;justify-content:flex-end}.hue-slider{flex:none;transition:opacity .2s var(--ease-out)}.hue-slider.is-off{opacity:0;pointer-events:none}.slider-value{font:500 12px/1 var(--font-mono);letter-spacing:var(--tracking);color:var(--ink-2);font-variant-numeric:tabular-nums;justify-content:flex-end}.slider{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:132px;height:16px;background:none;margin:0}.slider::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:#0000001f}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:999px;background:var(--control-bg);box-shadow:var(--shadow-control);transition:transform .12s ease}.slider::-webkit-slider-thumb:active{transform:scale(1.15)}.slider::-moz-range-track{height:3px;border-radius:999px;background:#0000001f}.slider::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:999px;background:var(--control-bg);box-shadow:var(--shadow-control)}.hue-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#eb4747,#e8e830,#26d926,#20dfdf,#5151ec,#ea3eea,#eb4747)}.hue-slider::-moz-range-track{background:linear-gradient(to right,#eb4747,#e8e830,#26d926,#20dfdf,#5151ec,#ea3eea,#eb4747)}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;position:relative;width:34px;height:20px;padding:2px;border-radius:999px;background:#00000024;transition:background .2s var(--ease-out);flex:none}.switch .knob{display:block;width:16px;height:16px;border-radius:999px;background:#fff;box-shadow:0 1px 2px #0003;transform:translate(0);transition:transform .2s var(--ease-out)}.switch.on{background:var(--ink)}.switch.on .knob{transform:translate(14px)}.switch:active .knob{transform:translate(0) scale(.92)}.switch.on:active .knob{transform:translate(14px) scale(.92)}.snippet{margin-bottom:0}.snippet .code-card{height:252px;padding:18px 20px;font-size:11.5px;overflow:hidden;line-height:1.5}.snippet .code-card>code{column-gap:16px}@media(max-width:480px){.preview-wrap,.controls{margin-bottom:28px}.slider{width:104px}.control-row{flex-wrap:wrap;padding:8px 0}}