/* nftpad studio. A tool, so fixed pixels, not the fluid site scale. -------- */

:root{
  --bg:#e9e9e9;
  --ink:#000;
  --ink-50:rgba(0,0,0,.5);
  --ink-30:rgba(0,0,0,.32);
  --grey:#747474;
  --card:#fff;
  --chip:#f2f2f2;
  --line:rgba(0,0,0,.10);
  --line-2:rgba(0,0,0,.20);
  --dark:#0b0b0d;
  --accent:#6c4df6;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:12px;
  --r-sm:8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Onest',system-ui,sans-serif;font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4,.kh{font-family:'Chakra Petch',monospace;font-weight:600;letter-spacing:-.01em}
::selection{background:#000;color:#fff}
.mono{font-family:'Chakra Petch',monospace}
.grey{color:var(--grey)}
.dim{color:var(--ink-50)}
.grow{flex:1 1 auto;min-width:0}
.row{display:flex;align-items:center;gap:8px}
.row+.row{margin-top:8px}
.spread{justify-content:space-between}
.hr{height:1px;background:var(--line);border:0;margin:26px 0}

/* shell ------------------------------------------------------------------- */
.studio{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.studio-bar{
  display:flex;align-items:center;gap:16px;height:58px;padding:0 16px;flex:0 0 auto;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.wordmark{display:flex;align-items:center;gap:8px;font-family:'Chakra Petch',monospace;font-size:17px;font-weight:600;letter-spacing:-.02em}
.wordmark svg{width:22px;height:22px}

.tabs{display:flex;gap:2px;background:rgba(0,0,0,.06);padding:3px;border-radius:var(--r-sm)}
.tab{
  padding:6px 15px;border-radius:5px;border:0;background:transparent;cursor:pointer;
  font-family:'Chakra Petch',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-50);
}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}

.studio-body{flex:1 1 auto;min-height:0;display:none}
.studio-body.on{display:flex}

.panel{
  width:288px;flex:0 0 288px;overflow-y:auto;padding:16px;
  background:var(--bg);border-right:1px solid var(--line);
}
.panel.right{border-right:0;border-left:1px solid var(--line)}
.panel section{background:var(--card);border-radius:var(--r);padding:14px;margin-bottom:12px}
.panel h4,.eyebrow{
  font-family:'Chakra Petch',monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-50);margin:0 0 10px;font-weight:500;
}

.stage{
  flex:1 1 auto;min-width:0;position:relative;overflow:auto;padding:32px;
  display:flex;align-items:center;justify-content:center;
  background:#dcdcdc;
}
.canvas-stack{
  position:relative;image-rendering:pixelated;border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14),0 18px 44px rgba(0,0,0,.18);
  background:
    linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%),
    linear-gradient(45deg,#cfcfcf 25%,#e4e4e4 25%,#e4e4e4 75%,#cfcfcf 75%);
  background-size:20px 20px;background-position:0 0,10px 10px;
}
.canvas-stack canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
/* the neighbouring layers sit on top of the drawing surface, so they have to
   let every pointer event through to it */
.canvas-stack #cv-below,
.canvas-stack #cv-above{pointer-events:none}
.canvas-stack canvas.smooth{image-rendering:auto}
.canvas-stack #cv-draw{position:relative;cursor:crosshair;touch-action:none}

.scroll-pane{flex:1 1 auto;min-width:0;overflow-y:auto;padding:32px 40px 64px}

