*{box-sizing:border-box}:root{color-scheme:dark;--bg:#1d1d1d;--top:#2d2d2d;--panel:#262626;--panel-2:#202020;--panel-3:#303030;--field:#1c1c1c;--line:#111;--line-2:#3a3a3a;--text:#d8d8d8;--text-strong:#eeeeee;--muted:#9b9b9b;--muted-2:#777;--blue:#1473e6;--blue-2:#0d5cba;--danger:#c0392b;--ok:#2e8a57}body,html{height:100%;margin:0}body{overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;font-size:12px}button,input,select{font:inherit}button{cursor:pointer;color:var(--text)}button:disabled{cursor:default;opacity:.4}input,select{-webkit-user-select:auto;user-select:auto}input[type=range]{min-width:0;height:16px;margin:0;accent-color:var(--blue);cursor:ew-resize;pointer-events:auto}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#111;border:1px solid #050505}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:16px;margin-top:-7px;border-radius:2px;border:1px solid #0b0b0b;background:#c8c8c8}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#111;border:1px solid #050505}input[type=range]::-moz-range-thumb{width:12px;height:16px;border-radius:2px;border:1px solid #0b0b0b;background:#c8c8c8}.app-shell{height:100vh;display:grid;grid-template-columns:238px minmax(0,1fr) 358px;grid-template-rows:44px minmax(0,1fr);grid-template-areas:"topbar topbar topbar" "left viewer right"}.topbar{grid-area:topbar;gap:10px;min-height:44px;padding:4px 12px;background:var(--top);border-bottom:1px solid var(--line)}.brand,.topbar{display:flex;align-items:center}.brand{gap:7px;flex:none}.brand-mark{width:22px;height:22px;display:grid;place-items:center;border-radius:3px;background:var(--blue);color:#fff;font-size:13px;font-weight:800;border:1px solid var(--blue-2)}.brand strong{color:var(--text-strong);font-size:13px;letter-spacing:.2px;white-space:nowrap}.mode-tabs{display:flex;align-items:center;gap:4px;padding-left:10px;border-left:1px solid #404040}.button-row button,.error-overlay button,.mode-tabs button,.preset-grid button{border:1px solid #181818;border-radius:3px;background:#3a3a3a;color:#ddd;padding:4px 9px;font-size:12px}.button-row button:hover,.error-overlay button:hover,.mode-tabs button:hover,.preset-grid button:hover{background:#484848}.export-button,.import-mini label,.mode-tabs button.active,.primary-button{border:1px solid var(--blue-2);border-radius:3px;background:var(--blue);color:#fff;padding:5px 10px;font-size:12px;font-weight:600}.status-pill{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:260px;justify-content:flex-end;color:#aaa;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-dot{width:8px;height:8px;border-radius:50%;background:#777;border:1px solid #000}.status-dot.ready{background:var(--ok)}.status-dot.error{background:var(--danger)}.status-dot.decoding,.status-dot.exporting,.status-dot.persisting,.status-dot.rendering{background:#d89a29}.left-rail{grid-area:left;display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:hidden}.left-rail,.right-rail{min-height:0;background:var(--panel)}.right-rail{grid-area:right;overflow-y:auto;border-left:1px solid var(--line);padding:8px}.library-list::-webkit-scrollbar,.right-rail::-webkit-scrollbar{width:10px;height:10px}.library-list::-webkit-scrollbar-thumb,.right-rail::-webkit-scrollbar-thumb{background:#444;border:2px solid #242424}.library-list::-webkit-scrollbar-track,.right-rail::-webkit-scrollbar-track{background:#1a1a1a}.import-mini{flex:none;padding:8px;background:#2b2b2b;border-bottom:1px solid #111}.export-button,.import-mini label,.primary-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.import-mini label{width:100%}.library-list{flex:1 1;min-height:0;overflow-y:auto;padding:5px}.storage-card{flex:none;margin:6px;padding:8px;background:#202020;border:1px solid #111;border-radius:3px}.storage-card small,.storage-card span,.storage-card strong{display:block}.storage-card strong{color:#e5e5e5;font-size:12px}.storage-card small,.storage-card span{margin-top:4px;color:#8b8b8b;font-size:10px;line-height:1.35}.thumb{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:center;padding:5px;border:1px solid transparent;border-radius:3px;background:transparent;color:#aaa;text-align:left}.thumb:hover{background:#303030}.thumb.selected{background:#1f3b5f;border-color:#2b78d0;color:#fff}.thumb img,.thumb-placeholder{width:56px;height:42px;object-fit:cover;border-radius:2px;background:#111;border:1px solid #050505}.thumb-placeholder{display:grid;place-items:center;color:#777;font-size:10px;font-weight:700}.thumb span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.viewer{grid-area:viewer;position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;background:#151515}.viewer:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 0) 0 0 /20px 20px,linear-gradient(0deg,rgba(255,255,255,.018) 1px,transparent 0) 0 0 /20px 20px}.image-canvas{width:100%;height:100%;display:block;position:relative;z-index:1;background:#111}.drop-zone{position:relative;z-index:2;width:min(620px,calc(100% - 50px));min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;background:#262626;border:1px solid #111;border-radius:4px;text-align:center}.drop-zone.is-over{outline:2px solid var(--blue)}.drop-orbit{display:none}.drop-zone h2{margin:0;color:#ededed;font-size:22px;letter-spacing:.1px}.drop-zone p{max-width:520px;margin:0;color:#aaa;line-height:1.5}.error-overlay,.processing-overlay{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(38,38,38,.94);border:1px solid #111;box-shadow:0 8px 30px rgba(0,0,0,.55)}.processing-overlay span{color:#999;font-size:11px}.error-overlay strong,.processing-overlay strong{flex:1 1;color:#eee}.error-overlay{border-color:#4a1111}.spinner{width:18px;height:18px;border-radius:50%;border:2px solid #3a3a3a;border-top:2px solid var(--blue);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.zoom-toolbar{position:absolute;z-index:6;right:16px;top:16px;display:flex;align-items:center;gap:2px;padding:4px;border-radius:8px;background:rgba(20,20,20,.88);border:1px solid #2c2c2c;box-shadow:0 8px 24px rgba(0,0,0,.5)}.zoom-toolbar button{min-width:30px;height:26px;padding:0 8px;border:none;border-radius:5px;background:transparent;color:#cfcfcf;font-size:12px;cursor:pointer}.zoom-toolbar button:hover{background:#2e2e2e;color:#fff}.zoom-toolbar button.active{background:var(--blue);color:#fff}.zoom-value{min-width:48px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:12px;color:#aaa}.before-badge{position:absolute;z-index:4;left:16px;top:16px;padding:4px 10px;border-radius:6px;background:rgba(20,20,20,.88);border:1px solid #2c2c2c;color:#f0c040;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.develop-actions .button-row button.active{background:var(--blue);border-color:var(--blue);color:#fff}.crop-badge{left:auto;right:16px;bottom:16px;top:auto;color:#7fd4ff}.context-menu{position:fixed;z-index:50;min-width:180px;padding:5px;border-radius:8px;background:#1d1d1d;border:1px solid #343434;box-shadow:0 14px 40px rgba(0,0,0,.6);display:flex;flex-direction:column}.context-item{text-align:left;padding:7px 10px;border:none;border-radius:5px;background:transparent;color:#ddd;font-size:13px;cursor:pointer}.context-item:hover:not(:disabled){background:var(--blue);color:#fff}.context-item:disabled{color:#666;cursor:default}.context-item.danger{color:#ff7a7a}.context-item.danger:hover{background:#5a1414;color:#fff}.context-sep{height:1px;margin:4px 6px;background:#333}.tone-curve{width:100%;aspect-ratio:1/1;background:#141414;border:1px solid #2a2a2a;border-radius:6px;touch-action:none;cursor:crosshair}.tc-grid{stroke:#2a2a2a;stroke-width:.5}.tc-diagonal,.tc-grid{vector-effect:non-scaling-stroke}.tc-diagonal{stroke:#333;stroke-width:.5;stroke-dasharray:2 2}.tc-line{fill:none;stroke:#f0f0f0;stroke-width:1.5}.tc-line,.tc-point{vector-effect:non-scaling-stroke}.tc-point{fill:#fff;stroke:var(--blue);stroke-width:1.5;cursor:grab}.hint{margin:6px 0 0;font-size:10px;color:#777}.crop-overlay{position:absolute;inset:0;z-index:5;touch-action:none}.crop-box{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 9999px rgba(0,0,0,.55);cursor:move}.crop-thirds{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 33.33%,rgba(255,255,255,.35) 0,rgba(255,255,255,.35) calc(33.33% + 1px),transparent calc(33.33% + 1px)),linear-gradient(90deg,transparent 66.66%,rgba(255,255,255,.35) 0,rgba(255,255,255,.35) calc(66.66% + 1px),transparent calc(66.66% + 1px)),linear-gradient(0deg,transparent 33.33%,rgba(255,255,255,.35) 0,rgba(255,255,255,.35) calc(33.33% + 1px),transparent calc(33.33% + 1px)),linear-gradient(0deg,transparent 66.66%,rgba(255,255,255,.35) 0,rgba(255,255,255,.35) calc(66.66% + 1px),transparent calc(66.66% + 1px))}.crop-handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid #111;border-radius:2px}.rail-tabs{display:flex;gap:4px;padding:4px;margin-bottom:10px;border-radius:7px;background:#161616;border:1px solid #2a2a2a}.rail-tabs button{flex:1 1;padding:7px 0;border:none;border-radius:5px;background:transparent;color:#aaa;font-size:12px;font-weight:600;cursor:pointer}.rail-tabs button:hover{background:#242424;color:#ddd}.rail-tabs button.active{background:var(--blue);color:#fff}.add-mask{width:100%;padding:8px;border:1px dashed #3a3a3a;border-radius:5px;background:#1c1c1c;color:#cfcfcf;font-size:12px;cursor:pointer}.add-mask:hover:not(:disabled){border-color:var(--blue);color:#fff}.add-mask:disabled{opacity:.45;cursor:default}.mask-list{flex-direction:column;margin:8px 0}.mask-list,.mask-row{display:flex;gap:4px}.mask-row button:first-child{flex:1 1;text-align:left;padding:6px 9px;border:1px solid #2a2a2a;border-radius:4px;background:#222;color:#ccc;font-size:12px;cursor:pointer}.mask-row.selected button:first-child{border-color:var(--blue);background:#1b2c43;color:#fff}.mask-del{width:30px;border:1px solid #2a2a2a;border-radius:4px;background:#222;color:#ff7a7a;cursor:pointer}.mask-del:hover{background:#5a1414;color:#fff}.mask-adjust{margin-top:6px;padding-top:8px;border-top:1px solid #2a2a2a}.mask-overlay{position:absolute;inset:0;z-index:5;touch-action:none}.mask-ellipse{box-sizing:border-box;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.4);cursor:move}.mask-center,.mask-ellipse{position:absolute;border-radius:50%}.mask-center{left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px}.mask-center,.mask-handle{background:#fff;border:1px solid #111}.mask-handle{position:absolute;width:12px;height:12px;border-radius:50%}.mask-x{right:-6px;top:calc(50% - 6px);cursor:ew-resize}.mask-y{left:calc(50% - 6px);bottom:-6px;cursor:ns-resize}.crop-nw{left:-6px;top:-6px;cursor:nwse-resize}.crop-n{left:calc(50% - 6px);top:-6px;cursor:ns-resize}.crop-ne{right:-6px;top:-6px;cursor:nesw-resize}.crop-e{right:-6px;top:calc(50% - 6px);cursor:ew-resize}.crop-se{right:-6px;bottom:-6px;cursor:nwse-resize}.crop-s{left:calc(50% - 6px);bottom:-6px;cursor:ns-resize}.crop-sw{left:-6px;bottom:-6px;cursor:nesw-resize}.crop-w{left:-6px;top:calc(50% - 6px);cursor:ew-resize}.histogram{width:100%;height:96px;display:block;margin:0 0 8px;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 0) 0 0 /25% 100%,linear-gradient(180deg,rgba(255,255,255,.05) 1px,transparent 0) 0 0 /100% 25%,#111;border:1px solid #080808}.histogram polyline{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.9}.hist-l{stroke:rgba(230,230,230,.48)}.hist-r{stroke:rgba(255,88,88,.82)}.hist-g{stroke:rgba(80,210,110,.82)}.hist-b{stroke:rgba(80,150,255,.9)}.panel-section{margin-bottom:7px;padding:8px;background:#2a2a2a;border:1px solid #111;border-radius:3px}.panel-section h3{margin:-8px -8px 8px;padding:5px 8px;background:#202020;border-bottom:1px solid #111;color:#dcdcdc;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.slider-row{display:grid;grid-template-columns:88px minmax(80px,1fr) 50px;gap:6px;align-items:center;height:23px;color:#aaa;font-size:11px}.slider-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slider-row input[type=range]{width:100%}.slider-num{width:100%;min-width:0;padding:1px 3px;border:1px solid transparent;border-radius:3px;background:transparent;color:#bbb;font-family:SF Mono,Consolas,monospace;font-size:10px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;cursor:ns-resize}.slider-num:hover{color:#fff;border-color:#333}.slider-num:focus{outline:none;border-color:var(--blue);background:var(--field);color:#fff}.slider-row span{cursor:default}.select-row,.text-row{display:grid;grid-template-columns:106px minmax(0,1fr);gap:8px;align-items:center;min-height:25px;margin-bottom:6px;color:#aaa;font-size:11px}.select-row select,.text-row input{width:100%;min-width:0;padding:4px 6px;background:var(--field);border:1px solid #111;border-radius:3px;color:#ddd;font-size:11px}.select-row select:focus,.slider-row input:focus,.text-row input:focus{outline:1px solid var(--blue)}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.button-row button,.preset-grid button{min-height:24px;padding:4px 6px;font-size:11px}.button-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}.hsl-grid{display:grid;gap:6px}.hsl-band{padding:6px;background:#232323;border:1px solid #141414;border-radius:3px}.hsl-band strong{display:block;margin-bottom:4px;color:#d5d5d5;font-size:10px}.hsl-band .slider-row{grid-template-columns:32px minmax(70px,1fr) 38px;height:20px}.metadata{display:grid;grid-template-columns:74px minmax(0,1fr);gap:5px 8px;margin:0;font-size:11px}.metadata dt{color:#858585}.metadata dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;color:#cfcfcf;white-space:nowrap}.muted{line-height:1.5}.check-row,.muted{color:#aaa;font-size:11px}.check-row{display:flex;align-items:center;gap:7px;margin:7px 0}.export-button{width:100%;margin-top:6px;padding:7px 10px}@media (max-width:1100px){.app-shell{grid-template-columns:210px minmax(0,1fr) 320px}.slider-row{grid-template-columns:76px minmax(66px,1fr) 46px}}