:root{--panel-bg:#f6f5f1;--canvas-bg:#d8e7ea;--border:#bcc7cb;--text:#1d2a2f;--muted:#44545b}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{color:var(--text);background:radial-gradient(circle at 10% 10%,#f7f2dd 0%,#0000 45%),radial-gradient(circle at 90% 80%,#d9ecff 0%,#0000 40%),#eef1ef;font-family:Avenir Next,Segoe UI,sans-serif}#app{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;width:100%;min-height:100dvh;display:grid}.canvas-panel{justify-content:stretch;align-items:stretch;min-width:0;min-height:0;padding:1rem;display:flex}.button-bar{border-bottom:1px solid var(--border);background:color-mix(in hsl, var(--panel-bg) 72%, white);justify-content:space-between;align-items:center;gap:.75rem;min-height:52px;padding:.5rem 1rem;display:flex}.button-bar-actions{align-items:center;gap:.5rem;display:flex}#ring{border:1px solid var(--border);background:var(--canvas-bg);outline:none;width:100%;height:100%;display:block}#ring:focus-visible{box-shadow:0 0 0 3px #1a72ff66}kbd{border:1px solid #ccc;border-radius:4px;padding:1px 4px;font-family:monospace}@media (width<=600px){.canvas-panel{min-height:60dvh}.button-bar{flex-wrap:wrap;justify-content:center}}.pill-btn{cursor:pointer;border:1px solid #787878;border-radius:9px;padding:6px 14px;font-size:14px;font-weight:500}.pill-btn:default{border:2px solid #787878}.pill-btn:hover{background:#ffffff1f;border-color:#500000}.button-link{color:inherit;align-items:center;text-decoration:none;display:inline-flex}[data-role=palette-dialog]{width:min(680px,100vw - 32px);max-width:95vw}.help-dialog{width:min(420px,100vw - 32px);max-width:95vw}.help-dialog p{color:var(--muted)}.help-dialog ul{margin:0;padding-left:1.2rem;line-height:1.5}.help-dialog form{margin-top:1rem}[data-role=palette-dialog] form{margin:0}[data-role=palette-dialog] [data-palette-container]{overflow-x:auto}[data-role=palette-table]{border-collapse:collapse;width:100%}[data-role=palette-table] th{text-align:center}[data-role=palette-table] td:first-child{text-align:left}[data-role=palette-table] td:nth-child(2),[data-role=palette-table] td:nth-child(3){text-align:center}[data-role=palette-table] input[type=color]{appearance:auto;cursor:pointer;background:0 0;border:none;width:60px;height:40px}dialog::backdrop{-webkit-backdrop-filter:blur;backdrop-filter:blur;background:#00000080}@media print{.no-print{display:none!important}}