:root{color-scheme:dark;--bg:#090d12;--panel:#111821;--panel2:#0c1219;--border:#293540;--text:#eef4f8;--muted:#91a2b2;--cyan:#20c8f3}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 55% -25%,#233647 0,#090d12 55%);color:var(--text);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
button,input{font:inherit}
.app-shell{width:min(1440px,calc(100% - 32px));margin:auto;padding:18px 0}
.workspace{display:grid;grid-template-columns:300px auto;width:max-content;max-width:100%;margin-inline:auto;gap:10px;align-items:start}
.controls,.graph-card{border:1px solid var(--border);border-radius:16px;background:rgba(17,24,33,.96);box-shadow:0 18px 70px #0008}
.controls{padding:18px;position:sticky;top:18px}
.panel-heading,.graph-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.graph-title-block{min-width:0}.graph-title-row{display:flex;align-items:center;gap:16px}
.eyebrow{margin:0 0 4px;color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
h1,h2{margin:0;letter-spacing:-.025em}h1{font-size:1.25rem}h2{font-size:1.35rem}
.count-badge{display:grid;place-items:center;min-width:34px;height:28px;border:1px solid #36505e;border-radius:999px;color:var(--cyan);background:#15232d;font-size:.8rem;font-weight:800}
.copy-graph{padding:7px 12px;border:1px solid #3c5160;border-radius:7px;color:#d8e3ea;background:#192630;font-size:.76rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:.15s}.copy-graph:hover{border-color:var(--cyan);color:#fff;background:#1d303b}.copy-graph:active{transform:translateY(1px)}.copy-graph.success{border-color:#45e386;color:#45e386}.copy-graph.error{border-color:#ff655e;color:#ff8a84}
.list-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 10px}
.list-actions button{padding:7px;border:1px solid #344454;border-radius:7px;color:#c8d3dc;background:#1a2530;cursor:pointer}.list-actions button:hover{border-color:var(--cyan);color:#fff}
.gamut-list{height:calc(100vh - 190px);min-height:320px;max-height:620px;overflow:auto;border:1px solid #27323d;border-radius:9px;background:var(--panel2);scrollbar-color:#425463 transparent}
.gamut-item{--item-color:#fff;display:flex;align-items:center;gap:10px;min-height:39px;padding:7px 10px;border-bottom:1px solid #202a34;color:#b7c3cd;cursor:pointer;user-select:none;transition:.15s}.gamut-item:last-child{border-bottom:0}.gamut-item:hover{background:#17222c;color:#fff}.gamut-item.checked{color:#fff;background:color-mix(in srgb,var(--item-color) 9%,#111922)}
.gamut-item input{appearance:none;width:16px;height:16px;flex:0 0 auto;margin:0;border:1px solid #566675;border-radius:4px;background:#0a1016;cursor:pointer}.gamut-item input:checked{border-color:var(--item-color);background:var(--item-color);box-shadow:inset 0 0 0 3px #111821}
.swatch{width:18px;height:3px;flex:0 0 auto;border-radius:3px;background:var(--item-color);box-shadow:0 0 9px color-mix(in srgb,var(--item-color) 55%,transparent)}.gamut-item:not(.checked) .swatch{visibility:hidden}
.palette-0{--item-color:#ffe13d}.palette-1{--item-color:#ff4ed3}.palette-2{--item-color:#31d9ff}.palette-3{--item-color:#ff655e}.palette-4{--item-color:#45e386}.palette-5{--item-color:#6c8cff}.palette-6{--item-color:#ffc266}.palette-7{--item-color:#ef7dff}.palette-8{--item-color:#65ead8}.palette-9{--item-color:#ff467b}.palette-10{--item-color:#ff9d3d}.palette-11{--item-color:#a8df44}.palette-12{--item-color:#39c99d}.palette-13{--item-color:#b985ff}.palette-14{--item-color:#ff8d71}.palette-15{--item-color:#64b5ff}.palette-16{--item-color:#e7ec52}.palette-17{--item-color:#47d1b4}.palette-18{--item-color:#f2a65a}
.pixcal-app-language-switcher{position:fixed;top:10px;right:12px;z-index:10000;padding:6px 30px 6px 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:#071017;color:#fff!important;font:600 12px/1.2 system-ui,sans-serif;cursor:pointer}.pixcal-app-language-switcher:hover,.pixcal-app-language-switcher:focus{border-color:#30c8ff;background:#102735;outline:none}
.item-name{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint{margin:12px 2px 0;color:var(--muted);font-size:.76rem;line-height:1.6}
.graph-card{width:fit-content;max-width:100%;padding:16px;min-width:0;justify-self:center}.graph-header{min-height:48px;margin-bottom:10px}.graph-key{display:flex;gap:16px;color:var(--muted);font-size:.76rem}.graph-key span{display:flex;align-items:center;gap:6px}.line-key{width:22px;height:2px;background:#c8d3dc}.point-key{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#17202a}
.canvas-wrap{position:relative;width:min(820px,calc(100vw - 390px),calc(100vh - 150px));height:min(820px,calc(100vw - 390px),calc(100vh - 150px));min-width:420px;min-height:420px;border:1px solid #26313b;border-radius:11px;overflow:hidden;background:#080d12}.canvas-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}.canvas-wrap canvas.panning{cursor:grabbing}.empty-state{position:absolute;inset:auto 50% 22px auto;transform:translateX(50%);padding:8px 12px;border:1px solid #34414d;border-radius:7px;background:#111923dd;color:var(--muted);font-size:.8rem;white-space:nowrap}
.legend{display:none}
@media(max-width:880px){.app-shell{width:calc(100% - 18px);padding-top:9px}.workspace{grid-template-columns:1fr;width:100%}.controls{position:static}.gamut-list{height:260px;min-height:0}.graph-card{width:100%;padding:10px}.canvas-wrap{width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:1}.graph-header{padding:4px}.graph-key{display:none}.graph-title-row{gap:10px}.copy-graph{padding:6px 9px;font-size:.7rem}}