/* buttons ----------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap;
  font-family:'Chakra Petch',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .3s var(--ease-out);
}
.btn:hover{border-color:rgba(0,0,0,.45)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-primary{background:#000;border-color:#000;color:#fff}
.btn-primary:hover{background:#25252a;border-color:#25252a}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:rgba(0,0,0,.05);border-color:transparent}
.btn-sm{height:29px;padding:0 10px;font-size:11px}
.btn-icon{width:30px;padding:0}
.btn-danger:hover{border-color:#c02626;color:#c02626}

.pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--chip);
  border-radius:20rem;padding:5px 11px;
  font-family:'Chakra Petch',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}

/* forms ------------------------------------------------------------------- */
input[type=text],input[type=number],select,textarea{
  width:100%;height:34px;padding:0 10px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:'Onest',sans-serif;font-size:13.5px;
}
textarea{height:auto;padding:9px 10px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0;border-color:#000}
label.field{display:block;margin-bottom:14px}
label.field > span{
  display:block;margin-bottom:5px;
  font-family:'Chakra Petch',monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-50);
}
input[type=range]{width:100%;accent-color:#000;height:20px}
input[type=checkbox]{width:auto;height:auto;accent-color:#000}

/* tools ------------------------------------------------------------------- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.tool{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--chip);color:var(--ink-50);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.tool:hover{color:var(--ink);border-color:var(--line-2)}
.tool.on{background:#000;border-color:#000;color:#fff}
.tool svg{width:17px;height:17px}

.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.swatch{aspect-ratio:1;border-radius:4px;border:1px solid var(--line-2);cursor:pointer;padding:0}
.swatch.on{box-shadow:0 0 0 2px #000}
input[type=color]{width:36px;height:32px;padding:0;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);cursor:pointer}

/* lists ------------------------------------------------------------------- */
.list{display:flex;flex-direction:column;gap:4px}
.item{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--chip);cursor:pointer;font-size:13px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.item:hover{border-color:var(--line-2)}
.item.on{background:#000;color:#fff;border-color:#000}
.item.on .meta,.item.on .eye{color:rgba(255,255,255,.65)}
.item .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .meta{font-family:'Chakra Petch',monospace;font-size:11px;color:var(--ink-50)}
.item .thumb{
  width:26px;height:26px;border-radius:4px;flex:0 0 auto;background-color:#fff;
  background-size:cover;image-rendering:pixelated;border:1px solid var(--line-2);
}
.eye{background:none;border:0;color:var(--ink-50);cursor:pointer;padding:2px;line-height:1;font-size:12px}
.eye:hover{color:inherit}
.eye.off{opacity:.3}
.eye:disabled{opacity:.2;cursor:default}

/* preview ----------------------------------------------------------------- */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:12px}
.thumb-card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.thumb-card img{width:100%;display:block;image-rendering:pixelated;background:#fff}
.thumb-card .cap{padding:7px 10px;font-family:'Chakra Petch',monospace;font-size:11px;color:var(--ink-50)}

.card{background:var(--card);border-radius:var(--r);padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}}

.bar{height:6px;border-radius:3px;background:rgba(0,0,0,.1);overflow:hidden}
.bar > i{display:block;height:100%;background:#000;transition:width .15s}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  text-align:left;font-family:'Chakra Petch',monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-50);font-weight:500;
  padding:8px 12px;border-bottom:1px solid var(--line);
}
table.tbl td{padding:8px 12px;border-bottom:1px solid var(--line)}
table.tbl tr:last-child td{border-bottom:0}

pre.code{
  background:#0d0d10;color:#d7d7dd;border-radius:var(--r);
  padding:16px;overflow-x:auto;font-family:'Chakra Petch',monospace;font-size:12.5px;line-height:1.65;
}

.callout{background:var(--card);border-left:4px solid #000;border-radius:0 var(--r) var(--r) 0;padding:16px 18px}
.callout strong{font-family:'Chakra Petch',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.05em}
.callout p{margin-top:6px;font-size:13.5px;color:#3c3c3c}

/* overlays ---------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:#000;color:#fff;border-radius:var(--r-sm);padding:11px 18px;
  font-family:'Chakra Petch',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  z-index:200;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;display:none;align-items:center;justify-content:center;padding:24px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-bg.on{display:flex}
.modal{background:var(--card);border-radius:20px;padding:26px;width:100%;max-width:430px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.modal h3{font-size:20px}

/* small screens ----------------------------------------------------------- */
.small-screen{display:none}
@media (max-width:900px){
  body{overflow:auto}
  .studio{display:none!important}
  .small-screen{display:block;padding:80px 24px;max-width:560px;margin:0 auto}
  .small-screen h1{font-size:32px;letter-spacing:-.02em;margin-bottom:14px}
  .small-screen p{font-size:16px;color:#3c3c3c;margin-bottom:26px}
}

/* what the canvas is currently drawing into ------------------------------- */
.stage-target{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--card);border:1px solid var(--line);border-radius:20rem;
  padding:5px 14px;white-space:nowrap;pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}