:root{--bg:#13151a;--panel:#1b1e25;--panel-2:#23272f;--line:#30353f;--ink:#e7e3d8;--ink-dim:#9aa0ab;--brass:#c8a24a;--brass-dim:#8c7333;--danger:#b5563f;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;}
  .wrap{max-width:1280px;margin:0 auto;padding:18px 16px 60px;}
  header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;}
  h1{font-family:"Oswald",system-ui,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:26px;margin:0;}
  h1 span{color:var(--brass);} .tag{font-size:13px;color:var(--ink-dim);}
  #drop{display:block;border:1.5px dashed var(--line);border-radius:12px;padding:34px 18px;text-align:center;color:var(--ink-dim);cursor:pointer;transition:.15s;background:var(--panel);}
  #file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
  #drop.hot{border-color:var(--brass);color:var(--ink);background:var(--panel-2);}
  #drop strong{color:var(--brass);font-family:"Oswald",sans-serif;letter-spacing:.04em;} #drop small{display:block;margin-top:8px;font-size:12px;}
  #stage{display:none;} #stage.on{display:block;}
  .canvas-shell{position:relative;overflow:hidden;min-height:220px;touch-action:none;background:repeating-conic-gradient(#1f2229 0% 25%, #191c22 0% 50%) 50%/22px 22px;border:1px solid var(--line);border-radius:12px;}
  canvas{position:absolute;top:0;left:0;transform-origin:0 0;touch-action:none;cursor:crosshair;display:block;}
  .scanning{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0b0c0fcc;color:var(--brass);font-family:"Oswald",sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:14px;}
  .zoombar{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .zoombar .zlabel{font-size:12px;color:var(--ink-dim);min-width:46px;text-align:center;}
  .zbtn{width:38px;height:34px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:18px;cursor:pointer;line-height:1;}
  .zbtn:hover{border-color:var(--brass-dim);} .zoombar .spacer{flex:1;}
  .tools{margin-top:14px;display:grid;gap:14px;}
  .row{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
  .row h2{font-family:"Oswald",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink-dim);margin:0 0 10px;}
  .pots{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  .pot{width:34px;height:34px;border-radius:50%;border:2px solid #00000055;cursor:pointer;position:relative;box-shadow:inset 0 -6px 8px #00000055, 0 1px 2px #00000088;transition:.12s;}
  .pot:hover{transform:translateY(-2px);} .pot.sel{outline:2px solid var(--brass);outline-offset:2px;}
  .pot.custom{display:flex;align-items:center;justify-content:center;background:var(--panel-2);border-style:dashed;border-color:var(--brass-dim);overflow:hidden;}
  .pot.custom input{opacity:0;position:absolute;inset:0;cursor:pointer;} .pot.custom svg{width:16px;height:16px;stroke:var(--brass);fill:none;}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
  .seg button{background:var(--panel-2);color:var(--ink-dim);border:0;padding:9px 13px;font-size:13px;cursor:pointer;font-family:inherit;border-right:1px solid var(--line);}
  .seg button:last-child{border-right:0;} .seg button.on{background:var(--brass);color:#1a1407;font-weight:600;}
  .sliders{display:flex;gap:18px;flex-wrap:wrap;} .ctl{flex:1;min-width:140px;}
  .ctl label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);margin-bottom:6px;}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:var(--panel-2);outline:none;margin:6px 0;cursor:pointer;}
  input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:var(--line);}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:var(--brass);border:0;box-shadow:0 1px 2px #00000088;}
  input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:var(--line);}
  input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brass);border:0;}
  input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--brass);outline-offset:2px;}
  .bgline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .bgline .ctl{min-width:160px;}
  .actions{display:flex;gap:10px;flex-wrap:wrap;}
  .btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;gap:7px;align-items:center;}
  .btn:hover{border-color:var(--brass-dim);} .btn.gold{background:var(--brass);color:#1a1407;border-color:var(--brass);font-weight:600;}
  .btn.warn:hover{border-color:var(--danger);color:#e9a594;} .btn[disabled]{opacity:.4;cursor:default;}
  .hint{font-size:12.5px;color:var(--ink-dim);line-height:1.5;margin-top:8px;} .hint b{color:var(--ink);font-weight:600;}
  .viewer{min-width:0;}
  .palette-col{display:grid;gap:14px;align-content:start;margin-top:14px;}
  .pot.saved{position:relative;}
  .pot.saved .x{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--ink-dim);font-size:12px;line-height:13px;text-align:center;cursor:pointer;}
  .pot.saved .x:hover{color:#e9a594;border-color:var(--danger);}
  #saved:empty::after{content:"None yet — pick a custom colour, then Save.";font-size:12px;color:var(--ink-dim);}
  @media (min-width:1080px){
    #stage.on{display:flex;align-items:flex-start;gap:16px;}
    .palette-col{order:1;flex:0 0 158px;margin-top:0;position:sticky;top:16px;}
    .viewer{order:2;flex:1 1 auto;}
    .tools{order:3;flex:0 0 300px;margin-top:0;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brass-dim) transparent;padding-right:4px;}
    .tools::-webkit-scrollbar{width:8px;}
    .tools::-webkit-scrollbar-track{background:transparent;}
    .tools::-webkit-scrollbar-thumb{background:var(--brass-dim);border-radius:8px;border:2px solid var(--bg);}
    .tools::-webkit-scrollbar-thumb:hover{background:var(--brass);}
  }