:root{
    --ink: #14110F;
    --ink-2: #1B1611;
    --panel: #211B15;
    --panel-2: #2A2219;
    --line: #3A3025;
    --line-soft: #2A2219;
    --parch: #EFE6D3;
    --parch-dim: #B8AC93;
    --parch-mute: #7D7360;
    --amber: #D98E3E;
    --amber-dim: #8A5E28;
    --amber-glow: rgba(217,142,62,0.35);
    --green: #7CAE5C;
    --red: #C1503E;
    --shadow-node: rgba(0,0,0,0.5);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;background:var(--ink);color:var(--parch);font-family:'Inter',sans-serif;overflow:hidden;}
  #app{display:flex;flex-direction:column;height:100vh;}

  /* topbar */
  #topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;border-bottom:1px solid var(--line);
    background:var(--ink-2);flex-shrink:0;
  }
  #topbar h1{
    font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25.5px;
    letter-spacing:0.02em;margin:0;color:var(--parch);
  }
  #topbar h1 span{color:var(--amber);}
  #topbar .sub{font-size:12.5px;color:var(--parch-mute);margin-top:2px;letter-spacing:0.04em;text-transform:uppercase;}
  #topbar .disclaimer{font-size:11.5px;color:var(--parch-mute);margin-top:3px;opacity:0.75;}
  .pill{
    font-size:12.5px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);
    color:var(--parch-mute);letter-spacing:0.03em;
  }

  /* main layout */
  #main{display:flex;flex:1;min-height:0;}

  /* palette */
  .palette{
    width:230px;flex-shrink:0;
    background:var(--ink-2);overflow-y:auto;padding:16px 14px;
    scrollbar-width:thin;
    scrollbar-color:var(--amber-dim) var(--ink-2);
  }
  #palette-left{ border-right:1px solid var(--line); }
  #palette-right{ border-left:1px solid var(--line); }
  .palette::-webkit-scrollbar{width:9px;}
  .palette::-webkit-scrollbar-track{background:var(--ink-2);border-radius:6px;}
  .palette::-webkit-scrollbar-thumb{
    background:var(--amber-dim);border-radius:6px;
    border:2px solid var(--ink-2);background-clip:padding-box;
  }
  .palette::-webkit-scrollbar-thumb:hover{background:var(--amber);}

  .palette-tabs{
    display:flex;gap:4px;margin-bottom:12px;
    background:var(--ink);border-radius:7px;padding:3px;
  }
  .tab-btn{
    flex:1;background:transparent;border:none;color:var(--parch-mute);
    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
    padding:7px 0;border-radius:5px;cursor:pointer;letter-spacing:0.02em;
    transition:background .12s, color .12s;
  }
  .tab-btn:hover{color:var(--parch-dim);}
  .tab-btn.active{background:var(--amber-dim);color:#1B1611;}

  .palette-search{margin-bottom:14px;}
  .palette-search input{
    width:100%;background:var(--panel);border:1px solid var(--line-soft);
    color:var(--parch);font-size:14.5px;padding:7px 10px;border-radius:6px;
    font-family:'Inter',sans-serif;
  }
  .palette-search input::placeholder{color:var(--parch-mute);}
  .palette-search input:focus{outline:none;border-color:var(--amber-dim);}

  #spell-filters{
    display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
  }
  #spell-filters select{
    flex:1;min-width:100px;background:var(--panel);border:1px solid var(--line-soft);
    color:var(--parch);font-size:14px;padding:6px 8px;border-radius:6px;
    font-family:'Inter',sans-serif;cursor:pointer;
  }
  #spell-filters select:focus{outline:none;border-color:var(--amber-dim);}
  #spell-filters select:disabled{opacity:0.5;cursor:not-allowed;}

  .palette-empty{
    font-size:14px;color:var(--parch-mute);font-style:italic;
    text-align:center;padding:20px 0;
  }

  .palette-group{margin-bottom:22px;}
  .palette-group h3{
    font-size:11.5px;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--parch-mute);margin:0 0 8px 2px;font-weight:500;
  }
  .palette-item{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;margin-bottom:6px;border-radius:6px;
    background:var(--panel);border:1px solid var(--line-soft);
    cursor:grab;font-size:15px;color:var(--parch);
    transition:border-color .12s, background .12s;
    user-select:none;
  }
  .palette-item:hover{border-color:var(--amber-dim);background:var(--panel-2);}
  .palette-item .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .dot-cmd{background:var(--amber);}
  .dot-cond{background:#6C93B8;}
  .dot-data{background:var(--green);}
  .pal-icon{width:18px;height:18px;border-radius:3px;flex-shrink:0;border:1px solid var(--line-soft);object-fit:cover;}

  /* themed tooltip, replaces native browser title tooltip */
  #forge-tooltip{
    position:fixed;z-index:999;max-width:290px;
    background:var(--panel);border:1px solid var(--amber-dim);border-radius:7px;
    box-shadow:0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3);
    padding:10px 12px;pointer-events:none;opacity:0;
    transform:translateY(4px);transition:opacity .12s ease, transform .12s ease;
  }
  #forge-tooltip.show{opacity:1;transform:translateY(0);}
  #forge-tooltip .tt-name{
    font-family:'Cormorant Garamond',serif;font-weight:600;font-size:17px;
    color:var(--amber);letter-spacing:0.02em;margin-bottom:4px;
  }
  #forge-tooltip .tt-id{
    font-family:'IBM Plex Mono',monospace;font-size:12px;
    color:var(--parch-mute);margin-bottom:2px;
  }
  #forge-tooltip .tt-meta{
    font-size:12.5px;color:var(--green);margin-bottom:7px;font-weight:500;
  }
  #forge-tooltip .tt-desc{
    font-size:14px;line-height:1.55;color:var(--parch-dim);
    white-space:pre-line;
  }
  #forge-tooltip .tt-empty{
    font-size:13px;color:var(--parch-mute);font-style:italic;
  }

  #target-suggest{
    position:fixed;z-index:1000;
    background:var(--panel);border:1px solid var(--amber-dim);border-radius:7px;
    box-shadow:0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3);
    max-height:220px;overflow-y:auto;display:none;
    scrollbar-width:thin;scrollbar-color:var(--amber-dim) var(--panel);
  }
  #target-suggest.show{display:block;}
  #target-suggest::-webkit-scrollbar{width:8px;}
  #target-suggest::-webkit-scrollbar-thumb{background:var(--amber-dim);border-radius:5px;}
  .ts-item{
    display:flex;align-items:center;gap:8px;padding:6px 9px;
    cursor:pointer;font-size:14.5px;color:var(--parch);
    border-bottom:1px solid var(--line-soft);
  }
  .ts-item:last-child{border-bottom:none;}
  .ts-item:hover{background:var(--panel-2);}
  .ts-icon{width:18px;height:18px;border-radius:3px;flex-shrink:0;border:1px solid var(--line-soft);object-fit:cover;}
  .ts-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .ts-dot-spell{background:var(--green);}
  .ts-dot-item{background:#6C93B8;}
  .ts-dot-passive{background:#B08AD9;}
  .ts-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ts-id{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--parch-mute);flex-shrink:0;}
  .ts-type{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--parch-mute);flex-shrink:0;}
  .ts-empty{padding:10px;font-size:14px;color:var(--parch-mute);font-style:italic;text-align:center;}

  /* canvas */
  #canvas-wrap{flex:1;position:relative;overflow:hidden;
    background-image:radial-gradient(var(--line-soft) 1px, transparent 1px);
    background-size:22px 22px;background-position:0 0;
    user-select:none;
  }
  .node-head{ user-select:none; }
  .field label{ user-select:none; }
  .field input, .field select{ user-select:text; }
  body.forge-dragging{ user-select:none; }
  #canvas{position:absolute;top:0;left:0;transform-origin:0 0;}
  svg#edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;}
  svg#edges path{fill:none;stroke:var(--amber-dim);stroke-width:2px;}
  svg#edges path.cond-edge{stroke:#4E6E8C;stroke-dasharray:4 3;}
  svg#edges path.dragline{stroke:var(--amber);stroke-width:2px;}

  .node{
    position:absolute;width:200px;background:var(--panel);
    border:1px solid var(--line);border-radius:8px;
    box-shadow:0 6px 18px var(--shadow-node);
    cursor:default;
  }
  .node.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber), 0 6px 18px var(--shadow-node);}
  .node-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 10px;border-bottom:1px solid var(--line-soft);
    cursor:grab;font-size:14px;font-weight:500;letter-spacing:0.02em;
    border-radius:8px 8px 0 0;
  }
  .node-head.head-start{background:linear-gradient(180deg, #2A2219, #211B15);color:var(--parch-dim);}
  .node-head.head-cmd{background:linear-gradient(180deg, #3A2E17, #2A2114);color:var(--amber);}
  .node-head.head-cond{background:linear-gradient(180deg, #1E2C38, #17222C);color:#8FB4D6;}
  .node-head .del{
    opacity:0.5;cursor:pointer;font-size:16px;line-height:1;padding:0 2px;
  }
  .node-head .del:hover{opacity:1;color:var(--red);}
  .node-body{padding:9px 10px 11px;}
  .field{margin-bottom:7px;}
  .mode-toggle{
    display:flex;gap:3px;background:var(--ink-2);border-radius:6px;padding:2px;
  }
  .mode-btn{
    flex:1;background:transparent;border:none;color:var(--parch-mute);
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
    padding:5px 0;border-radius:4px;cursor:pointer;letter-spacing:0.01em;
    transition:background .12s, color .12s;
  }
  .mode-btn:hover{color:var(--parch-dim);}
  .mode-btn.active{background:var(--amber-dim);color:#1B1611;}
  .node-body code{
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    background:var(--ink-2);color:var(--amber);padding:1px 5px;border-radius:3px;
  }
  .field:last-child{margin-bottom:0;}
  .field label{display:block;font-size:11.5px;color:var(--parch-mute);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.05em;}
  .field select, .field input[type=text]{
    width:100%;background:var(--ink-2);border:1px solid var(--line);
    color:var(--parch);font-size:14.5px;padding:5px 7px;border-radius:4px;
    font-family:'Inter',sans-serif;
  }
  .field input[type=text]{}
  .field label.checkbox-row{
    display:flex;align-items:center;gap:6px;width:auto;
    font-size:12.5px;color:var(--parch-mute);text-transform:none;letter-spacing:normal;
    margin:6px 0 0;cursor:pointer;
  }
  .field label.checkbox-row input{accent-color:var(--amber);cursor:pointer;}
  .field label.checkbox-row span{user-select:none;}
  .field select:focus, .field input:focus{outline:none;border-color:var(--amber-dim);}
  .seq-list{display:flex;flex-direction:column;gap:5px;}
  .seq-row{display:flex;gap:4px;align-items:center;}
  .seq-row input[type=text]{
    flex:1;min-width:0;background:var(--ink-2);border:1px solid var(--line);
    color:var(--parch);font-size:14.5px;padding:5px 7px;border-radius:4px;
    font-family:'Inter',sans-serif;
  }
  .seq-row input[type=text]:focus{outline:none;border-color:var(--amber-dim);}
  .seq-row button{
    flex-shrink:0;background:var(--ink-2);border:1px solid var(--line);color:var(--parch-mute);
    border-radius:4px;font-size:12.5px;width:22px;height:26px;cursor:pointer;
    transition:color .12s, border-color .12s;
  }
  .seq-row button:hover:not(:disabled){color:var(--amber);border-color:var(--amber-dim);}
  .seq-row button:disabled{opacity:0.35;cursor:not-allowed;}
  .seq-reset-row{margin-bottom:4px;}
  .seq-reset-row input[type=number]{
    width:100%;background:var(--ink-2);border:1px solid var(--line);box-sizing:border-box;
    color:var(--parch);font-size:14.5px;padding:5px 7px;border-radius:4px;
    font-family:'Inter',sans-serif;
  }
  .seq-reset-row input[type=number]:focus{outline:none;border-color:var(--amber-dim);}
  .conds-list{display:flex;flex-wrap:wrap;gap:4px;min-height:20px;}
  .cond-chip{
    font-size:12px;background:#1E2C38;border:1px solid #33475A;color:#8FB4D6;
    padding:2px 7px;border-radius:10px;
  }
  .cond-chip.empty{color:var(--parch-mute);border-style:dashed;background:transparent;}

  .port{
    position:absolute;width:12px;height:12px;border-radius:50%;
    background:var(--ink-2);border:2px solid var(--amber-dim);
    cursor:crosshair;z-index:5;
  }
  .port:hover{border-color:var(--amber);background:var(--amber-glow);}
  .port-in{left:-7px;top:50%;transform:translateY(-50%);}
  .port-out{right:-7px;top:50%;transform:translateY(-50%);}
  .port-cond-in{left:-7px;bottom:14px;border-color:#4E6E8C;}
  .port-cond-in:hover{border-color:#8FB4D6;background:rgba(143,180,214,0.3);}

  /* output panel */
  #output{
    flex-shrink:0;border-top:1px solid var(--line);background:var(--ink-2);
    padding:14px 20px;
  }
  #output-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  #output-top h3{
    font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;
    margin:0;color:var(--parch-dim);letter-spacing:0.02em;
  }
  #charcount{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--green);}
  #charcount.over{color:var(--red);}
  #macro-box{
    display:flex;align-items:center;gap:10px;
    background:var(--panel);border:1px solid var(--line);border-radius:6px;
    padding:10px 12px;
  }
  #macro-text{
    flex:1;font-family:'IBM Plex Mono',monospace;font-size:15px;
    color:var(--parch);white-space:pre-wrap;word-break:break-word;min-height:18px;
  }
  #macro-text.empty{color:var(--parch-mute);}
  #copy-btn{
    flex-shrink:0;background:var(--amber-dim);color:#1B1611;border:none;
    padding:7px 14px;border-radius:5px;font-size:14px;font-weight:600;
    cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0.02em;
  }
  #copy-btn:hover{background:var(--amber);}
  #copy-btn:active{transform:scale(0.97);}

  #zoom-controls{
    position:absolute;bottom:16px;right:16px;z-index:10;
    display:flex;align-items:center;gap:2px;
    background:rgba(20,17,15,0.9);border:1px solid var(--line-soft);
    border-radius:8px;padding:4px;
  }
  #zoom-controls button{
    background:transparent;border:none;color:var(--parch-dim);
    width:26px;height:26px;border-radius:5px;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  #zoom-controls button:hover{background:var(--panel-2);color:var(--amber);}
  #zoom-reset{width:auto !important;font-size:12px !important;padding:0 8px;}
  #zoom-level{
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--parch-mute);
    min-width:40px;text-align:center;user-select:none;
  }
  #select-box{
    position:absolute;z-index:6;display:none;
    background:rgba(217,142,62,0.12);
    border:1px solid var(--amber);
    border-radius:2px;pointer-events:none;
  }
  #select-box.show{display:block;}

  #macros-btn{
    position:absolute;top:16px;right:92px;z-index:10;
    width:30px;height:30px;border-radius:50%;
    background:var(--amber);border:1px solid var(--amber);
    color:#1B1611;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(217,142,62,0.18), 0 3px 10px rgba(0,0,0,0.5);
    transition:transform .12s, box-shadow .12s;
  }
  #macros-btn:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgba(217,142,62,0.28), 0 3px 10px rgba(0,0,0,0.5);}
  #macros-btn.active{transform:scale(1.08);box-shadow:0 0 0 4px rgba(217,142,62,0.35), 0 3px 10px rgba(0,0,0,0.5);}

  #help-btn{
    position:absolute;top:16px;right:54px;z-index:10;
    width:30px;height:30px;border-radius:50%;
    background:var(--amber);border:1px solid var(--amber);
    color:#1B1611;font-family:'Cormorant Garamond',serif;font-weight:700;
    font-size:18.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(217,142,62,0.18), 0 3px 10px rgba(0,0,0,0.5);
    transition:transform .12s, box-shadow .12s;
  }
  #help-btn:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgba(217,142,62,0.28), 0 3px 10px rgba(0,0,0,0.5);}
  #help-btn.active{transform:scale(1.08);box-shadow:0 0 0 4px rgba(217,142,62,0.35), 0 3px 10px rgba(0,0,0,0.5);}

  #encyclopedia-btn{
    position:absolute;top:16px;right:16px;z-index:10;
    width:30px;height:30px;border-radius:50%;
    background:var(--amber);border:1px solid var(--amber);
    color:#1B1611;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(217,142,62,0.18), 0 3px 10px rgba(0,0,0,0.5);
    transition:transform .12s, box-shadow .12s;
  }
  #encyclopedia-btn:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgba(217,142,62,0.28), 0 3px 10px rgba(0,0,0,0.5);}
  #encyclopedia-btn.active{transform:scale(1.08);box-shadow:0 0 0 4px rgba(217,142,62,0.35), 0 3px 10px rgba(0,0,0,0.5);}

  #help-panel, #encyclopedia-panel, #macros-panel{
    position:absolute;top:50px;right:16px;z-index:10;width:340px;
    max-height:calc(100% - 66px);overflow-y:auto;
    background:var(--panel);border:1px solid var(--amber-dim);border-radius:9px;
    box-shadow:0 14px 34px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3);
    padding:18px 20px;display:none;
    scrollbar-width:thin;scrollbar-color:var(--amber-dim) var(--panel);
  }
  #encyclopedia-panel{width:380px;}
  #macros-panel{width:360px;}
  #help-panel.show, #encyclopedia-panel.show, #macros-panel.show{display:block;}
  #help-panel::-webkit-scrollbar, #encyclopedia-panel::-webkit-scrollbar, #macros-panel::-webkit-scrollbar{width:9px;}
  #help-panel::-webkit-scrollbar-thumb, #encyclopedia-panel::-webkit-scrollbar-thumb, #macros-panel::-webkit-scrollbar-thumb{background:var(--amber-dim);border-radius:5px;}

  .macros-row{display:flex;gap:6px;margin-bottom:8px;}
  .macros-row input[type=text]{
    flex:1;background:var(--ink-2);border:1px solid var(--line);
    color:var(--parch);font-size:14.5px;padding:6px 8px;border-radius:4px;font-family:'Inter',sans-serif;
  }
  .macros-row input[type=text]:focus{outline:none;border-color:var(--amber-dim);}
  #macros-save-btn, #macros-import-btn, #macros-output-copy, #macros-output-download,
  .macros-secondary-btn, .macro-entry-actions button{
    font-family:'Inter',sans-serif;cursor:pointer;transition:background .12s, color .12s, border-color .12s;
  }
  #macros-save-btn, #macros-import-btn, #macros-output-copy, #macros-output-download{
    flex-shrink:0;background:var(--amber-dim);color:#1B1611;border:none;border-radius:4px;
    font-weight:600;font-size:13px;padding:6px 10px;white-space:nowrap;
  }
  #macros-save-btn:hover, #macros-import-btn:hover, #macros-output-copy:hover, #macros-output-download:hover{background:var(--amber);}
  .macros-secondary-btn{
    display:block;width:100%;background:transparent;color:var(--parch-mute);
    border:1px solid var(--line);border-radius:4px;font-weight:600;font-size:13px;
    padding:7px 0;margin-top:6px;
  }
  .macros-secondary-btn:hover{color:var(--amber);border-color:var(--amber-dim);}
  #macros-import-input, #macros-output-text{
    width:100%;min-height:60px;resize:vertical;background:var(--ink-2);border:1px solid var(--line);
    color:var(--parch);font-size:12.5px;padding:6px 8px;border-radius:4px;font-family:'IBM Plex Mono',monospace;
    margin-bottom:8px;box-sizing:border-box;
  }
  #macros-output-text{color:var(--amber-dim);}
  #macros-import-input:focus, #macros-output-text:focus{outline:none;border-color:var(--amber-dim);}
  #macros-import-msg{font-size:14px;margin-top:-4px;margin-bottom:8px;color:var(--parch-mute);}
  #macros-import-msg.error{color:var(--red);}
  .macro-entry{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:7px 0;border-bottom:1px solid var(--line);
  }
  .macro-entry:last-child{border-bottom:none;}
  .macro-entry-info{display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0;}
  .macro-entry-name{font-size:15px;color:var(--parch);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .macro-entry-date{font-size:12px;color:var(--parch-mute);}
  .macro-entry-actions{display:flex;gap:4px;flex-shrink:0;}
  .macro-entry-actions button{
    background:transparent;border:1px solid var(--line);color:var(--parch-mute);
    border-radius:4px;font-size:12px;padding:4px 7px;
  }
  .macro-entry-actions button:hover{color:var(--amber);border-color:var(--amber-dim);}
  .macro-entry-actions button.danger:hover{color:var(--red);border-color:var(--red);}
  .help-title{
    font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;
    color:var(--amber);margin-bottom:12px;letter-spacing:0.02em;
  }
  .help-group{margin-bottom:20px;}
  .help-group:last-child{margin-bottom:0;}
  .help-group-title{
    font-size:14px;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--parch-mute);margin-bottom:10px;font-weight:600;
  }
  .help-row{display:flex;flex-direction:column;gap:4px;margin-bottom:13px;}
  .help-row:last-child{margin-bottom:0;}
  .help-key{
    font-family:'IBM Plex Mono',monospace;font-size:15.5px;color:var(--amber-dim);font-weight:500;
  }
  .help-desc{font-size:16.5px;color:var(--parch-dim);line-height:1.55;}

  #invite-overlay{
    position:fixed;inset:0;z-index:2500; /* above welcome/classpick (2000) - nothing shows until this clears */
    background:rgba(10,8,6,0.86);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;
  }
  #invite-overlay.hide{display:none;}
  #invite-modal{
    width:min(420px, 90vw);
    background:var(--panel);border:1px solid var(--amber-dim);border-radius:12px;
    box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3);
    padding:28px 30px;
  }
  #invite-error{
    display:none;font-size:13.5px;color:#E06666;background:rgba(224,102,102,0.1);
    border:1px solid rgba(224,102,102,0.35);border-radius:6px;
    padding:8px 10px;margin-bottom:14px;line-height:1.4;
  }
  #invite-error.show{display:block;}
  #invite-code-input{
    width:100%;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:6px;
    color:var(--parch);font-size:15px;padding:9px 11px;margin-bottom:12px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:0.03em;
    box-sizing:border-box;
  }
  #invite-code-input:focus{outline:none;border-color:var(--amber-dim);}
  #invite-submit{
    width:100%;background:var(--amber);color:#1B1611;border:none;
    padding:12px 0;border-radius:7px;font-size:16px;font-weight:700;
    cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0.02em;
    transition:background .12s;
  }
  #invite-submit:hover{background:#e6a04f;}
  #invite-submit:disabled{opacity:0.6;cursor:default;}

  #welcome-overlay{
    position:fixed;inset:0;z-index:2000;
    background:rgba(10,8,6,0.72);backdrop-filter:blur(2px);
    display:none;align-items:center;justify-content:center;
  }
  #welcome-overlay.show{display:flex;}
  #welcome-modal{
    width:min(480px, 90vw);max-height:85vh;overflow-y:auto;
    background:var(--panel);border:1px solid var(--amber-dim);border-radius:12px;
    box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3);
    padding:28px 30px;
    scrollbar-width:thin;scrollbar-color:var(--amber-dim) var(--panel);
  }
  #welcome-modal::-webkit-scrollbar{width:9px;}
  #welcome-modal::-webkit-scrollbar-thumb{background:var(--amber-dim);border-radius:5px;}
  .welcome-title{
    font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;
    color:var(--amber);letter-spacing:0.02em;margin-bottom:6px;
  }
  .welcome-sub{font-size:15.5px;color:var(--parch-mute);margin-bottom:22px;}
  .welcome-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:26px;}
  .welcome-step{display:flex;gap:12px;align-items:flex-start;}
  .welcome-num{
    flex-shrink:0;width:24px;height:24px;border-radius:50%;
    background:var(--amber-dim);color:#1B1611;font-weight:700;font-size:14.5px;
    display:flex;align-items:center;justify-content:center;margin-top:1px;
  }
  .welcome-step span:last-child{font-size:16px;line-height:1.55;color:var(--parch-dim);}
  #welcome-dismiss{
    width:100%;background:var(--amber);color:#1B1611;border:none;
    padding:12px 0;border-radius:7px;font-size:16px;font-weight:700;
    cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0.02em;
    transition:background .12s;
  }
  #welcome-dismiss:hover{background:#e6a04f;}

  #classpick-overlay{
    position:fixed;inset:0;z-index:2000;
    background:rgba(10,8,6,0.72);backdrop-filter:blur(2px);
    display:none;align-items:center;justify-content:center;
  }
  #classpick-overlay.show{display:flex;}
  #classpick-modal{
    width:min(620px, 92vw);max-height:85vh;overflow-y:auto;
    background:var(--panel);border:1px solid var(--amber-dim);border-radius:12px;
    box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3);
    padding:26px 28px;
    scrollbar-width:thin;scrollbar-color:var(--amber-dim) var(--panel);
  }
  #classpick-modal::-webkit-scrollbar{width:9px;}
  #classpick-modal::-webkit-scrollbar-thumb{background:var(--amber-dim);border-radius:5px;}
  #classpick-breadcrumb{
    font-size:14px;color:var(--amber-dim);margin-bottom:14px;cursor:pointer;
    text-transform:uppercase;letter-spacing:0.05em;font-weight:600;
  }
  #classpick-breadcrumb:hover{color:var(--amber);}
  #classpick-list{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:8px;margin-bottom:18px;
  }
  .classpick-btn{
    display:flex;align-items:center;gap:9px;
    background:var(--ink-2);border:1px solid var(--line-soft);
    border-left:3px solid var(--pick-color, var(--amber-dim));
    color:var(--parch);
    padding:7px 10px;border-radius:6px;font-size:14.5px;font-family:'Inter',sans-serif;
    cursor:pointer;text-align:left;transition:border-color .12s, background .12s, box-shadow .12s;
    overflow:hidden;
  }
  .classpick-btn:hover{
    background:var(--panel-2);
    box-shadow:0 0 0 1px var(--pick-color, var(--amber-dim)), 0 4px 14px rgba(0,0,0,0.35);
  }
  .classpick-icon-wrap{
    width:28px;height:28px;flex-shrink:0;border-radius:5px;
    display:flex;align-items:center;justify-content:center;
    background:var(--ink);border:1px solid var(--line-soft);overflow:hidden;
  }
  .classpick-icon{width:100%;height:100%;object-fit:cover;}
  .classpick-dot{width:10px;height:10px;border-radius:50%;background:var(--pick-color, var(--amber-dim));}
  .classpick-name{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:var(--pick-color, var(--parch));font-weight:600;
  }
  #classpick-skip{
    width:100%;background:transparent;color:var(--parch-mute);border:1px solid var(--line-soft);
    padding:10px 0;border-radius:7px;font-size:15px;font-weight:600;
    cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0.02em;
    transition:border-color .12s, color .12s;
  }
  #classpick-skip:hover{border-color:var(--amber-dim);color:var(--parch);}

  #mobile-block{
    display:none; /* shown only under the breakpoint below */
    position:fixed;inset:0;z-index:3000;
    background:var(--ink);align-items:center;justify-content:center;padding:32px;
  }
  #mobile-block-inner{max-width:420px;text-align:center;}
  #mobile-block .welcome-title{margin-bottom:10px;}
  #mobile-block .welcome-sub{margin-bottom:0;}

  /* The canvas needs a mouse for drag/connect/pan/zoom and precise
     multi-node selection - none of that translates to touch, so rather
     than ship a broken mobile experience, gate it off entirely below a
     laptop-ish width and point people at a bigger screen instead. */
  @media (max-width: 900px){
    #invite-overlay, #welcome-overlay, #classpick-overlay, #app, #forge-tooltip, #target-suggest{display:none !important;}
    #mobile-block{display:flex;}
  }