:root {
    --bg:#0d0f0e; --panel:#161a18; --panel-2:#1d2320; --border:#2a322e; --border-strong:#3a443e;
    --text:#e8ebe9; --muted:#8a948f; --accent:#2f6f4f; --accent-hover:#38855e; --danger:#c8553d;
    --radius:12px; --radius-sm:8px; --shadow:0 1px 3px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
    --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Helvetica,Arial,sans-serif;
  }
  * { box-sizing:border-box; }
  html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }
  body { display:grid; grid-template-columns:452px 1fr; height:100vh; overflow:hidden; }
  .sidebar { background:var(--panel); border-right:1px solid var(--border); overflow-y:auto; padding:22px 20px 64px; }
  .brandbar { display:flex; align-items:center; gap:11px; margin:0 0 4px; }
  .brandbar .mark { font-size:13px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; }
  .brandbar .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }
  .sub { color:var(--muted); font-size:12px; margin:0 0 16px; }
  .sidebar h3 { margin:24px 0 11px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .row { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
  .row > label { flex:0 0 88px; font-size:12.5px; color:var(--muted); font-weight:500; }
  .row > .ctrl { flex:1; }
  input[type=text],input[type=number],textarea,select {
    width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    border-radius:var(--radius-sm); padding:9px 11px; font-size:13.5px; font-family:inherit; outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,79,.25); }
  textarea { min-height:64px; resize:vertical; line-height:1.5; }
  input[type=color] { width:40px; height:34px; border:1px solid var(--border); background:var(--panel-2); border-radius:var(--radius-sm); padding:2px; cursor:pointer; flex:0 0 auto; }
  input[type=range] { accent-color:var(--accent); height:22px; cursor:pointer; }
  input[type=checkbox] { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }

  button {
    background:var(--panel-2); color:var(--text); border:1px solid var(--border); padding:9px 14px;
    border-radius:10px; font-size:12.5px; font-weight:500; font-family:inherit; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .08s ease;
  }
  button:hover { background:#232a26; border-color:var(--border-strong); }
  button:active { transform:translateY(1px); }
  button.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
  button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  button.ghost { background:transparent; }
  button.danger { color:var(--danger); }
  button.danger:hover { background:rgba(200,85,61,.12); border-color:rgba(200,85,61,.5); }
  button.mini { padding:6px 9px; font-size:12px; }

  .pillars { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:6px; }
  .pillar { border:1.5px solid var(--border); border-radius:10px; padding:11px 8px 9px; cursor:pointer; text-align:center; transition:border-color .15s ease, background .15s ease; }
  .pillar:hover { background:var(--panel-2); }
  .pillar.active { border-color:var(--text); }
  .pillar .sw { width:100%; height:28px; border-radius:6px; margin-bottom:7px; }
  .pillar .nm { font-size:11px; font-weight:600; letter-spacing:.06em; }
  .pillar .nm small { display:block; color:var(--muted); font-weight:500; letter-spacing:0; margin-top:2px; font-size:10px; }

  .slide-list { display:flex; flex-direction:column; gap:5px; max-height:200px; overflow-y:auto; margin-bottom:12px; }
  .slide-item { display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--panel-2); border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer; font-size:12.5px; }
  .slide-item:hover { background:#232a26; }
  .slide-item.active { border-color:var(--accent); background:rgba(47,111,79,.14); }
  .slide-item .label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
  .slide-item .idx { color:var(--muted); font-variant-numeric:tabular-nums; font-size:11px; }
  .slide-actions .add-row { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
  .slide-actions .edit-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:7px; }
  .slide-actions button { width:100%; padding:9px 6px; }

  .fmtbar { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:9px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; margin-bottom:12px; }
  .fmtbar button { padding:6px 9px; font-size:12px; }
  .fmtbar .seg { display:flex; gap:4px; align-items:center; }
  .fmtbar input[type=color] { width:30px; height:28px; }
  .fmtbar input[type=number] { width:52px; padding:5px 6px; }
  .fmtbar .vline { width:1px; height:22px; background:var(--border); margin:0 2px; }

  details { border:1px solid var(--border); border-radius:10px; margin-bottom:10px; background:var(--panel-2); }
  details > summary { cursor:pointer; padding:11px 13px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); list-style:none; }
  details > summary::-webkit-details-marker { display:none; }
  details > summary::after { content:'+'; float:right; color:var(--muted); }
  details[open] > summary::after { content:'\2013'; }
  details .body { padding:6px 13px 14px; }
  .mini { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  .mini .f { display:flex; flex-direction:column; gap:5px; }
  .mini .f > label { font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }
  .mini .f > label .val { color:#b9c4be; font-variant-numeric:tabular-nums; }
  .mini .f select, .mini .f > input { padding:7px 9px; font-size:12.5px; }
  .rrow { display:flex; gap:8px; align-items:center; }
  .rrow input[type=range] { flex:1; min-width:0; }
  .rrow .numbox { width:58px; flex:0 0 auto; padding:6px 7px; }
  .full { grid-column:1 / -1; }

  .help { color:var(--muted); font-size:11px; line-height:1.5; margin:-2px 0 10px; }
  .help code { background:var(--panel-2); padding:1px 5px; border-radius:4px; font-size:10.5px; color:#b9c4be; }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .badge { display:inline-block; background:var(--panel-2); border:1px solid var(--border); padding:2px 7px; border-radius:980px; font-size:10px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

  .stage { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:24px; overflow:auto; }
  .toolbar { display:flex; gap:9px; margin-bottom:20px; flex-wrap:wrap; align-items:center; background:var(--panel); padding:10px 14px; border-radius:14px; box-shadow:var(--shadow); }
  .toolbar > .lbl { font-size:12.5px; color:var(--muted); }
  .toolbar strong { color:var(--text); }
  .toolbar .spacer { flex:1; }
  .toolbar .chk { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
  .preview-wrap { width:432px; height:540px; box-shadow:0 18px 60px rgba(0,0,0,.5); border-radius:14px; overflow:hidden; position:relative; }

  .slide { width:1080px; height:1350px; position:relative; overflow:hidden; transform-origin:top left; font-family:'Space Grotesk',sans-serif; }
  .slide .wordmark { position:absolute; text-transform:uppercase; white-space:nowrap; }
  .slide .counter { position:absolute; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .slide .leftbar { position:absolute; left:0; top:0; bottom:0; }
  .slide .content { position:absolute; }
  .slide .content.center { top:50%; transform:translateY(-50%); }
  .slide .eyebrow { text-transform:uppercase; margin:0; }
  .slide .title,.slide .heading,.slide .body,.slide .ctaline,.slide .quote,.slide .attribution,
  .slide .labelA,.slide .textA,.slide .labelB,.slide .textB,.slide .term,.slide .definition,.slide .example,
  .slide .interrupt,.slide .ikicker,.slide .rkicker,.slide .rtitle { margin:0; white-space:pre-wrap; }
  .slide .labelA,.slide .labelB,.slide .ikicker,.slide .rkicker { text-transform:uppercase; }
  .slide .example { font-style:italic; }
  .slide .quotemark { margin:0; line-height:.7; font-family:'Space Grotesk',serif; }
  .slide .cmp-div { height:2px; margin:26px 0; border-radius:2px; }
  .slide .term-rule { border-radius:3px; }
  .slide .recap-list { list-style:none; margin:0; padding:0; }
  .slide .recap-item { display:flex; gap:.5em; white-space:pre-wrap; }
  .slide .recap-item .rmark { flex:0 0 auto; }
  /* safe-area guides (preview only, never exported) */
  .slide .guides { position:absolute; inset:0; pointer-events:none; }
  .slide .guides .box { position:absolute; border:1px dashed rgba(255,255,255,.35); }
  .slide .guides .vc, .slide .guides .hc { position:absolute; background:rgba(255,255,255,.18); }

  /* in-canvas editing (preview only) */
  #preview .ce-block { border-radius:3px; outline:2px solid transparent; outline-offset:7px; transition:outline-color .12s ease; }
  #preview.ce-on .ce-block { cursor:grab; }
  #preview.ce-on .ce-block:hover { outline-color:rgba(255,255,255,.4); }
  #preview .ce-block.ce-sel { outline-color:var(--accent); }
  #preview .ce-block.ce-editing { outline-color:#fff; cursor:text; }
  #preview .ce-block.ce-drag { cursor:grabbing; }
  #preview .ce-guide { position:absolute; background:var(--accent-hover); pointer-events:none; z-index:5; }
  #preview .ce-guide.v { width:2px; top:0; bottom:0; }
  #preview .ce-guide.h { height:2px; left:0; right:0; }
  .ce-toolbar { position:fixed; z-index:60; display:none; gap:5px; align-items:center; padding:6px 7px;
    background:var(--panel); border:1px solid var(--border-strong); border-radius:11px; box-shadow:var(--shadow); }
  .ce-toolbar.show { display:flex; }
  .ce-toolbar button { padding:5px 8px; font-size:12px; line-height:1; }
  .ce-toolbar button.on { background:var(--accent); border-color:var(--accent); color:#fff; }
  .ce-toolbar input[type=color] { width:28px; height:26px; }
  .ce-toolbar input[type=number] { width:48px; padding:4px 6px; }
  .ce-toolbar .vline { width:1px; height:20px; background:var(--border); margin:0 1px; }
  .ce-toolbar .nudge { display:grid; grid-template-columns:repeat(4,auto); gap:3px; }

  #render-stage { position:fixed; left:-10000px; top:0; }
  .sidebar::-webkit-scrollbar,.slide-list::-webkit-scrollbar,.stage::-webkit-scrollbar { width:10px; height:10px; }
  .sidebar::-webkit-scrollbar-thumb,.slide-list::-webkit-scrollbar-thumb,.stage::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }