:root {
  --bg:#0a0514;--panel:#0f0a20;--panel2:#161030;--panel3:#1e1740;
  --border:rgba(255,255,255,.05);--border2:rgba(255,255,255,.11);
  --accent:#7c3aed;--accent2:#f5c842;
  --text:#f0eaff;--muted:#8b86a3;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;}
body{display:flex;flex-direction:column;}

.icon-brief{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border2);background:radial-gradient(circle at 8% 0%,rgba(245,200,66,.2),transparent 34%),linear-gradient(135deg,rgba(124,58,237,.22),rgba(10,5,20,.96));box-shadow:0 16px 42px rgba(0,0,0,.22);flex-shrink:0;}
.icon-brief h1{font-family:'Fredoka',cursive;font-size:1.26rem;line-height:1;color:var(--accent2);margin-bottom:4px;}
.icon-brief p{max-width:620px;font-size:.68rem;line-height:1.45;color:rgba(240,234,255,.72);}
.brief-kicker{margin-bottom:3px !important;color:#c4b5fd !important;text-transform:uppercase;letter-spacing:.14em;font-size:.5rem !important;font-weight:800;}
.brief-steps{display:flex;gap:7px;list-style:none;flex-shrink:0;}
.brief-steps li{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--border2);border-radius:999px;background:rgba(255,255,255,.04);font-size:.58rem;color:rgba(240,234,255,.76);white-space:nowrap;}
.brief-steps strong{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent2);color:#1a1200;font-family:'Fredoka',cursive;font-size:.72rem;}
.brief-help{border:1px solid var(--border2);border-radius:999px;background:rgba(255,255,255,.05);color:var(--text);font-family:inherit;font-size:.68rem;padding:7px 12px;cursor:pointer;white-space:nowrap;}
.brief-help:hover{border-color:var(--accent2);color:var(--accent2);}

#app{flex:1;display:flex;min-height:calc(100vh - 68px - 72px - 32px);min-height:calc(100dvh - 68px - 72px - 32px);}

/* CONTROLS */
#controls{width:310px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border2);overflow-y:auto;padding:14px;}
.ctrl-section{margin-bottom:16px;}
.ctrl-section h3,.ctrl-section h2{font-family:'Fredoka',cursive;font-size:.9rem;color:var(--accent2);margin-bottom:10px;}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.field label{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between;}
.field label span{color:var(--accent2);font-weight:700;}
.field input[type=color]{width:100%;height:30px;background:var(--panel2);border:1px solid var(--border2);border-radius:7px;padding:2px 4px;cursor:pointer;}
.field input[type=range]{width:100%;accent-color:var(--accent2);cursor:pointer;}

/* symbol grid */
.symbol-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px;}
.symbol-btn{aspect-ratio:1;border-radius:9px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:1.25rem;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.symbol-btn:hover{background:var(--panel3);transform:translateY(-1px);}
.symbol-btn.on{border-color:var(--accent2);background:rgba(245,200,66,.12);}

/* palette chips */
.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;}
.palette-chip{aspect-ratio:1.6;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .1s;position:relative;overflow:hidden;}
.palette-chip:hover{transform:scale(1.06);}
.palette-chip.on{border-color:white;}
.palette-chip span{position:absolute;left:4px;bottom:2px;font-size:.45rem;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.8);}

/* option buttons (bg style / corners) */
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.opt-btn{padding:8px 4px;border-radius:8px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:.6rem;color:var(--muted);transition:all .1s;text-align:center;font-family:inherit;}
.opt-btn:hover{background:var(--panel3);color:var(--text);}
.opt-btn.on{border-color:var(--accent2);color:var(--accent2);background:rgba(245,200,66,.12);}

/* effect toggles */
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
.fx-btn{padding:8px 6px;border-radius:8px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:.65rem;color:var(--muted);transition:all .1s;text-align:center;font-family:inherit;}
.fx-btn:hover{background:var(--panel3);color:var(--text);}
.fx-btn.on{background:rgba(245,200,66,.15);border-color:var(--accent2);color:var(--accent2);}

