.v120-form{display:grid;gap:16px}
.v120-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v120-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.v120-form label{display:grid;gap:7px;font-weight:700;color:var(--ink,#182033)}
.v120-form input,.v120-form select,.v120-form textarea{width:100%;min-width:0;border:1px solid var(--line,#dce2ef);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#182033);padding:12px 13px;font:inherit}
.v120-form textarea{min-height:220px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.55}
.v120-form input[type="color"]{height:48px;padding:5px}
.v120-form input[type="range"]{padding:0}
.v120-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.v120-actions .primary,.v120-actions .secondary,.v120-download{min-height:44px}
.v120-status{min-height:1.5em;color:var(--muted,#64748b);font-size:.94rem}
.v120-status.is-error{color:#c62828;font-weight:700}
.v120-output{white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:color-mix(in srgb,var(--surface,#fff) 92%,#64748b 8%);border:1px solid var(--line,#dce2ef);border-radius:14px;padding:16px;min-height:72px;max-height:460px;overflow:auto}
.v120-canvas-wrap{display:grid;place-items:center;overflow:auto;border:1px dashed var(--line,#cbd5e1);border-radius:16px;background:repeating-conic-gradient(#f1f5f9 0 25%,#fff 0 50%) 50%/20px 20px;min-height:180px;padding:12px}
.v120-canvas-wrap canvas{display:block;max-width:100%;height:auto;box-shadow:0 4px 18px rgba(15,23,42,.12)}
.v120-preview{display:block;max-width:100%;max-height:420px;margin:auto;border-radius:12px}
.v120-result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);gap:18px;align-items:start}
.v120-metric{display:flex;flex-wrap:wrap;gap:10px}
.v120-pill{border:1px solid var(--line,#dce2ef);border-radius:999px;padding:7px 11px;background:var(--surface,#fff);font-size:.9rem}
.v120-iframe{width:100%;min-height:420px;border:1px solid var(--line,#dce2ef);border-radius:14px;background:#fff}
.v120-swatch{width:72px;height:72px;border-radius:14px;border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 0 0 5px rgba(255,255,255,.35)}
.v120-color-result{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.v120-clock{font-variant-numeric:tabular-nums;font-size:clamp(2.5rem,10vw,5.5rem);line-height:1;text-align:center;font-weight:800;letter-spacing:.03em;padding:24px 8px}
.v120-laps{margin:0;padding-left:1.5rem;max-height:260px;overflow:auto}
.v120-note{font-size:.9rem;color:var(--muted,#64748b);line-height:1.6}
.v120-checkbox{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important;font-weight:600!important}
.v120-checkbox input{width:auto}
@media(max-width:760px){.v120-grid,.v120-grid.three,.v120-result-grid{grid-template-columns:1fr}.v120-form textarea{min-height:180px}.v120-iframe{min-height:340px}.v120-actions>*{flex:1 1 auto}.v120-clock{font-size:clamp(2.4rem,16vw,4.2rem)}}
[data-theme="dark"] .v120-canvas-wrap{background:repeating-conic-gradient(#283348 0 25%,#162033 0 50%) 50%/20px 20px}
[data-theme="dark"] .v120-iframe{background:#fff}