@font-face {
  font-family:"Press Start 2P Local";
  src:url("fonts/PressStart2P-latin.ttf") format("truetype");
  font-display:block;
}

:root {
    --ink:#17131b;
    --ink-2:#292332;
    --ink-3:#40394d;
    --panel:#c9c4c2;
    --panel-hi:#eee9e5;
    --slot:#72707b;
    --grass:#5fa832;
    --grass-hi:#83d44c;
    --dirt:#392417;
    --gold:#ffd94a;
    --cyan:#8be8e1;
    --pink:#ff80c7;
    --danger:#d84a4a;
    --px:"Press Start 2P Local",ui-monospace,Consolas,monospace;
  }

  * { box-sizing:border-box; }
  html { min-height:100%; background:#67b5e9; }
  body {
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    color:#fff;
    font-family:var(--px);
    background:
      linear-gradient(180deg,rgba(255,255,255,.16),transparent 30%),
      linear-gradient(#67b5e9 0 58%,#8fd6f0 58% 60%,#5fa832 60% 64%,#714829 64%);
    image-rendering:pixelated;
  }
  body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:50;
    pointer-events:none;
    opacity:.065;
    background:repeating-linear-gradient(180deg,rgba(0,0,0,.8) 0 1px,transparent 1px 3px);
  }
  body::after {
    content:"";
    position:fixed;
    inset:0;
    z-index:49;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 40%,transparent 42%,rgba(0,0,0,.48) 100%);
  }

  button,input,textarea,select { font:inherit; }
  button,a { -webkit-tap-highlight-color:transparent; }
  button { color:inherit; }
  .hidden { display:none !important; }
  .sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .clouds,.terrain { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
  .clouds { z-index:0; }
  .cloud {
    position:absolute;
    width:138px;
    height:34px;
    opacity:.72;
    background:#eaf7ff;
    box-shadow:32px -18px 0 #eaf7ff,64px 0 0 #eaf7ff,96px -12px 0 #eaf7ff;
  }
  .cloud:nth-child(1) { left:6%; top:9%; transform:scale(.7); }
  .cloud:nth-child(2) { right:12%; top:17%; transform:scale(.5); }
  .terrain { z-index:0; top:auto; height:40vh; opacity:.42; }
  .terrain::before {
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(90deg,transparent 0 31px,rgba(37,21,17,.2) 31px 39px,transparent 39px 78px),
      repeating-linear-gradient(0deg,rgba(37,21,17,.24) 0 30px,transparent 30px 61px);
  }

  .app {
    position:relative;
    z-index:2;
    width:min(1540px,calc(100% - 28px));
    margin:0 auto;
    padding:14px 0 82px;
  }

  .sitebar {
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:8px 12px;
    border:3px solid #000;
    background:rgba(23,19,27,.94);
    box-shadow:6px 6px 0 rgba(0,0,0,.35);
  }
  .brand { display:flex; align-items:center; gap:12px; min-width:0; }
  .brand-cube {
    width:34px;
    height:34px;
    flex:0 0 auto;
    border:3px solid #000;
    background:var(--grass);
    box-shadow:inset 0 9px 0 var(--grass-hi),inset 9px 0 0 rgba(255,255,255,.12),4px 4px 0 #000;
  }
  .brand-copy { min-width:0; }
  .brand-copy strong {
    display:block;
    overflow:hidden;
    color:#fff;
    font-size:clamp(.63rem,1.6vw,.95rem);
    line-height:1.5;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:3px 3px 0 #000;
  }
  .brand-copy .brand-short { display:none; }
  .brand-copy > .brand-subtitle { display:block; margin-top:2px; color:var(--cyan); font-size:.38rem; line-height:1.5; }
  .site-actions { display:flex; align-items:center; gap:8px; }

  .pixel-button,.icon-button,.seg-button,.tab-button,.tool-button,.asset-card {
    appearance:none;
    border:3px solid #000;
    border-radius:0;
    background:var(--slot);
    color:#fff;
    cursor:pointer;
    text-decoration:none;
    box-shadow:inset 2px 2px 0 rgba(255,255,255,.32),inset -2px -2px 0 rgba(0,0,0,.38);
  }
  .pixel-button {
    display:inline-flex;
    min-height:38px;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:9px 12px;
    font-size:.43rem;
    line-height:1.5;
  }
  .pixel-button:hover,.icon-button:hover,.seg-button:hover,.tab-button:hover,.tool-button:hover { background:#96939f; }
  .pixel-button:active,.icon-button:active,.seg-button:active,.tab-button:active,.tool-button:active { transform:translateY(2px); }
  .pixel-button.primary { background:var(--grass); }
  .pixel-button.primary:hover { background:var(--grass-hi); }
  .pixel-button.gold { background:#a27d13; }
  .pixel-button.danger { background:#993a3a; }
  .pixel-button:disabled { opacity:.5; cursor:wait; transform:none; }
  .pixel-button:focus-visible,.icon-button:focus-visible,.seg-button:focus-visible,.tab-button:focus-visible,.tool-button:focus-visible,.asset-card:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:3px;
  }

  .workspace {
    display:grid;
    grid-template-columns:minmax(350px,430px) minmax(0,1fr);
    gap:14px;
    margin-top:14px;
    align-items:start;
  }
  .pixel-panel {
    border:3px solid #000;
    background:var(--panel);
    color:var(--ink);
    box-shadow:inset 3px 3px 0 rgba(255,255,255,.56),inset -3px -3px 0 rgba(0,0,0,.3),7px 7px 0 rgba(0,0,0,.4);
  }

  .left-pane { min-height:755px; }
  .pane-title {
    display:flex;
    min-height:52px;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-bottom:3px solid #000;
    background:var(--ink-2);
    color:#fff;
  }
  .pane-title h1,.pane-title h2 { margin:0; font-size:.58rem; line-height:1.6; text-shadow:2px 2px 0 #000; }
  .status-chip {
    flex:0 0 auto;
    padding:7px;
    border:2px solid #000;
    background:var(--gold);
    color:var(--ink);
    font-size:.37rem;
  }
  .tabs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3px;
    padding:8px;
    border-bottom:3px solid #4a464a;
    background:#9d9898;
  }
  .tab-button {
    min-height:38px;
    padding:7px 5px;
    font-size:.36rem;
  }
  .tab-button[aria-selected="true"] {
    background:var(--ink-2);
    color:var(--cyan);
    box-shadow:inset 0 -4px 0 var(--cyan);
  }
  .left-view { padding:13px; }
  .field { margin-bottom:14px; }
  .field-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:7px;
    font-size:.4rem;
    line-height:1.6;
  }
  .field-label small { color:#55505d; font-size:.31rem; }
  textarea,select,input[type="file"],input[type="text"] {
    width:100%;
    border:3px solid var(--ink);
    border-radius:0;
    background:var(--panel-hi);
    color:var(--ink);
    padding:10px;
    font-size:.43rem;
    line-height:1.8;
    box-shadow:inset 2px 2px 0 rgba(0,0,0,.18);
  }
  textarea { min-height:118px; resize:vertical; }
  textarea:focus,select:focus,input:focus { outline:3px solid var(--gold); outline-offset:1px; }
  .segmented { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
  .segmented.three { grid-template-columns:repeat(3,1fr); }
  .seg-button { min-height:38px; padding:7px; font-size:.38rem; }
  .seg-button[aria-pressed="true"] { background:var(--ink-2); color:var(--cyan); }
  .palette-row { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
  .palette-choice {
    min-height:47px;
    padding:5px;
    border:3px solid #000;
    background:#777;
    cursor:pointer;
    box-shadow:inset 2px 2px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(0,0,0,.35);
  }
  .palette-choice span { display:block; height:100%; min-height:28px; border:2px solid rgba(0,0,0,.35); }
  .palette-choice:nth-child(1) span { background:linear-gradient(90deg,#83d44c 0 25%,#5fa832 25% 50%,#714829 50% 75%,#392417 75%); }
  .palette-choice:nth-child(2) span { background:linear-gradient(90deg,#e1b1ff 0 25%,#9f49da 25% 50%,#57227e 50% 75%,#24102f 75%); }
  .palette-choice:nth-child(3) span { background:linear-gradient(90deg,#cbd2d8 0 25%,#858f99 25% 50%,#4c5660 50% 75%,#252a30 75%); }
  .palette-choice:nth-child(4) span { background:linear-gradient(90deg,#fff0a6 0 25%,#ff9e35 25% 50%,#ce3d25 50% 75%,#521c25 75%); }
  .palette-choice[aria-pressed="true"] { outline:3px solid #fff; outline-offset:-7px; }
  .file-wrap {
    position:relative;
    display:grid;
    min-height:68px;
    place-items:center;
    border:3px dashed #5c5762;
    background:#b5b0b0;
    text-align:center;
  }
  .file-wrap input { position:absolute; inset:0; opacity:0; cursor:pointer; }
  .file-wrap span { padding:10px; font-size:.36rem; line-height:1.8; pointer-events:none; }
  .file-wrap strong { color:#3d3560; }
  .turnstile-wrap {
    display:grid;
    gap:7px;
    margin:0 0 14px;
    padding:10px;
    border:3px solid var(--ink);
    background:#a8a3a9;
  }
  .turnstile-wrap[hidden] { display:none; }
  .turnstile-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:var(--ink);
    font-size:.32rem;
    line-height:1.6;
  }
  .turnstile-label small { color:#514b55; font-size:.28rem; }
  #turnstileWidget { min-height:65px; overflow:hidden; }
  .generate-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
  .generate-row .pixel-button { min-height:48px; }
  .generate-count {
    display:grid;
    min-width:56px;
    place-items:center;
    border:3px solid #000;
    background:var(--ink-2);
    color:var(--gold);
    font-size:.45rem;
  }
  .helper { margin:9px 0 0; color:#514b55; font-size:.36rem; line-height:1.9; }
  .output-controls {
    margin:0 0 14px;
    border:3px solid var(--ink);
    background:#b7b2b2;
  }
  .output-controls summary {
    display:flex;
    min-height:38px;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    background:#8f8a91;
    color:var(--ink);
    cursor:pointer;
    font-size:.38rem;
    line-height:1.5;
    list-style:none;
  }
  .output-controls summary::-webkit-details-marker { display:none; }
  .output-controls summary::after { content:"+"; color:#fff; font-size:.55rem; }
  .output-controls[open] summary::after { content:"-"; }
  .output-controls summary small { color:#38333c; font-size:.28rem; }
  .output-controls-body {
    display:grid;
    gap:11px;
    padding:10px;
    border-top:3px solid var(--ink);
  }
  .compact-setting .field-label { margin-bottom:5px; font-size:.34rem; }
  .compact-setting .seg-button { min-height:34px; padding:6px 3px; font-size:.29rem; }
  .reference-weight[aria-disabled="true"] { opacity:.48; }
  .reference-weight input:disabled { cursor:not-allowed; }
  .inline-status {
    min-height:58px;
    margin-top:12px;
    padding:10px;
    border:3px solid #000;
    background:var(--ink-2);
    color:#fff;
    font-size:.36rem;
    line-height:1.8;
    white-space:pre-wrap;
  }
  .inline-status[data-kind="ok"] { color:var(--cyan); }
  .inline-status[data-kind="error"] { color:#ffaaaa; }

  .collection-toolbar {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-bottom:10px;
  }
  .collection-toolbar input { min-width:0; }
  .collection-meta { margin:0 0 10px; color:#514b55; font-size:.36rem; line-height:1.7; }
  .asset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .asset-card {
    position:relative;
    min-width:0;
    padding:5px;
    background:#57545f;
  }
  .asset-card[aria-current="true"] { outline:3px solid var(--cyan); outline-offset:1px; }
  .asset-card canvas {
    display:block;
    width:100%;
    aspect-ratio:1;
    background:repeating-conic-gradient(#34333d 0 25%,#24232b 0 50%) 0/10px 10px;
    image-rendering:pixelated;
  }
  .asset-card span {
    display:block;
    overflow:hidden;
    padding:6px 1px 2px;
    font-size:.31rem;
    line-height:1.5;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .asset-card .favorite-mark {
    position:absolute;
    top:7px;
    right:7px;
    display:none;
    color:var(--gold);
    font-size:.55rem;
    text-shadow:2px 2px #000;
  }
  .asset-card[data-favorite="true"] .favorite-mark { display:block; }
  .empty-collection {
    grid-column:1/-1;
    padding:36px 12px;
    border:3px dashed #736d77;
    color:#5c5660;
    text-align:center;
    font-size:.36rem;
    line-height:2;
  }

  .studio-pane { min-height:755px; background:rgba(23,19,27,.96); color:#fff; }
  .studio-header {
    display:flex;
    min-height:70px;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 12px;
    border-bottom:3px solid #000;
  }
  .asset-heading { min-width:0; }
  .asset-heading small { display:block; margin-bottom:5px; color:var(--cyan); font-size:.31rem; }
  .asset-heading h2 {
    overflow:hidden;
    margin:0;
    font-size:.65rem;
    line-height:1.6;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:2px 2px 0 #000;
  }
  .studio-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
  .studio-actions .hidden-file { display:none; }
  .icon-button {
    min-height:36px;
    padding:8px 10px;
    font-size:.36rem;
  }
  .icon-button.active { background:#8d6c15; color:#fff2a2; }
  .studio-tabs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding:8px;
    border-bottom:3px solid #000;
    background:#302a39;
  }
  .studio-tabs .tab-button { background:#3f394a; }
  .studio-tabs .tab-button[aria-selected="true"] { background:#25212d; color:var(--cyan); }

  .studio-view { min-height:612px; }
  .editor-layout {
    display:grid;
    grid-template-columns:58px minmax(320px,1fr) minmax(188px,235px);
    min-height:612px;
  }
  .tool-rail {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border-right:3px solid #000;
    background:#302a39;
  }
  .tool-button {
    width:38px;
    height:38px;
    padding:0;
    background:#55505d;
    font-size:.28rem;
    line-height:1.1;
  }
  .tool-button[aria-pressed="true"] { background:#7a5fa0; outline:2px solid var(--cyan); outline-offset:0; }
  .tool-button.utility[aria-pressed="true"] { background:#2f6f78; }
  .tool-spacer { flex:1; }

  .canvas-stage {
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px;
    overflow:hidden;
    background:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
      #1d1923;
    background-size:24px 24px;
  }
  .canvas-frame {
    position:relative;
    display:grid;
    width:min(100%,620px);
    aspect-ratio:1;
    place-items:center;
    border:4px solid #000;
    background:repeating-conic-gradient(#34333d 0 25%,#24232b 0 50%) 0/24px 24px;
    box-shadow:inset 3px 3px 0 rgba(255,255,255,.08),8px 8px 0 rgba(0,0,0,.38);
  }
  #pixelCanvas {
    display:block;
    width:100%;
    height:100%;
    cursor:crosshair;
    image-rendering:pixelated;
    touch-action:none;
  }
  #pixelCanvas:focus-visible { outline:4px solid var(--gold); outline-offset:-4px; }
  .canvas-grid {
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background-size:calc(100% / 16) calc(100% / 16);
    background-image:linear-gradient(to right,#fff 1px,transparent 1px),linear-gradient(to bottom,#fff 1px,transparent 1px);
  }
  .canvas-info {
    display:flex;
    width:min(100%,620px);
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#a9a3b0;
    font-size:.35rem;
    line-height:1.6;
  }
  .canvas-info strong { color:var(--cyan); }

  .inspector {
    border-left:3px solid #000;
    background:#c9c4c2;
    color:var(--ink);
  }
  .inspect-section { padding:12px; border-bottom:3px solid #5b5660; }
  .inspect-section h3 { margin:0 0 10px; font-size:.39rem; line-height:1.6; }
  .color-line { display:grid; grid-template-columns:52px 1fr; gap:8px; }
  #colorPicker {
    width:52px;
    height:42px;
    padding:3px;
    border:3px solid #000;
    border-radius:0;
    background:#fff;
  }
  #hexColor { min-width:0; padding:7px; text-transform:uppercase; }
  .swatches { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
  .swatch {
    aspect-ratio:1;
    padding:0;
    border:3px solid #000;
    cursor:pointer;
    box-shadow:inset 2px 2px 0 rgba(255,255,255,.32),inset -2px -2px 0 rgba(0,0,0,.28);
  }
  .swatch[aria-pressed="true"] { outline:3px solid #fff; outline-offset:-6px; }
  .slider-row { margin-top:10px; }
  .slider-row label {
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:5px;
    font-size:.34rem;
    line-height:1.5;
  }
  input[type="range"] {
    width:100%;
    accent-color:#7a5fa0;
    cursor:pointer;
  }
  .inspector .pixel-button { width:100%; margin-top:10px; }

  .preview-view { padding:14px; background:#211c28; }
  .preview-modebar {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    margin-bottom:10px;
  }
  .preview-modebar .tab-button {
    min-height:42px;
    background:#484150;
    font-size:.32rem;
  }
  .preview-modebar .tab-button[aria-pressed="true"] {
    background:#25212d;
    color:var(--cyan);
    box-shadow:inset 0 -4px 0 var(--cyan);
  }
  .preview-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    min-height:540px;
    border:3px solid #000;
    background:#16131a;
  }
  .preview-stage {
    --preview-rx:-18deg;
    --preview-ry:35deg;
    --preview-zoom:1;
    --cube-size:210px;
    --cube-half:105px;
    position:relative;
    display:grid;
    min-width:0;
    min-height:540px;
    place-items:center;
    overflow:hidden;
    border-right:3px solid #000;
    perspective:900px;
    touch-action:none;
    cursor:grab;
    background:
      radial-gradient(circle at 50% 38%,rgba(139,232,225,.2),transparent 34%),
      linear-gradient(#26364b 0 64%,#4e7e3b 64% 68%,#302118 68%);
  }
  .preview-stage:active { cursor:grabbing; }
  .preview-stage:focus-visible { outline:4px solid var(--gold); outline-offset:-4px; }
  .preview-stage[data-background="checker"] {
    background:repeating-conic-gradient(#34333d 0 25%,#24232b 0 50%) 0/24px 24px;
  }
  .preview-stage[data-background="night"] {
    background:
      radial-gradient(circle at 50% 38%,rgba(184,91,236,.2),transparent 35%),
      linear-gradient(#12101d 0 66%,#241a2c 66%);
  }
  .preview-horizon {
    position:absolute;
    inset:auto 0 0;
    height:32%;
    opacity:.22;
    pointer-events:none;
    background:
      linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.25) 50%,transparent 50.2%),
      linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.2) 50%,transparent 50.2%);
    background-size:42px 42px;
    transform:perspective(380px) rotateX(64deg) scale(1.35);
    transform-origin:bottom;
  }
  .preview-stage[data-background="checker"] .preview-horizon { display:none; }
  .preview-stage[data-mode="tile"],
  .preview-stage[data-mode="pixels"] {
    cursor:default;
    touch-action:auto;
  }
  .preview-stage[data-mode="tile"][data-background="sky"],
  .preview-stage[data-mode="pixels"][data-background="sky"] {
    background:
      radial-gradient(circle at 50% 45%,rgba(139,232,225,.16),transparent 40%),
      #26364b;
  }
  .preview-stage[data-mode="tile"] .preview-horizon,
  .preview-stage[data-mode="pixels"] .preview-horizon { display:none; }
  .preview-object {
    position:relative;
    width:var(--cube-size);
    height:var(--cube-size);
    transform:rotateX(var(--preview-rx)) rotateY(var(--preview-ry)) scale(var(--preview-zoom));
    transform-style:preserve-3d;
    transition:transform .08s linear;
    will-change:transform;
  }
  .preview-item-object {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    pointer-events:none;
  }
  .preview-item-object::before {
    content:"";
    position:absolute;
    width:42%;
    height:18px;
    bottom:18%;
    border-radius:50%;
    background:rgba(0,0,0,.32);
    filter:blur(9px);
    transform:translate(8%,12%) rotate(-5deg);
  }
  .preview-canvas {
    display:block;
    image-rendering:pixelated;
  }
  .preview-canvas.item {
    width:100%;
    height:100%;
  }
  .item-volume-canvas {
    position:absolute;
    inset:0;
    filter:
      drop-shadow(12px 16px 0 rgba(0,0,0,.2))
      drop-shadow(0 0 11px rgba(139,232,225,.1));
  }
  .texture-cube {
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
  }
  .cube-face {
    position:absolute;
    inset:0;
    border:2px solid rgba(0,0,0,.64);
    background-color:#777;
    background-position:center;
    background-repeat:no-repeat;
    background-size:100% 100%;
    image-rendering:pixelated;
    backface-visibility:hidden;
  }
  .cube-face.front { transform:translateZ(var(--cube-half)); filter:brightness(1.05); }
  .cube-face.back { transform:rotateY(180deg) translateZ(var(--cube-half)); filter:brightness(.62); }
  .cube-face.right { transform:rotateY(90deg) translateZ(var(--cube-half)); filter:brightness(.76); }
  .cube-face.left { transform:rotateY(-90deg) translateZ(var(--cube-half)); filter:brightness(.84); }
  .cube-face.top { transform:rotateX(90deg) translateZ(var(--cube-half)); filter:brightness(1.2); }
  .cube-face.bottom { transform:rotateX(-90deg) translateZ(var(--cube-half)); filter:brightness(.5); }
  .tile-preview,
  .exact-preview {
    position:absolute;
    inset:34px;
    border:4px solid #000;
    box-shadow:12px 12px 0 rgba(0,0,0,.36);
    image-rendering:pixelated;
  }
  .tile-preview {
    background-position:0 0;
    background-repeat:repeat;
    background-size:25% 25%;
  }
  .exact-preview {
    display:grid;
    place-items:center;
    background:repeating-conic-gradient(#34333d 0 25%,#24232b 0 50%) 0/22px 22px;
  }
  .preview-canvas.block { width:min(82%,440px); aspect-ratio:1; }
  .preview-stage[data-mode="item"] .preview-object,
  .preview-stage[data-mode="item"] .tile-preview,
  .preview-stage[data-mode="item"] .exact-preview { display:none; }
  .preview-stage[data-mode="cube"] .preview-item-object,
  .preview-stage[data-mode="cube"] .tile-preview,
  .preview-stage[data-mode="cube"] .exact-preview { display:none; }
  .preview-stage[data-mode="tile"] .preview-object,
  .preview-stage[data-mode="tile"] .preview-item-object,
  .preview-stage[data-mode="tile"] .exact-preview { display:none; }
  .preview-stage[data-mode="pixels"] .preview-object,
  .preview-stage[data-mode="pixels"] .preview-item-object,
  .preview-stage[data-mode="pixels"] .tile-preview { display:none; }
  .preview-readout {
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:7px 9px;
    border:2px solid #000;
    background:rgba(23,19,27,.86);
    color:var(--cyan);
    font-size:.31rem;
    line-height:1.5;
  }
  .preview-hint {
    position:absolute;
    right:10px;
    bottom:9px;
    z-index:2;
    color:rgba(255,255,255,.75);
    font-size:.27rem;
    line-height:1.5;
    text-shadow:2px 2px 0 #000;
  }
  .preview-inspector {
    background:#c9c4c2;
    color:var(--ink);
  }
  .preview-inspector section { padding:12px; border-bottom:3px solid #77717a; }
  .preview-inspector h3 { margin:0 0 10px; font-size:.36rem; line-height:1.6; }
  .preview-inspector .pixel-button { width:100%; margin-top:7px; }
  .camera-presets {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin-top:10px;
  }
  .camera-presets .pixel-button {
    min-width:0;
    margin:0;
    padding:7px 3px;
    font-size:.27rem;
  }
  .camera-presets .pixel-button.active {
    background:#2f6f78;
    color:#fff;
    box-shadow:inset 0 -3px 0 var(--cyan);
  }
  .backdrop-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .backdrop-button {
    min-height:38px;
    border:3px solid #000;
    cursor:pointer;
    box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.35);
  }
  .backdrop-button[data-preview-background="sky"] { background:linear-gradient(#5d92c7 0 65%,#5fa832 65%); }
  .backdrop-button[data-preview-background="checker"] { background:repeating-conic-gradient(#555 0 25%,#292929 0 50%) 0/10px 10px; }
  .backdrop-button[data-preview-background="night"] { background:linear-gradient(#171427 0 65%,#33223f 65%); }
  .backdrop-button[aria-pressed="true"] { outline:3px solid #fff; outline-offset:-7px; }
  .preview-note { margin:8px 0 0; color:#554f59; font-size:.3rem; line-height:1.75; }

  .details-view { padding:18px; }
  .details-card {
    max-width:780px;
    margin:0 auto;
    border:3px solid #000;
    background:#c9c4c2;
    color:var(--ink);
    box-shadow:7px 7px 0 rgba(0,0,0,.4);
  }
  .details-card h3 {
    margin:0;
    padding:13px;
    border-bottom:3px solid #000;
    background:#4a4355;
    color:#fff;
    font-size:.48rem;
  }
  .detail-row {
    display:grid;
    grid-template-columns:190px 1fr;
    gap:15px;
    padding:13px;
    border-bottom:2px solid #8a858c;
    font-size:.36rem;
    line-height:1.8;
  }
  .detail-row:last-child { border-bottom:0; }
  .detail-row strong { color:#51456d; }
  .detail-row input { min-width:0; }

  .statusbar {
    position:fixed;
    z-index:20;
    left:50%;
    bottom:10px;
    display:flex;
    width:min(900px,calc(100% - 24px));
    min-height:44px;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:8px 12px;
    transform:translateX(-50%);
    border:3px solid #000;
    background:rgba(23,19,27,.94);
    box-shadow:5px 5px 0 rgba(0,0,0,.35);
    color:#d6d2db;
    font-size:.35rem;
    line-height:1.6;
  }
  .statusbar span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .statusbar strong { flex:0 0 auto; color:var(--gold); }
  .site-footer {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px;
    margin:24px 0 0;
    color:rgba(255,255,255,.85);
    font-size:.31rem;
    line-height:1.8;
    text-align:center;
    text-shadow:2px 2px 0 #000;
  }
  .site-footer a { color:#fff; }
  .site-footer a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

  @media (max-width:1100px) {
    .workspace { grid-template-columns:350px minmax(0,1fr); }
    .editor-layout { grid-template-columns:54px minmax(280px,1fr); }
    .inspector { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-top:3px solid #000; border-left:0; }
    .inspect-section { border-right:3px solid #5b5660; border-bottom:0; }
    .inspect-section:last-child { border-right:0; }
    .preview-workspace { grid-template-columns:1fr; }
    .preview-stage { min-height:470px; border-right:0; border-bottom:3px solid #000; }
    .preview-inspector { display:grid; grid-template-columns:repeat(3,1fr); }
    .preview-inspector section { border-right:3px solid #77717a; border-bottom:0; }
    .preview-inspector section:last-child { border-right:0; }
  }
  @media (max-width:840px) {
    .app { width:min(100% - 18px,720px); padding-top:9px; }
    .workspace { grid-template-columns:1fr; }
    .left-pane,.studio-pane { min-height:0; }
    .sitebar { align-items:flex-start; }
    .brand-copy > .brand-subtitle { display:none; }
    .studio-header { align-items:flex-start; }
    .editor-layout { min-height:0; }
  }
  @media (max-width:560px) {
    .app { width:calc(100% - 10px); }
    .sitebar { gap:8px; padding:7px; }
    .brand { gap:8px; }
    .brand-cube { width:28px; height:28px; }
    .brand-copy .brand-full { display:none; }
    .brand-copy .brand-short { display:inline; }
    .site-actions .pixel-button:first-child { display:none; }
    .site-actions .pixel-button { padding:7px; font-size:.34rem; }
    .left-view { padding:9px; }
    .asset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .studio-header { flex-direction:column; }
    .studio-actions { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .studio-actions .pixel-button { min-width:0; padding:8px 4px; font-size:.3rem; }
    .studio-actions #downloadButton { grid-column:1/-1; }
    .editor-layout { grid-template-columns:46px minmax(0,1fr); }
    .tool-rail { padding:6px 4px; align-items:center; }
    .tool-button { width:34px; height:34px; }
    .canvas-stage { padding:10px; }
    .canvas-info { align-items:flex-start; flex-direction:column; gap:4px; }
    .inspector { grid-template-columns:1fr; }
    .inspect-section { border-right:0; border-bottom:3px solid #5b5660; }
    .inspect-section:last-child { border-bottom:0; }
    .preview-view,.details-view { padding:9px; }
    .preview-modebar { grid-template-columns:repeat(2,1fr); }
    .preview-stage {
      --cube-size:156px;
      --cube-half:78px;
      min-height:390px;
    }
    .preview-workspace { min-height:390px; }
    .preview-inspector { grid-template-columns:1fr; }
    .preview-inspector section { border-right:0; border-bottom:3px solid #77717a; }
    .preview-inspector section:last-child { border-bottom:0; }
    .tile-preview,.exact-preview { inset:18px; }
    .detail-row { grid-template-columns:1fr; gap:4px; }
    .statusbar {
      position:relative;
      left:auto;
      bottom:auto;
      width:calc(100% - 10px);
      margin:10px auto 14px;
      transform:none;
    }
    .statusbar span:first-child { font-size:.27rem; }
  }
  @media (prefers-reduced-motion:reduce) {
    * { scroll-behavior:auto !important; }
  }