*{box-sizing:border-box;margin:0;padding:0}:root{font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.4;color:#333;background:#f5f5f5}body{height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.header h1{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}.hue-control{display:flex;align-items:center;gap:.5rem}.hue-control label{display:flex;align-items:center;gap:.4rem}.label-text{font-size:.85rem;color:#666}#hue-slider{width:10rem;accent-color:oklch(60% .2 var(--hue, 250))}#hue-input{width:3.5rem;padding:.15rem .4rem;border:1px solid #ddd;border-radius:.25rem;font-size:.85rem;text-align:center}.hue-preview{width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0000001a}.derived-hues{display:flex;gap:.25rem;margin-left:auto}.hue-chip{width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);cursor:help}.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.5rem .75rem;flex:1;overflow:hidden;min-height:0}.mode-column{display:flex;flex-direction:column;gap:.5rem;min-height:0;overflow:hidden}.column-header{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.column-title{font-size:.9rem;font-weight:600;color:#333;white-space:nowrap}.mode-control{flex:1;display:flex;flex-direction:column;gap:.15rem}.control-row{display:flex;align-items:center;gap:.25rem}.control-label{font-size:.8rem;font-weight:600;color:#666;width:.85rem}.config-input{width:3rem;padding:.15rem .15rem .15rem .35rem;border:1px solid #ddd;border-radius:.2rem;font-size:.8rem;text-align:left}.config-input:focus{outline:none;border-color:#999}.control-unit{font-size:.7rem;color:#666;width:1rem}.range-bar{flex:1;height:.35rem;border-radius:.15rem;position:relative;min-width:2.5rem}.lightness-bar{background:linear-gradient(to right,#000,#fff)}.chroma-bar{background:linear-gradient(to right,#999,#5399de 50%,#3997ee 62.5%,#2596f6 68.75%,#1795fa,#0095fd 75%,#0094fc 78.12% 81.25%,#0093fb 87.5%,#0092f9);background:linear-gradient(to right,#999,#5399de 50%,#3997ee 62.5%,#2596f6 68.75%,#1795fa,color(xyz 0.285 0.285 0.978),color(xyz 0.286 0.283 1.012),color(xyz 0.288 0.281 1.046) 81.25%,color(xyz 0.291 0.277 1.117) 87.5%,color(xyz 0.301 0.27 1.266))}.range-indicator{position:absolute;top:-1px;bottom:-1px;background:#0066cc26;border:1px solid #0066cc;border-radius:.15rem}.chroma-indicator{background:#06c3}.mode-card{display:flex;flex-direction:column;background:#fff;border-radius:.4rem;overflow:hidden;box-shadow:0 1px 3px #0000001a;flex:1;min-height:0}.mode-preview{padding:.85rem 1rem;flex-shrink:0;border-radius:.25rem;margin:.5rem;box-shadow:0 2px 8px #00000026,0 1px 3px #0000001a}.preview-content{display:flex;flex-direction:column;gap:.75em}.preview-text{display:flex;gap:1em;align-items:baseline}.preview-strong,.preview-normal,.preview-muted{font-size:1rem}.preview-strong{font-weight:600}.preview-normal,.preview-muted{font-weight:400}.preview-section{display:flex;align-items:center}.semantic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em}.preview-button{padding:.3em .6em;border:1.5px solid transparent;border-radius:.25em;font-size:.75rem;font-weight:500;cursor:pointer;text-align:center;box-sizing:border-box}.preview-button.accent{font-size:.85rem;padding:.4em 1em}.preview-button.outline{border-color:currentColor}.mode-tokens{display:flex;flex-direction:column;gap:1px;background:#eee;flex:1;overflow-y:auto;min-height:0}.token{display:grid;grid-template-columns:1.5rem 5rem 1fr;gap:.5rem;align-items:center;padding:.25rem .5rem;background:#fff;font-size:.85rem}.token-swatch{width:1.25rem;height:1.25rem;border-radius:.2rem;border:1px solid rgba(0,0,0,.1)}.token-label{font-weight:500;color:#333;white-space:nowrap}.sparklines{display:flex;gap:.2rem}.sparkline{border:1px solid #ccc;border-radius:2px;cursor:help}