:root{color-scheme:dark;--ink:#171512;--panel:#211f1b;--panel2:#292620;--line:#3b3730;--paper:#f4efe5;--muted:#aaa398;--acid:#d8ff62;--coral:#f09372;--blue:#6d8f95;--shadow:0 18px 55px #0008;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);min-width:320px}.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;width:max-content}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid #716b61;border-radius:50%;font:italic 700 21px Georgia,serif;color:var(--acid)}.brand strong,.brand small{display:block}.brand strong{font-size:14px;letter-spacing:.03em}.brand small{font-size:10px;color:var(--muted);margin-top:2px}.privacy-chip{justify-self:center;border:1px solid #3c4430;background:#22271b;color:#cce988;border-radius:99px;padding:8px 13px;font-size:11px;letter-spacing:.03em}.privacy-chip span{font-size:7px;margin-right:7px}.header-actions{justify-self:end;display:flex;align-items:center;gap:9px}button,select,input{font:inherit}button{color:inherit}.history-scrub{width:110px;height:3px;accent-color:var(--acid);align-self:center;cursor:ew-resize}
.text-button,.secondary-button,.primary-button,.upload-button,.ai-button{border:0;border-radius:9px;cursor:pointer}.text-button{background:transparent;color:var(--muted);padding:9px}.text-button:hover:not(:disabled){color:white}.primary-button,.upload-button{background:var(--acid);color:#182000;padding:12px 18px;font-weight:800}.primary-button:hover:not(:disabled),.upload-button:hover{filter:brightness(1.06);transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed}.workspace{height:calc(100vh - 118px);min-height:620px;display:grid;grid-template-columns:92px minmax(360px,1fr) 330px}.toolrail{border-right:1px solid var(--line);padding:14px 9px;display:flex;flex-direction:column;gap:6px}.tool-tab{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:13px 5px;font-size:11px;display:grid;gap:7px;place-items:center;cursor:pointer}.tool-tab span{font-size:21px;font-family:Georgia,serif}.tool-tab:hover,.tool-tab.active{background:var(--panel2);color:var(--paper)}.tool-tab.active span{color:var(--acid)}.canvas-shell{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#353128 0,#201e1a 46%,#191714 76%)}.canvas-shell:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle,#000 15%,transparent 72%)}.empty-state{position:relative;width:min(600px,86%);text-align:center;padding:30px;z-index:1}.empty-art{height:118px;width:170px;margin:0 auto 24px;position:relative}.empty-art span{position:absolute;width:88px;height:104px;border:1px solid #655f55;background:#28251f;box-shadow:var(--shadow)}.empty-art span:nth-child(1){left:2px;rotate:-12deg;background:linear-gradient(135deg,#4f665f,#252923)}.empty-art span:nth-child(2){left:74px;rotate:11deg;background:linear-gradient(145deg,#b87159,#33231e)}.empty-art span:nth-child(3){left:42px;top:10px;rotate:-1deg;background:linear-gradient(145deg,#d8ff62,#35401b)}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:10px;font-weight:800;color:var(--acid);margin:0 0 9px}.empty-state h1{font:italic 600 clamp(44px,6vw,76px)/.92 Georgia,serif;letter-spacing:-.055em;margin:0}.empty-state>p:not(.eyebrow):not(.file-note){max-width:510px;margin:23px auto;color:#c0baaf;line-height:1.6;font-size:14px}.upload-button{margin-top:4px;padding:14px 25px}
.feature-map{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;max-width:520px;margin:0 auto 26px;text-align:left;font-size:11px;color:#a49d91;line-height:1.5}
.feature-map span:last-child{grid-column:1/-1}
.feature-map strong{color:#d5cfbf;margin-right:6px;text-transform:uppercase;font-size:9px;letter-spacing:.1em}
@media(max-width:560px){.feature-map{grid-template-columns:1fr}.feature-map span:last-child{grid-column:auto}}.file-note{color:#7f796f;font-size:10px;margin-top:13px}.hidden{display:none!important}.canvas-wrap{position:relative;z-index:2;width:calc(100% - 54px);height:calc(100% - 64px);display:flex;align-items:center;justify-content:center;padding-bottom:45px}.checkerboard{display:grid;place-items:center;max-width:100%;max-height:100%;background-color:#bdb9ae;background-image:linear-gradient(45deg,#d6d3ca 25%,transparent 25%),linear-gradient(-45deg,#d6d3ca 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d3ca 75%),linear-gradient(-45deg,transparent 75%,#d6d3ca 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;box-shadow:var(--shadow);line-height:0}#previewCanvas{display:block;max-width:100%;max-height:calc(100vh - 190px);object-fit:contain}.canvas-toolbar{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;background:#131210e8;border:1px solid var(--line);border-radius:99px;padding:5px 7px;white-space:nowrap;box-shadow:0 10px 30px #0006}.canvas-toolbar button{border:0;background:transparent;padding:7px 10px;font-size:11px;cursor:pointer}
.canvas-toolbar button.active{color:var(--acid)}.canvas-toolbar span{font-size:10px;color:var(--muted);padding:0 8px;border-left:1px solid var(--line);border-right:1px solid var(--line)}.drop-overlay{position:absolute;z-index:8;inset:22px;border:2px dashed var(--acid);border-radius:18px;background:#171512ec;display:grid;place-items:center;color:var(--acid);font:italic 32px Georgia,serif}.inspector{border-left:1px solid var(--line);background:var(--panel);padding:26px 24px;overflow-y:auto}.panel{display:none}.panel.active{display:block}.panel h2{font:italic 600 32px Georgia,serif;margin:0 0 9px;letter-spacing:-.025em}.panel-intro{color:var(--muted);font-size:12px;line-height:1.55;margin:0 0 18px}.ai-button{width:100%;padding:13px;background:var(--acid);color:#1c2208;font-weight:850}.ai-button span{margin-right:6px}.model-status{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px;margin:11px 2px 21px}.model-status span{width:7px;height:7px;border-radius:50%;background:#7d786f}.model-status.running span{background:var(--acid);box-shadow:0 0 0 4px #d8ff6220}.model-status.done span{background:#8fd5a6}.control-row{display:block;margin:17px 0}.control-row>span{display:flex;justify-content:space-between;font-size:11px;color:#c8c2b7;margin-bottom:9px}.control-row output{color:var(--muted);font-variant-numeric:tabular-nums}.control-row input{width:100%;height:3px;accent-color:var(--acid)}.secondary-button{width:100%;padding:10px 12px;background:#2e2b25;border:1px solid #454037;font-size:11px}.secondary-button:hover:not(:disabled){border-color:#686156}.segmented-field,.aspect-field{border:0;padding:0;margin:25px 0 18px}.segmented-field legend,.aspect-field legend{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}.segmented{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:9px;overflow:hidden}.segmented button{border:0;border-right:1px solid var(--line);background:#28251f;padding:9px 3px;font-size:10px;cursor:pointer}.segmented button:last-child{border-right:0}.segmented button.active{background:var(--paper);color:var(--ink)}.color-control,.select-control{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:17px 0}.color-control input{width:34px;height:26px;border:1px solid var(--line);background:none;padding:2px}.honesty-note{padding:13px;border:1px solid #4d493d;border-radius:9px;background:#27251f;color:var(--muted);font-size:10px;line-height:1.5;margin-top:20px}.honesty-note strong{color:#d5cfbf}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preset{border:1px solid var(--line);background:#27241f;border-radius:10px;padding:7px;text-align:left;cursor:pointer}.preset i{height:70px;display:block;border-radius:6px;background:linear-gradient(135deg,#6f8274,#c2a17e)}.preset span{display:block;padding:7px 3px 2px;font-size:10px}.preset.active{border-color:var(--acid)}.preset.warm i{filter:sepia(.45) saturate(1.25)}.preset.muted i{filter:contrast(.86) saturate(.65)}.preset.mono i{filter:grayscale(1) contrast(1.1)}.preset.vivid i{filter:saturate(1.7) contrast(1.1)}.preset.cool i{filter:hue-rotate(20deg) saturate(.8)}.aspect-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.aspect-grid button{height:72px;border:1px solid var(--line);border-radius:9px;background:#28251f;font-size:10px;color:var(--muted);display:grid;place-content:center;gap:8px;cursor:pointer}.aspect-grid button.active{border-color:var(--acid);color:var(--paper)}.aspect-grid i{display:block;border:1px solid currentColor;justify-self:center;height:18px}.ratio-original{width:26px}.ratio-square{width:18px}.ratio-portrait{width:15px}.ratio-landscape{width:30px;height:16px!important}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.action-grid button{height:66px;border:1px solid var(--line);background:#28251f;border-radius:9px;font-size:22px;cursor:pointer}.action-grid span{display:block;font-size:9px;color:var(--muted);margin-top:4px}.select-control select{background:#292620;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px}.export-summary{background:#292620;border:1px solid var(--line);border-radius:10px;padding:13px;font-size:11px;color:var(--muted);line-height:1.6;margin:22px 0}.wide{width:100%}footer{height:42px;border-top:1px solid var(--line);padding:0 24px;display:flex;align-items:center;justify-content:space-between;color:#787269;font-size:9px}footer p{margin:0}kbd{border:1px solid #4b463e;border-bottom-width:2px;border-radius:4px;padding:1px 4px}.toast{position:fixed;z-index:20;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--paper);color:var(--ink);border-radius:8px;padding:11px 16px;font-size:11px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.privacy-chip{display:none}.workspace{grid-template-columns:74px 1fr;height:auto;min-height:calc(100vh - 76px)}.canvas-shell{min-height:66vh}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);min-height:520px}.toolrail{grid-row:1}.canvas-wrap{height:65vh}footer{display:none}}
@media(max-width:560px){.topbar{height:64px;padding:0 13px}.brand small,.header-actions .text-button{display:none}.primary-button{padding:10px 12px;font-size:11px}.workspace{grid-template-columns:1fr}.toolrail{position:sticky;top:0;z-index:7;grid-row:auto;display:grid;grid-template-columns:repeat(6,1fr);border-right:0;border-bottom:1px solid var(--line);background:var(--ink);padding:6px}.tool-tab{padding:8px 2px;font-size:9px}.tool-tab span{font-size:17px}.canvas-shell{min-height:58vh}.empty-state{padding:22px 8px}.empty-state h1{font-size:46px}.canvas-wrap{width:calc(100% - 22px);height:56vh}.canvas-toolbar span{display:none}.inspector{padding:25px 18px}.drop-overlay{inset:10px}}
.export-summary{white-space:pre-line}
.sample-button{display:block;margin:14px auto 0;border:0;background:transparent;color:var(--muted);font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.sample-button:hover{color:var(--paper)}
.control-row.is-disabled{opacity:.4}
.control-row.is-disabled input{cursor:not-allowed}
#compareButton{touch-action:none;-webkit-user-select:none;user-select:none}
.ratio-classic{width:27px}
.ratio-story{width:11px;height:20px!important}
.segmented.two{grid-template-columns:repeat(2,1fr)}
.segmented.three{grid-template-columns:repeat(3,1fr)}
.segmented.five{grid-template-columns:repeat(5,1fr)}
.segmented.six{grid-template-columns:repeat(3,1fr)}
.segmented.six button:nth-child(3n){border-right:0}
.segmented.six button:nth-child(-n+3){border-bottom:1px solid var(--line)}
.sticker-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.layer-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.layer-chip{position:relative;height:44px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#28251f;cursor:pointer}
.layer-chip canvas{display:block;width:100%;height:100%;object-fit:cover}
.layer-chip.selected{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid)}
.layer-chip.is-hidden canvas{opacity:.22}
.layer-eye{position:absolute;right:2px;top:2px;font-size:9px;line-height:1;background:#131210d5;border-radius:4px;padding:2px 4px;color:var(--paper)}
.project-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:430px;margin:20px auto 0}
.project-card{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#28251f;cursor:pointer;padding:0;text-align:left}
.project-card:hover{border-color:#686156}
.project-card img{display:block;width:100%;height:62px;object-fit:cover;background:#211f1b}
.project-label{display:block;font-size:9px;color:var(--muted);padding:5px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-delete{position:absolute;top:3px;right:3px;background:#131210cc;border-radius:5px;color:var(--paper);font-size:9px;line-height:1;padding:3px 5px}
.project-rename{position:absolute;top:3px;left:3px;background:#131210cc;border-radius:5px;color:var(--paper);font-size:9px;line-height:1;padding:3px 5px}
.project-rename:hover{background:#131210;color:var(--acid)}
.project-delete:hover{background:#131210;color:var(--coral)}
@media(max-width:560px){.project-gallery{grid-template-columns:repeat(2,1fr)}}
.sticker-row button{font-size:19px;padding:7px 0;background:#28251f;border:1px solid var(--line);border-radius:9px;cursor:pointer;line-height:1}
.sticker-row button:hover:not(:disabled){border-color:#686156}
#previewCanvas.brushing{cursor:crosshair}
.marquee{position:absolute;z-index:9;border:1.5px dashed var(--acid);background:#d8ff6215;border-radius:3px;pointer-events:none}
.drag-hint strong{color:#d5cfbf}
.panel .secondary-button{margin-top:8px}
.button-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.button-pair:has(#addBrushButton){grid-template-columns:1fr 1fr 1fr}
.text-field{width:100%;background:#292620;border:1px solid var(--line);border-radius:9px;color:var(--paper);padding:11px;font:inherit;font-size:13px;resize:vertical;min-height:60px;margin:4px 0 2px}
.text-field:disabled{opacity:.4;cursor:not-allowed}
.text-field::placeholder{color:#7f796f}
.secondary-button.active{border-color:var(--acid);color:var(--paper)}
.panel .ai-button{margin-top:14px}
.drag-hint{color:#8a8478;font-size:10px;line-height:1.5;margin:14px 2px 0}
#previewCanvas{cursor:grab;touch-action:none}
#previewCanvas.dragging{cursor:grabbing}
.section-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:26px 0 2px}
.histogram-block{border:1px solid var(--line);border-radius:10px;background:#1b1916;padding:8px 8px 6px;margin:4px 0 14px}
#histogramCanvas{display:block;width:100%;height:84px}
.histogram-caption{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#7f796f;margin-top:5px;letter-spacing:.08em;text-transform:uppercase}
.clip-badge{color:#4b463e;transition:color .15s;background:none;border:0;padding:0;font:inherit;cursor:pointer;letter-spacing:inherit;text-transform:inherit}
.clip-badge.watching{text-decoration:underline;text-underline-offset:2px}
#clipShadows.active{color:#7aa8ff}
#clipHighlights.active{color:var(--coral)}
.curve-tabs{margin-bottom:10px}
#curveCanvas{display:block;width:100%;height:170px;border:1px solid var(--line);border-radius:10px;background:#1b1916;touch-action:none;cursor:crosshair}
.hsl-chips{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:10px 0 2px}
.hsl-chip{position:relative;height:26px;border-radius:7px;border:1px solid #00000055;cursor:pointer;padding:0}
.hsl-chip.active{outline:2px solid var(--paper);outline-offset:1px}
.hsl-chip.touched:after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:#131210cc;border:1px solid #ffffffaa}
.hsl-chip:nth-child(1){background:#e04f3f}
.hsl-chip:nth-child(2){background:#e08a3f}
.hsl-chip:nth-child(3){background:#d9c33f}
.hsl-chip:nth-child(4){background:#5fae53}
.hsl-chip:nth-child(5){background:#3fb8ad}
.hsl-chip:nth-child(6){background:#4a7ddb}
.hsl-chip:nth-child(7){background:#8a5cd0}
.hsl-chip:nth-child(8){background:#cf5c9e}
.preset.film i{filter:sepia(.35) contrast(.92) brightness(1.06)}
.preset.chrome i{filter:saturate(1.5) contrast(1.18)}
.preset.silver i{filter:grayscale(1) contrast(1.3) brightness(1.04)}
.preset.dusk i{filter:hue-rotate(-18deg) saturate(.72) brightness(.92)}
.layer-del{position:absolute;left:2px;top:2px;font-size:9px;line-height:1;background:#131210d5;border-radius:4px;padding:2px 4px;color:var(--paper);opacity:0;transition:opacity .12s}
.layer-chip:hover .layer-del,.layer-chip.selected .layer-del{opacity:1}
.layer-del:hover{color:var(--coral)}
.layer-tag{position:absolute;left:2px;bottom:2px;font-size:8px;line-height:1;background:#131210b5;border-radius:3px;padding:2px 3px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;pointer-events:none}
.layer-chip.dragging{opacity:.4}
.layer-lock{position:absolute;right:2px;bottom:2px;font-size:8px;line-height:1;background:#131210d5;border-radius:4px;padding:2px 3px;opacity:.5}
.layer-lock.locked{opacity:1}
.hue-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #00000066;margin-right:6px;vertical-align:-1px}
.palette-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:8px 0 4px}
.palette-row button{height:20px;border-radius:5px;border:1px solid #00000055;cursor:pointer;padding:0}
.palette-row button:hover{outline:1px solid var(--paper)}
:focus-visible{outline:2px solid var(--acid);outline-offset:1px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.layer-thumb{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.layer-eye,.layer-del,.layer-lock{border:0;cursor:pointer;font-family:inherit}
.project-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.project-rename,.project-delete{border:0;cursor:pointer;font-family:inherit}
.look-apply{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.look-share,.look-delete{border:0;cursor:pointer;font-family:inherit}
.save-state{font-size:10px;color:#8fd5a6;opacity:0;transition:opacity .3s;white-space:nowrap}
.save-state.show{opacity:1}
.project-switcher{background:#292620;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:11px;max-width:150px}
.size-estimate{font-size:10px;color:var(--muted);margin:-14px 2px 18px;padding:0 13px}
@media(max-width:560px){.project-switcher,.history-scrub{display:none}}
.help-note{position:fixed;z-index:39;max-width:215px;background:#131210f2;border:1px solid #4d493d;border-radius:9px;padding:8px 10px;font-size:10px;line-height:1.45;color:#d5cfbf;pointer-events:none;box-shadow:0 8px 24px #0007}
.tour-target{outline:2px solid var(--acid);outline-offset:2px;border-radius:8px}
#tourButton.active{color:var(--acid)}
.model-progress{height:3px;background:#2e2b25;border-radius:99px;overflow:hidden;margin:-12px 2px 18px}
.model-progress span{display:block;height:100%;width:0;background:var(--acid);transition:width .15s}
.local-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.local-chip{border:1px solid var(--line);background:#28251f;border-radius:8px;padding:9px 6px;font-size:10px;cursor:pointer;color:var(--muted)}
.local-chip.selected{border-color:var(--acid);color:var(--paper)}
.preset{position:relative}
.look-delete{position:absolute;top:5px;right:5px;background:#131210cc;border-radius:5px;color:var(--paper);font-size:9px;font-style:normal;line-height:1;padding:3px 5px}
.look-delete:hover{color:var(--coral)}
.look-share{position:absolute;top:5px;left:5px;background:#131210cc;border-radius:5px;color:var(--paper);font-size:9px;font-style:normal;line-height:1;padding:3px 5px}
.look-share:hover{color:var(--acid)}
.preset span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.toolrail{grid-template-columns:repeat(8,1fr)}}

.palette-overlay{position:fixed;inset:0;z-index:60;background:#0d0c0aa6;display:flex;justify-content:center;align-items:flex-start;padding:11vh 16px 0}
.palette{width:min(560px,100%);background:var(--panel);border:1px solid #4d493d;border-radius:13px;box-shadow:var(--shadow);overflow:hidden}
.palette input{width:100%;border:0;background:transparent;color:var(--paper);padding:15px 17px;font-size:15px;outline:none;border-bottom:1px solid var(--line)}
#paletteList{max-height:min(330px,52vh);overflow-y:auto;padding:6px}
.palette-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.palette-item .hint{color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.palette-item.active{background:var(--panel2);box-shadow:inset 2px 0 0 var(--acid)}
.palette-empty{padding:16px;color:var(--muted);font-size:12px;text-align:center}
.palette-hint{margin:0;padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;display:flex;gap:10px}
.palette-flash{outline:2px solid var(--acid);outline-offset:3px;border-radius:4px}
.watermark-input{width:100%;background:#292620;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:9px 10px;font-size:12px;margin:4px 0 2px}
.watermark-input::placeholder{color:#7f796f}
.segmented.five{grid-template-columns:repeat(5,1fr)}
.navigator{position:absolute;top:14px;right:14px;z-index:6;border:1px solid #4d493d;border-radius:9px;background:#131210e8;padding:5px;box-shadow:0 10px 30px #0006;cursor:crosshair;touch-action:none}
.navigator canvas{display:block;border-radius:5px}
.nav-rect{position:absolute;border:1.5px solid var(--acid);border-radius:2px;pointer-events:none;box-shadow:0 0 0 200px #0d0c0a55}
.navigator{overflow:hidden}
@media(max-width:560px){.navigator{display:none}}
#histogramCanvas{cursor:ew-resize;touch-action:none}

#longEdgeInput{width:96px;background:#292620;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px}

.swap-row{display:flex;align-items:center;gap:9px;margin:10px 0}
.swap-row .secondary-button{width:auto;flex:1;margin-top:0}
.swap-chip{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);flex:none}
.swap-chip.is-empty{background:repeating-linear-gradient(45deg,#28251f 0 4px,#1b1916 4px 8px)!important}
.swap-arrow{color:var(--muted);flex:none}
.swap-row input[type=color]{width:34px;height:26px;border:1px solid var(--line);background:none;padding:2px;flex:none}

.info-pop{position:fixed;z-index:41;width:260px;background:var(--panel2);border:1px solid #4d493d;border-radius:12px;padding:13px 15px;box-shadow:var(--shadow)}
.info-pop h3{margin:0 0 8px;font:italic 600 17px Georgia,serif;color:var(--acid)}
.info-pop p{margin:0 0 6px;font-size:11px;color:#c8c2b7;line-height:1.45}
.info-pop strong{color:var(--muted);font-weight:600;display:inline-block;min-width:64px}
.info-pop .info-note{margin-top:9px;color:#7f796f;font-size:10px}
#infoButton.active{color:var(--acid)}

.help-shortcuts{max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;pointer-events:none}
.help-shortcuts strong{grid-column:1/-1;color:var(--acid);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.help-shortcuts em{font-style:normal;color:var(--paper);font-weight:600}

.ratio-custom{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11px;color:var(--muted)}
.ratio-custom input[type=number]{width:52px;background:#292620;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px}
.ratio-custom .secondary-button{width:auto;flex:1;margin-top:0}

.proof-control{margin:8px 0 0;font-size:10px}
.proof-control select{padding:5px 7px;font-size:11px}