.theme-builder *{box-sizing:border-box}.theme-builder{color:#111;background:#fff;margin:0;font-family:system-ui,Hiragino Sans,Noto Sans JP,sans-serif}.theme-builder main{max-width:1100px;margin:0 auto;padding:24px 20px 96px}.theme-builder h1{margin:0 0 4px;font-size:24px}.theme-builder h2{text-transform:uppercase;letter-spacing:.08em;color:#666;margin:32px 0 12px;font-size:15px}.theme-builder header p{color:#666;max-width:60ch;margin:0 0 16px}.theme-builder .picker{align-items:center;gap:10px;display:inline-flex}.theme-builder .picker input{background:0 0;border:1px solid #ccc;width:56px;height:36px;padding:0}.theme-builder .warnings{margin:0;padding-left:20px}.theme-builder .warnings li{margin-bottom:6px;line-height:1.6}.theme-builder .warnings code{background:#fdf0d5;margin-right:6px;padding:1px 5px}.theme-builder .ramp{align-items:center;gap:12px;margin-bottom:6px;display:flex}.theme-builder .ramp-label{flex:none;width:110px;font-size:13px}.theme-builder .ramp-label .hue{color:#999;margin-left:6px;font-size:11px}.theme-builder .ramp-strip{flex:1;display:flex}.theme-builder .swatch{flex:1;place-items:center;height:40px;font-size:10px;display:grid}.theme-builder .contrast{border-collapse:collapse;font-size:13px}.theme-builder .contrast th,.theme-builder .contrast td{text-align:right;border:1px solid #e2e2e2;padding:5px 10px}.theme-builder .contrast th:first-child,.theme-builder .contrast td:first-child{text-align:left}.theme-builder .contrast .ok{color:#0a7a3d}.theme-builder .contrast .ng{color:#c00;font-weight:700}.theme-builder .note{color:#888;font-size:12px}.theme-builder .previews{grid-template-columns:1fr 1fr;gap:16px;display:grid}.theme-builder .preview{border-radius:12px;padding:20px}.theme-builder .preview-card{border:1px solid;border-radius:10px;padding:16px}.theme-builder .preview-card p{font-size:14px;line-height:1.7}.theme-builder .preview-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;display:flex}.theme-builder .preview button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:8px 16px;font-size:14px}.theme-builder .badge{border:1px solid;border-radius:999px;padding:2px 10px;font-size:12px}.theme-builder .series{align-items:center;gap:6px;font-size:12px;display:inline-flex}.theme-builder .series i{border-radius:3px;width:12px;height:12px}.theme-builder pre{background:#f6f6f6;max-height:360px;padding:14px;font-size:12px;line-height:1.6;overflow-x:auto}.theme-builder button{font:inherit}@media (max-width:780px){.theme-builder .previews{grid-template-columns:1fr}}.theme-builder .placement{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;display:flex}.theme-builder .placement .chip{border:1px solid #ccc;border-radius:4px;width:40px;height:28px}.theme-builder .placement .arrow{color:#999}.theme-builder .placement .delta{color:#888;font-size:12px}.theme-builder .swatch.picked{outline-offset:-3px;outline:3px double #111}.theme-builder .swatch.accent{box-shadow:inset 0 -4px #111}.theme-builder .explain{color:#333;max-width:72ch;font-size:14px;line-height:1.8}.theme-builder .preview>.preview-card{margin-top:20px}.theme-builder .sample-label{align-items:baseline;gap:8px;margin-bottom:8px;font-size:11px;display:flex}.theme-builder .sample-label span{opacity:.75;font-size:10px}.theme-builder .demo-controls{color:#555;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:12px;font-size:12px;display:flex}.theme-builder .demo-controls label{align-items:center;gap:6px;display:inline-flex}.theme-builder .demo-controls select{font:inherit;padding:3px 6px}.theme-builder .demo-controls .check{gap:4px}.theme-builder .demo-link{color:#fff;background:#111;border-radius:6px;padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block}.theme-builder .demo-link:hover{background:#333}.theme-builder .demo-link:focus-visible{outline-offset:2px;outline:2px solid #111}