:root{
    --bg:#001B2E; --void:#000C14; --deep:#020810;
    --ink:#E8E8E8; --mute:rgba(232,232,232,.55);
    --steel:#7EB8DA; --ice:#B4D7E8;
    --line:rgba(126,184,218,.2); --line2:rgba(126,184,218,.12);
    --panel:rgba(2,8,16,.6);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:300;min-height:100vh}
  .mono{font-family:'IBM Plex Mono',monospace}
  a{color:var(--ice);text-decoration:none}
  a:hover{text-decoration:underline}

  /* nav */
  nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    gap:1rem;padding:.9rem 1.4rem;background:rgba(0,12,20,.82);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
  nav .brand{font-family:'Unica One',sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:1.15rem}
  nav .brand b{color:var(--steel)}
  nav .links{display:flex;gap:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
  nav .links a{color:var(--mute)}
  nav .links a:hover{color:var(--ice);text-decoration:none}

  .app{display:grid;grid-template-columns:1fr 27rem;gap:0;align-items:start}
  @media (max-width:64rem){.app{grid-template-columns:1fr}}

  /* preview */
  .preview{position:sticky;top:3.4rem;height:calc(100vh - 3.4rem);display:flex;flex-direction:column;
    padding:1.4rem;border-right:1px solid var(--line);background:
      radial-gradient(120% 90% at 50% 0%, rgba(126,184,218,.05), transparent 60%)}
  @media (max-width:64rem){.preview{position:relative;height:auto;top:0;border-right:none;border-bottom:1px solid var(--line)}}
  .preview h1{font-family:'Unica One',sans-serif;font-weight:400;letter-spacing:.05em;text-transform:uppercase;
    font-size:1.5rem;margin-bottom:.2rem}
  .preview .lead{color:var(--mute);font-size:.8rem;line-height:1.6;margin-bottom:1rem;max-width:34rem}
  #stagewrap{flex:1;min-height:22rem;display:flex;align-items:center;justify-content:center}
  #dr{width:100%;height:100%;aspect-ratio:auto;border:1px solid var(--line)}
  .frame-corners{position:relative}
  .previewfoot{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}

  /* control panel */
  .panel{padding:1.4rem 1.4rem 6rem;max-height:calc(100vh - 3.4rem);overflow-y:auto}
  @media (max-width:64rem){.panel{max-height:none}}
  .panel::-webkit-scrollbar{width:.5rem}
  .panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:1rem}

  .group{border:1px solid var(--line2);background:var(--panel);margin-bottom:1rem}
  .group>summary{list-style:none;cursor:pointer;padding:.85rem 1rem;display:flex;align-items:center;
    justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ice)}
  .group>summary::-webkit-details-marker{display:none}
  .group>summary::after{content:'+';color:var(--steel);font-size:1rem}
  .group[open]>summary::after{content:'–'}
  .group .body{padding:.4rem 1rem 1.1rem;border-top:1px solid var(--line2)}

  .row{margin:.9rem 0}
  .row:first-child{margin-top:.5rem}
  .row label{display:flex;justify-content:space-between;align-items:baseline;
    font-size:.78rem;color:var(--ink);margin-bottom:.4rem}
  .row label .val{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--steel)}
  .row .hint{font-size:.68rem;color:var(--mute);margin-top:.3rem;line-height:1.5}
  input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:.15rem;background:var(--line);outline:none}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:.85rem;height:.85rem;border-radius:50%;
    background:var(--ice);cursor:pointer;border:.15rem solid var(--deep)}
  input[type=range]::-moz-range-thumb{width:.85rem;height:.85rem;border-radius:50%;background:var(--ice);cursor:pointer;border:none}
  input[type=text]{width:100%;background:var(--deep);border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono',monospace;font-size:.75rem;padding:.5rem .6rem}
  input[type=color]{width:2.4rem;height:1.7rem;background:none;border:1px solid var(--line);cursor:pointer;padding:0}
  .colorrow{display:flex;align-items:center;gap:.6rem}
  .colorrow .hex{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--steel)}

  .toggle{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;font-size:.8rem;cursor:pointer}
  .toggle input{display:none}
  .toggle .sw{width:2.3rem;height:1.2rem;border-radius:1rem;background:var(--line);position:relative;transition:.2s;flex:none}
  .toggle .sw::after{content:'';position:absolute;top:.15rem;left:.15rem;width:.9rem;height:.9rem;border-radius:50%;
    background:var(--mute);transition:.2s}
  .toggle input:checked + .sw{background:rgba(126,184,218,.45)}
  .toggle input:checked + .sw::after{left:1.25rem;background:var(--ice)}

  /* image slots */
  .slot{border:1px dashed var(--line);background:var(--deep);padding:.7rem;margin:.6rem 0;
    display:grid;grid-template-columns:3.2rem 1fr;gap:.7rem;align-items:center;position:relative}
  .slot .thumb{width:3.2rem;height:3.2rem;object-fit:cover;background:var(--void);border:1px solid var(--line2)}
  .slot .meta{min-width:0}
  .slot .meta .name{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slot .meta .sub{font-size:.66rem;color:var(--mute);margin-top:.15rem}
  .slot .meta .req{color:#ff7a7a}
  .slot input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
  .slot .slotref{grid-column:1 / -1;font-size:.62rem;line-height:1.5;color:var(--mute);margin-top:.5rem;
    border-top:1px solid var(--line2);padding-top:.5rem}
  .slot .slotref b{color:var(--ice);font-weight:500}
  .slot .slotref a{color:var(--steel)}
  .slot.multi{grid-template-columns:1fr}
  .framethumbs{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap;align-items:center}
  .framethumbs .fthumb{position:relative;display:inline-block;line-height:0}
  .framethumbs img{width:2.4rem;height:2.4rem;object-fit:cover;border:1px solid var(--line2)}
  .framethumbs .fremove{position:absolute;top:-.4rem;right:-.4rem;width:1.1rem;height:1.1rem;border-radius:50%;
    border:1px solid var(--line);background:var(--deep);color:var(--ice);font-size:.8rem;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .framethumbs .fremove:hover{background:#ff3b3b;color:var(--deep);border-color:#ff3b3b}

  .btn{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    padding:.6rem 1rem;border:1px solid var(--steel);background:transparent;color:var(--ice);cursor:pointer;transition:.15s}
  .btn:hover{background:rgba(126,184,218,.14)}
  .btn.primary{background:var(--steel);color:var(--deep);border-color:var(--steel)}
  .btn.primary:hover{background:var(--ice)}
  .btn.ghost{border-color:var(--line)}
  .btn.sm{padding:.42rem .7rem;font-size:.66rem}

  /* export */
  .exportbox{margin-top:.5rem}
  .tabbar{display:flex;gap:.4rem;margin-bottom:.6rem}
  .tabbar .btn.active{background:rgba(126,184,218,.18)}
  pre{background:var(--void);border:1px solid var(--line);padding:.9rem;overflow:auto;max-height:22rem;
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.6;color:#cfe3ef;white-space:pre;tab-size:2}
  pre .k{color:#7EB8DA}.pre .s{color:#B4D7E8}
  .exportfoot{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
  .toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(2rem);opacity:0;
    background:var(--steel);color:var(--deep);font-family:'IBM Plex Mono',monospace;font-size:.72rem;
    letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.1rem;transition:.25s;z-index:100;pointer-events:none}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .note{font-size:.68rem;color:var(--mute);line-height:1.6;margin-top:.6rem}
  .howto{margin:.6rem 0 .4rem;padding-left:1.1rem;font-size:.74rem;line-height:1.7;color:var(--ink)}
  .howto li{margin-bottom:.35rem}
  .howto b{color:var(--ice);font-weight:500}
  .complist{border:1px solid var(--line2);background:var(--deep);margin:.5rem 0 .3rem}
  .comp{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem .6rem;border-bottom:1px solid var(--line2);font-size:.7rem}
  .comp:last-child{border-bottom:none}
  .comp.opt{opacity:.75}
  .comp .f{font-family:'IBM Plex Mono',monospace;color:var(--ice);white-space:nowrap}
  .comp .w{color:var(--mute);text-align:right}
  .promptbox{max-height:16rem;white-space:pre-wrap;word-break:break-word}
  .filebanner{display:none;background:rgba(126,184,218,.1);border-bottom:1px solid var(--line);
    color:var(--ink);font-size:.74rem;line-height:1.7;padding:.7rem 1.4rem}
  .filebanner b{color:var(--ice)}
  .filebanner code{font-family:'IBM Plex Mono',monospace;color:var(--steel);background:var(--deep);padding:.05rem .3rem}

  /* ── mobile ── */
  @media (max-width:64rem){
    /* the preview no longer has a fixed-height parent, so give the stage a real height
       (height:100% would collapse to 0 here → effect invisible) */
    #stagewrap{min-height:auto}
    #dr{height:auto;aspect-ratio:16/10;max-height:70vh}
  }
  @media (max-width:40rem){
    nav{flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem}
    nav .brand{font-size:1rem}
    /* single scrollable row instead of overflowing/wrapping messily */
    nav .links{width:100%;gap:1rem;font-size:.66rem;flex-wrap:nowrap;overflow-x:auto;
      justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    nav .links::-webkit-scrollbar{display:none}
    nav .links a{flex:0 0 auto;white-space:nowrap}
    .preview{padding:1rem}
    .preview h1{font-size:1.3rem}
    .preview .lead{font-size:.75rem}
    .panel{padding:1rem 1rem 4rem}
    .previewfoot{gap:.5rem}
  }