/* action + export buttons */
.act-btn{width:100%;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.88rem;font-weight:700;margin-bottom:6px;transition:all .12s;}
.act-btn:hover{transform:translateY(-1px);}
.act-rand{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;}
.exp-512,.exp-all{background:#22c55e;color:#fff;}
.exp-192{background:#0ea5e9;color:#fff;}
.exp-apple{background:#8b5cf6;color:#fff;}
.exp-fav{background:#14b8a6;color:#fff;}
.exp-save{background:var(--accent2);color:#000;}
.exp-reset{background:transparent;color:var(--muted);border:1px dashed var(--border2) !important;}
.exp-reset:hover{color:#f87171;border-color:#f87171 !important;}
.exp-note{font-size:.55rem;color:var(--muted);line-height:1.6;margin-top:4px;}

/* PREVIEW */
#preview-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px;overflow:auto;}
#cvMain{border-radius:18%;box-shadow:0 8px 40px rgba(124,58,237,.55);max-width:min(430px,72vw);height:auto;background:#111;}
.mini-row{display:flex;gap:26px;align-items:flex-end;justify-content:center;}
.mini-col{display:flex;flex-direction:column;align-items:center;gap:6px;}
.mini-col canvas{border-radius:18%;box-shadow:0 4px 18px rgba(124,58,237,.35);background:#111;}
.canvas-label{font-size:.55rem;color:var(--muted);}
.preview-hint{background:rgba(245,200,66,.06);border:1px solid rgba(245,200,66,.18);border-radius:10px;padding:10px 16px;max-width:520px;font-size:.62rem;color:rgba(240,234,255,.65);line-height:1.7;text-align:center;}
.preview-hint strong{color:var(--accent2);}

#ig-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:10004;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:16px;}
#ig-overlay.show{display:flex;}
.ig-box{background:var(--panel);border:1px solid var(--border2);border-radius:14px;padding:22px;max-width:620px;width:100%;max-height:88vh;overflow-y:auto;}
.ig-title{font-family:'Fredoka',cursive;font-size:1.2rem;color:var(--accent2);margin-bottom:6px;}
.ig-lead{font-size:.72rem;color:var(--muted);line-height:1.7;margin-bottom:16px;}
.ig-sec{font-size:.48rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.ig-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;list-style:none;margin:0;padding:0;}
.ig-steps li{background:rgba(255,255,255,.03);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:9px 11px;font-size:.64rem;line-height:1.6;color:var(--text);}
.ig-steps b{color:var(--accent2);display:block;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
.ig-btn{padding:7px 16px;border-radius:7px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-family:'Fredoka',cursive;font-size:.78rem;font-weight:600;}
.ig-btn:hover{filter:brightness(1.12);}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent2);color:var(--accent2);padding:6px 16px;border-radius:8px;font-size:.72rem;z-index:10005;opacity:0;transition:opacity .3s;pointer-events:none;}

@media(max-width:700px){
  .site-header .header-inner{max-width:100%;padding-inline:10px;gap:6px;}
  .site-header .logo-link{gap:6px;font-size:1rem;min-width:0;}
  .site-header .logo-name{display:none;}
  .site-header .theme-toggle,.site-header .nav-toggle{padding-inline:8px;}
  .icon-brief{align-items:flex-start;flex-direction:column;padding:10px 12px;gap:8px;}
  .icon-brief p{font-size:.62rem;padding-right:52px;}
  .brief-steps{width:100%;overflow-x:auto;padding-bottom:2px;}
  .brief-steps li{font-size:.52rem;}
  .brief-help{position:absolute;right:12px;top:10px;}
  #app{flex-direction:column;}
  /* Live preview first and pinned under the sticky header so learners see the
     icon update while they pick a shape or palette further down the controls. */
  #preview-wrap{order:-1;position:sticky;top:68px;z-index:6;padding:10px 12px;gap:8px;min-height:0;background:var(--bg);border-bottom:1px solid var(--border2);}
  #cvMain{max-width:min(190px,46vw);height:auto !important;}
  .mini-row{display:none;}
  .preview-hint{display:none;}
  #controls{width:100%;border-right:none;border-bottom:1px solid var(--border2);max-height:none;}
}

/* Touch target safety */
@media(pointer:coarse){
  .tb,.bb-tb,.tool-btn,.shape-btn,.char-btn,.tb-btn,.sw,.bb-sw,.colour-swatch,.seq-cell,.loop-dot,.pad,.kit-btn,button {
    min-height:32px;
  }
  .seq-cell{ height:36px !important; min-height:36px !important; }
  .z-btn,.lb{ min-width:32px; min-height:32px; }
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap;}