/* Main application styles */
:root{
      --bg:#0a1016;--panel:#111922;--panel2:#17212c;--border:#2b3946;
      --text:#edf2f6;--muted:#9aa7b3;--line:#c5ced6;
      --red:#a8322d;--green:#397244;--yellow:#d8b326;--appendix:#f4f1e9;
      --leftbar-w:300px;--sidebar-w:390px;
    }
    *{box-sizing:border-box}
    html,body{width:100%;height:100%;margin:0;overflow:hidden}
    body{background:var(--bg);color:var(--text);font-family:Georgia,"Times New Roman",serif}
    button,input,select{font:15px Arial,sans-serif}
    .app{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:10px}
    .panel{background:rgba(17,25,34,.98);border:1px solid var(--border);border-radius:10px}
    .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:10px}
    label{display:grid;gap:5px;color:var(--muted);font:13px Arial,sans-serif}
    .toolbar-check{
      display:flex;align-items:center;gap:8px;min-height:38px;
      padding:8px 10px;border:1px solid var(--border);border-radius:7px;
      background:#0d141b;color:var(--text);font:13px Arial,sans-serif;
    }
    .toolbar-check input{width:17px;height:17px;min-height:0;padding:0;margin:0}
    select,input,button{background:#0d141b;color:var(--text);border:1px solid var(--border);border-radius:7px;min-height:38px;padding:8px 11px}
    input{width:min(330px,48vw)}button{cursor:pointer}
    .workspace{
      position:relative;min-height:0;display:grid;
      grid-template-columns:var(--leftbar-w) minmax(0,1fr) var(--sidebar-w);
      gap:10px;
      transition:grid-template-columns .22s ease;
    }
    .workspace.left-hidden{grid-template-columns:0 minmax(0,1fr) var(--sidebar-w)}
    .workspace.sidebar-hidden{grid-template-columns:var(--leftbar-w) minmax(0,1fr) 0}
    .workspace.left-hidden.sidebar-hidden{grid-template-columns:0 minmax(0,1fr) 0}
    .graph-wrap{
      position:relative;min-width:0;min-height:0;overflow:hidden;
      background:var(--bg);isolation:isolate
    }
    .graph-layer,#graph-effects{position:absolute;inset:0;display:block;width:100%;height:100%}
    /*
      The effects canvas is the graph's background animation layer. Keeping it
      below the connection SVG makes the lines impossible for the canvas's
      compositor surface to cover, even in Chromium/Edge configurations that
      promote a canvas as opaque.
    */
    #graph-effects{z-index:1;pointer-events:none;background:var(--bg)}
    #graph-edges{z-index:2;pointer-events:none;background:transparent}
    #graph{z-index:3;background:transparent}
    .graph-wrap .tooltip,.graph-wrap .hint{z-index:4}
    .sidebar{min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;transition:opacity .16s ease,transform .22s ease}
    .workspace.sidebar-hidden .sidebar{opacity:0;transform:translateX(18px);pointer-events:none}
    .left-sidebar{
      min-width:0;min-height:0;overflow:hidden;
      display:grid;grid-template-rows:auto minmax(0,1fr);
      gap:10px;
      transition:opacity .16s ease,transform .22s ease;
    }
    .workspace.left-hidden .left-sidebar{opacity:0;transform:translateX(-18px);pointer-events:none}
    .reading-header{padding:14px 16px}
    .reading-header h2{font-size:21px;font-weight:400;margin:0 0 9px}
    .reading-header p{margin:6px 0;color:var(--muted);font-size:14px}
    .toolbar-backup{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .backup-controls{display:flex;gap:8px}
    .backup-controls button{padding:8px 11px;font-size:13px}
    .backup-status{min-width:0;color:var(--muted);font:12px Arial,sans-serif}
    .backup-status.error{color:#ffb2b2}
    .backup-status.success{color:#b9e6bd}
    .reading-list{min-height:0;overflow-y:auto;padding:12px 14px}
    .check-row{display:flex;align-items:center;gap:9px;min-width:0;font:15px Georgia,serif}
    .check-row input{width:17px;height:17px;min-height:0;padding:0;flex:0 0 auto}
    .check-row span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .all-row{font-weight:700;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}
    .dictionary-block{margin-bottom:16px}
    .dictionary-title{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:7px}
    .dictionary-entries{display:grid;gap:6px;padding-left:6px}
    .read-count{margin-left:auto;color:var(--muted);font:12px Arial,sans-serif}
    .left-tab{
      position:absolute;z-index:20;top:14px;left:var(--leftbar-w);
      width:94px;height:38px;padding:0 10px;border-radius:0 8px 8px 0;
      background:var(--panel2);border-left:0;font-size:14px;white-space:nowrap;
      transition:left .22s ease,background .16s ease;
    }
    .left-tab:hover{background:#22303d}
    .workspace.left-hidden .left-tab{
      left:0;border-left:1px solid var(--border);border-radius:0 8px 8px 0;width:108px;
    }
    .sidebar-heading{margin:0;padding:2px 4px;font-size:17px}
    .details-card{
      min-height:0;overflow:hidden;padding:16px;
      display:flex;flex-direction:column;
    }
    #details{
      flex:1 1 auto;min-height:0;height:100%;overflow-y:auto;padding-right:6px;
      display:flex;flex-direction:column;
    }
    #details h2{font-size:27px;font-weight:400;margin:0 0 5px}
    #details h3{font-size:20px;font-weight:400;margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
    #details p{margin:5px 0;color:var(--muted)}
    .connection-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
    .connection-row{display:grid;grid-template-columns:42px 28px minmax(0,1fr);align-items:center;gap:7px;line-height:1.2}
    .notes-heading{flex:0 0 auto}
    .notes-wrap{
      flex:1 1 260px;min-height:260px;
      display:flex;flex-direction:column;gap:0;
      border:1px solid var(--border);border-radius:8px;
      overflow:hidden;background:#0f151c;
    }
    .notes-toolbar{
      flex:0 0 auto;
      display:flex;flex-wrap:nowrap;align-items:center;gap:4px;
      width:100%;overflow-x:auto;overflow-y:hidden;
      padding:6px;border:0;border-bottom:1px solid var(--border);
      border-radius:0;background:#0b1117;
      scrollbar-width:thin;
    }
    .notes-tool{
      flex:0 0 auto;min-width:30px;height:30px;padding:4px 7px;
      border:1px solid transparent;border-radius:5px;
      background:transparent;color:var(--text);
      font:13px Arial,sans-serif;white-space:nowrap;
    }
    .notes-tool:hover,.notes-tool:focus{border-color:#60778c;background:#18232d;outline:none}
    .notes-tool strong,.notes-tool em,.notes-tool u{pointer-events:none}
    .notes-separator{flex:0 0 1px;width:1px;height:22px;margin:0 2px;background:var(--border)}
    .notes-editor{
      flex:1 1 auto;min-height:180px;width:100%;overflow:auto;
      padding:11px 12px;border:0;border-radius:0;
      background:#0f151c;color:var(--text);
      font:15px/1.5 Georgia,serif;
      white-space:normal;overflow-wrap:anywhere;
    }
    .notes-editor:empty::before{content:attr(data-placeholder);color:#6f7d89;pointer-events:none}
    .notes-editor:focus{outline:none;box-shadow:inset 0 0 0 1px #8aa4bd}
    .notes-editor p{margin:.25em 0;color:var(--text)}
    .notes-editor ul,.notes-editor ol{margin:.35em 0;padding-left:1.5em}
    .notes-editor blockquote{margin:.4em 0;padding-left:10px;border-left:3px solid #60778c;color:#c5d0da}
    .notes-readonly{
      flex:1 1 auto;min-height:180px;width:100%;overflow:auto;
      padding:11px 12px;border:0;border-radius:0;
      background:#0f151c;color:var(--text);
      font:15px/1.5 Georgia,serif;
      white-space:normal;overflow-wrap:anywhere;
      user-select:text;
    }
    .notes-readonly p{margin:.25em 0;color:var(--text)}
    .notes-readonly ul,.notes-readonly ol{margin:.35em 0;padding-left:1.5em}
    .notes-readonly blockquote{margin:.4em 0;padding-left:10px;border-left:3px solid #60778c;color:#c5d0da}
    .notes-readonly a{color:#80c8ee;text-decoration:underline;text-underline-offset:2px}
    .notes-readonly strong,.notes-readonly b{font-weight:700}
    .notes-readonly em,.notes-readonly i{font-style:italic}
    .notes-readonly-empty{color:#6f7d89!important;font-style:italic}
    .notes-status{
      flex:0 0 auto;min-height:24px;padding:5px 10px;
      border-top:1px solid var(--border);background:#0b1117;
      color:var(--muted);font:12px Arial,sans-serif;
    }
    .connection-icon{width:40px;height:16px;display:block}
    .mini-book{width:25px;height:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.7);font:bold 16px Georgia,serif}.mini-book img{width:16px;height:16px;display:block;object-fit:contain}.node-icon{pointer-events:none}
    .legend-card{padding:14px 16px;overflow:hidden}
    .legend-card h2{font-size:21px;font-weight:400;margin:0 0 10px}
    .book-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
    .book-list>div{display:flex;gap:9px;align-items:center;font-size:16px}
    .divider{height:1px;background:var(--border);margin:12px 0}
    .edge-key{display:grid;gap:8px;font:14px Arial,sans-serif}
    .edge-sample{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
    .edge-sample svg{width:110px;height:18px;overflow:visible}
    .sidebar-tab{
      position:absolute;
      z-index:20;
      top:14px;
      right:var(--sidebar-w);
      width:94px;
      height:38px;
      padding:0 10px;
      border-radius:8px 0 0 8px;
      background:var(--panel2);
      border-right:0;
      font-size:14px;
      white-space:nowrap;
      transition:right .22s ease,background .16s ease;
    }
    .sidebar-tab:hover{background:#22303d}
    .workspace.sidebar-hidden .sidebar-tab{
      right:0;
      border-right:1px solid var(--border);
      border-radius:8px 0 0 8px;
      width:108px;
    }
    .node-group{cursor:pointer}.node-circle{stroke-width:2px}
    .node-symbol{text-anchor:middle;dominant-baseline:central;font-weight:700;pointer-events:none}
    .node-label{fill:var(--text);font-size:13px;text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:5px;pointer-events:none}
    .node-label.circle-label{dominant-baseline:middle}
    .edge-path{fill:none;stroke:var(--line);stroke-width:1.55;stroke-opacity:.72}
    .edge-path.redirect{stroke-dasharray:8 7}
    .edge-path.active{stroke:#fff;stroke-width:2.4;stroke-opacity:1}
    .arrowhead{fill:var(--line);fill-opacity:.72}
    .arrowhead.active{fill:#fff;fill-opacity:1}
    .diamond{fill:var(--line);fill-opacity:.88}
    .diamond.active{fill:#fff;fill-opacity:1}
    .dimmed{opacity:.25!important}
    .selected .node-circle{stroke:#fff;stroke-width:4px;filter:drop-shadow(0 0 5px rgba(255,255,255,.45))}
    .connected .node-circle{stroke:#fff;stroke-width:3px}
    .unread-highlight .node-circle{
      stroke:#4dd6ff!important;
      stroke-width:4px!important;
      filter:drop-shadow(0 0 4px rgba(77,214,255,.55));
    }
    .mini-book.unread{
      border:3px solid #4dd6ff;
      box-shadow:0 0 0 1px rgba(77,214,255,.25);
    }
    .unread-label{color:#4dd6ff;font-style:italic}
    .tooltip{position:absolute;display:none;pointer-events:none;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:rgba(17,25,34,.98);font:14px Arial,sans-serif}
    .hint{position:absolute;left:12px;bottom:12px;color:var(--muted);font:13px Arial,sans-serif;background:rgba(10,16,22,.85);border:1px solid var(--border);border-radius:6px;padding:7px 9px}
    .red{background:var(--red);color:#fff}.green{background:var(--green);color:#fff}.yellow{background:var(--yellow);color:#111}.appendix{background:var(--appendix);color:#111;border-color:#ccc}
    .error{margin:24px;padding:18px;border:1px solid #a44;background:#2a1111;color:#ffdede;border-radius:8px;font-family:Arial,sans-serif}
    @media(max-width:1100px){:root{--leftbar-w:260px;--sidebar-w:340px}}
    @media(max-width:850px){:root{--leftbar-w:230px;--sidebar-w:310px}.toolbar{gap:7px}.book-list{grid-template-columns:1fr}}

    .view-button{display:inline-flex;align-items:center;gap:7px}
    .view-button svg,.backup-controls button svg,.open-notes-view svg{width:17px;height:17px;flex:0 0 auto}
    .view-button.active{border-color:#4d9bc1;background:#173143;box-shadow:inset 0 0 0 1px rgba(77,214,255,.18)}
    .graph-only-control{display:flex}
    .notes-only-control{display:none!important}

    .notes-left-sidebar,.notes-view{display:none}
    .workspace.notes-mode{
      grid-template-columns:var(--leftbar-w) minmax(0,1fr);
    }
    .workspace.notes-mode .left-sidebar,
    .workspace.notes-mode .graph-wrap,
    .workspace.notes-mode .sidebar,
    .workspace.notes-mode .left-tab,
    .workspace.notes-mode .sidebar-tab{display:none}
    .workspace.notes-mode .notes-left-sidebar{
      display:grid;min-width:0;min-height:0;overflow:hidden;
      grid-template-rows:auto minmax(0,1fr);gap:10px;
    }
    .workspace.notes-mode .notes-view{
      display:flex;min-width:0;min-height:0;overflow:hidden;
      flex-direction:column;padding:18px;
    }
    body.notes-active .graph-only-control{display:none!important}
    body.notes-active .notes-only-control{display:inline-flex!important}

    .notes-filter-header{padding:14px 16px}
    .notes-filter-header h2{font-size:21px;font-weight:400;margin:0 0 5px}
    .notes-filter-header p{margin:5px 0;color:var(--muted);font-size:13px;line-height:1.4}
    .notes-filter-list{min-height:0;overflow:auto;padding:12px 14px}
    .notes-filter-section{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border)}
    .notes-filter-section:last-child{border-bottom:0}
    .notes-filter-section h3{font-size:17px;font-weight:400;margin:0 0 9px}
    .notes-book-block{margin-bottom:10px}
    .notes-book-title{
      display:grid;grid-template-columns:auto 27px minmax(0,1fr) auto auto;
      align-items:center;gap:7px;width:100%;
      padding:4px 0;background:transparent;border:0;color:var(--text);text-align:left;
    }
    .notes-book-title input,.notes-entry-filter input,.category-filter input{width:16px;height:16px;min-height:0;padding:0}
    .book-expand{width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--text);font-size:20px;line-height:1}
    .notes-book-entries{display:grid;gap:6px;padding:6px 0 3px 33px}
    .notes-book-entries.collapsed{display:none}
    .notes-entry-filter{
      display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;
      font-size:14px;
    }
    .notes-entry-filter span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .notes-page{color:var(--muted);font:12px Arial,sans-serif}
    .category-filters{display:grid;gap:7px}
    .category-filter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;font-size:14px}
    .category-count{color:var(--muted);font:12px Arial,sans-serif}
    .notes-filter-search{width:100%}
    .notes-view-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
    .notes-view-title{margin-right:auto}
    .notes-view-title h1{font-size:28px;font-weight:400;margin:0}
    .notes-view-count{color:var(--muted);margin-top:4px}
    .notes-sort-controls{display:flex;gap:8px;align-items:center}
    .notes-sort-controls select{min-width:175px}
    .notes-cards{min-height:0;overflow:auto;padding-right:4px;display:grid;gap:12px}
    .notes-empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:10px}
    .notes-entry-card{
      padding:18px;border:1px solid var(--border);border-radius:10px;
      background:linear-gradient(135deg,#202b35,#17212a);
    }
    .notes-entry-card h2{text-align:center;font-size:27px;font-weight:400;margin:0 0 6px}
    .notes-entry-meta{text-align:center;color:var(--muted);display:grid;gap:4px}
    .notes-entry-meta .book-meta{display:flex;align-items:center;justify-content:center;gap:7px}
    .notes-card-connections{
      display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
      gap:10px 18px;margin:16px 0;padding-top:14px;border-top:1px solid var(--border)
    }
    .notes-reference{
      display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
      line-height:1.2;
    }
    .notes-card-editor{
      width:min(100%, 650px);margin:0 auto;
      min-height:190px;display:flex;flex-direction:column;
      border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#0f151c;
    }
    .notes-card-editor .notes-toolbar{border:0;border-bottom:1px solid var(--border)}
    .notes-card-editor .notes-editor{
      min-height:145px;height:auto;overflow:visible;
    }
    .notes-card-editor .notes-status{border-top:1px solid var(--border)}
    .open-notes-view{
      margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
      padding:7px 10px;font-size:13px;
    }


    .connection-books{
      display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
      white-space:nowrap;
    }
    .connection-entry{
      display:inline-flex;align-items:center;gap:7px;min-width:0;
      white-space:nowrap;
    }


    #print-notes-pdf{white-space:nowrap}

    @media print{
      @page{size:A4;margin:16mm 17mm 18mm}

      html,body{
        width:auto!important;height:auto!important;min-height:0!important;
        margin:0!important;padding:0!important;overflow:visible!important;
        background:#fff!important;color:#111!important;
      }
      body{
        font-family:Georgia,"Times New Roman",serif!important;
        font-size:11pt!important;line-height:1.45!important;
      }

      .app,.workspace{
        display:block!important;width:auto!important;height:auto!important;
        min-height:0!important;overflow:visible!important;margin:0!important;padding:0!important;
        background:#fff!important;border:0!important;
      }
      .toolbar,.left-sidebar,.notes-left-sidebar,.graph-wrap,.sidebar,
      .left-tab,.sidebar-tab{display:none!important}

      #notes-view{
        display:block!important;position:static!important;
        width:auto!important;height:auto!important;min-height:0!important;
        overflow:visible!important;margin:0!important;padding:0!important;
        border:0!important;border-radius:0!important;background:#fff!important;color:#111!important;
      }
      .notes-view-header{
        display:block!important;margin:0 0 9mm!important;padding:0 0 4mm!important;
        border-bottom:1px solid #777!important;
      }
      .notes-view-title h1{
        margin:0!important;text-align:left!important;font-size:19pt!important;
        font-weight:400!important;color:#111!important;
      }
      .notes-view-count{margin-top:1mm!important;color:#555!important;font-size:9.5pt!important}
      .notes-sort-controls{display:none!important}

      .notes-cards{
        display:block!important;width:auto!important;height:auto!important;min-height:0!important;
        overflow:visible!important;margin:0!important;padding:0!important;
      }
      .notes-empty{display:block!important;border:0!important;padding:0!important;color:#555!important}

      .notes-entry-card{
        display:block!important;margin:0 0 10mm!important;padding:0 0 9mm!important;
        border:0!important;border-bottom:1px solid #aaa!important;border-radius:0!important;
        background:#fff!important;color:#111!important;box-shadow:none!important;
        break-inside:auto!important;page-break-inside:auto!important;
      }
      .notes-entry-card:last-child{border-bottom:0!important;margin-bottom:0!important}
      .notes-entry-card h2{
        margin:0 0 2mm!important;text-align:left!important;font-size:17pt!important;
        font-weight:400!important;color:#111!important;
        break-after:avoid-page!important;page-break-after:avoid!important;
      }
      .notes-entry-meta{
        display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
        gap:1.5mm 5mm!important;margin:0!important;text-align:left!important;
        color:#444!important;font-size:9.5pt!important;
        break-after:avoid-page!important;page-break-after:avoid!important;
      }
      .notes-entry-meta .book-meta{display:inline-flex!important;justify-content:flex-start!important;gap:1.5mm!important}

      .notes-card-connections{
        display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
        gap:2mm 5mm!important;margin:4mm 0 5mm!important;padding:3mm 0 0!important;
        border-top:1px solid #ccc!important;color:#111!important;font-size:9.5pt!important;
        break-after:avoid-page!important;page-break-after:avoid!important;
      }
      .notes-reference{
        display:inline-flex!important;
        align-items:center!important;
        white-space:nowrap!important;
        break-inside:avoid-page!important;
        page-break-inside:avoid!important;
        -webkit-column-break-inside:avoid!important;
      }
      .connection-entry,.connection-books{
        display:inline-flex!important;
        align-items:center!important;
        white-space:nowrap!important;
        break-inside:avoid-page!important;
        page-break-inside:avoid!important;
        -webkit-column-break-inside:avoid!important;
      }
      .connection-books .mini-book,
      .notes-reference > svg,
      .connection-entry > svg{
        break-inside:avoid-page!important;
        page-break-inside:avoid!important;
        -webkit-column-break-inside:avoid!important;
      }

      .notes-card-editor{
        display:block!important;width:100%!important;max-width:none!important;min-height:0!important;
        margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
        background:#fff!important;color:#111!important;overflow:visible!important;
      }
      .notes-toolbar,.notes-status{display:none!important}
      .notes-editor{
        display:block!important;width:auto!important;height:auto!important;min-height:0!important;
        margin:0!important;padding:0!important;overflow:visible!important;
        border:0!important;background:#fff!important;color:#111!important;
        font:11pt/1.5 Georgia,"Times New Roman",serif!important;
        white-space:normal!important;overflow-wrap:anywhere!important;
      }
      .notes-editor:empty{display:none!important}
      .notes-editor:empty::before{content:none!important;display:none!important}
      .notes-editor p{margin:0 0 3.5mm!important}
      .notes-editor p:last-child{margin-bottom:0!important}
      .notes-editor ul,.notes-editor ol{margin:0 0 3.5mm 7mm!important;padding-left:5mm!important}
      .notes-editor blockquote{
        margin:3mm 0!important;padding:1mm 0 1mm 4mm!important;
        border-left:2px solid #777!important;color:#444!important;
        break-inside:auto!important;page-break-inside:auto!important;
      }

      .mini-book{
        width:6mm!important;height:6mm!important;min-width:6mm!important;
        -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
        box-shadow:none!important;
      }
      .mini-book.unread{border-width:1px!important}
      .connection-icon{width:7mm!important;height:5mm!important}
      .unread-label{color:#17657a!important}

      h1,h2,h3,p,li,blockquote{orphans:3;widows:3}
    }

  

    /* Hidden Pepe Silvia workspace */
    .pepe-view-host{
      display:none;width:100%;height:100%;min-width:0;min-height:0;
      border:0;border-radius:10px;background:#d9d0bd;
    }
    .workspace.pepe-mode{grid-template-columns:minmax(0,1fr)}
    .workspace.pepe-mode .left-sidebar,
    .workspace.pepe-mode .notes-left-sidebar,
    .workspace.pepe-mode .notes-view,
    .workspace.pepe-mode .graph-wrap,
    .workspace.pepe-mode .sidebar,
    .workspace.pepe-mode .left-tab,
    .workspace.pepe-mode .sidebar-tab{display:none!important}
    .workspace.pepe-mode .pepe-view-host{display:block}
    body.pepe-active .notes-only-control{display:none!important}

    /* Shared toolbar-button treatment. These are visual styles only: the
       Pyramid, Circular, import and export controls retain their normal click
       behaviour and receive none of the Notes button's long-press logic. */
    .toolbar .view-button:not(.pepe-secret-button),
    .toolbar .backup-controls button{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      height:48px;min-height:48px;padding:0 16px;
      border:1px solid #40505f;border-radius:10px;
      background:linear-gradient(180deg,#263440,#1b2731);
      color:var(--text);font:14px Arial,sans-serif;white-space:nowrap;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.26);
      transition:transform .12s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
    }
    .toolbar .view-button:not(.pepe-secret-button){width:172px}
    .toolbar .backup-controls button{width:auto;min-width:148px}
    .toolbar .view-button:not(.pepe-secret-button):hover,
    .toolbar .backup-controls button:hover{
      background:linear-gradient(180deg,#2b3a46,#1e2b35);
    }
    .toolbar .view-button:not(.pepe-secret-button):active,
    .toolbar .backup-controls button:active{transform:translateY(1px)}
    .toolbar .view-button:not(.pepe-secret-button):focus-visible,
    .toolbar .backup-controls button:focus-visible{
      outline:2px solid rgba(77,214,255,.62);outline-offset:3px;
    }
    .toolbar .view-button:not(.pepe-secret-button).active{
      border-color:#4d9bc1;
      background:linear-gradient(180deg,#244253,#173143);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(77,214,255,.18),0 5px 14px rgba(0,0,0,.26);
    }
    .toolbar .backup-controls{gap:10px}

    /* Secret Notes View button — final yarn-and-pin design */
    .pepe-secret-button{
      position:relative;width:172px;height:48px;min-height:48px;padding:0;
      overflow:visible;isolation:isolate;justify-content:center;
      background:linear-gradient(180deg,#263440,#1b2731);
      border-color:#40505f;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.26);
      user-select:none;-webkit-user-select:none;touch-action:none;
    }
    .pepe-secret-button:hover{background:linear-gradient(180deg,#2b3a46,#1e2b35)}
    .pepe-button-face{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
      z-index:4;border-radius:inherit;overflow:hidden;
    }
    .pepe-paper-wash{
      position:absolute;inset:0;opacity:0;pointer-events:none;
      background:linear-gradient(180deg,rgba(238,228,203,.15),rgba(164,150,117,.04)),
        repeating-linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 2px,transparent 2px,transparent 6px);
      transition:opacity .22s ease;
    }
    .pepe-notes-icon{width:17px!important;height:17px!important;flex:0 0 auto;opacity:.9;position:relative;z-index:2}
    .pepe-label-stack{position:relative;display:grid;place-items:center;min-width:82px;z-index:2;font:14px Arial,sans-serif}
    .pepe-label-stack>span{grid-area:1/1;white-space:nowrap}
    .pepe-base-label{transition:opacity .22s ease,transform .22s ease}
    .pepe-ghost-red,.pepe-ghost-green,.pepe-ghost-yellow{opacity:0;mix-blend-mode:screen;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
    .pepe-ghost-red{color:#d95c5c}.pepe-ghost-green{color:#77c477}.pepe-ghost-yellow{color:#d0b750}
    .pepe-secret-label{opacity:0;transform:scale(.94);color:#efe8d0;font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:opacity .22s ease,transform .22s ease}
    #pepeButtonYarnSvg{
      position:absolute!important;inset:-19px!important;width:calc(100% + 38px)!important;height:calc(100% + 38px)!important;
      overflow:visible;z-index:6;pointer-events:none;flex:none!important;
    }
    .pepe-yarn-under{fill:none;stroke:rgba(124,22,18,.94);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;transform:translate(.18px,1.28px)}
    .pepe-yarn-belly{fill:none;stroke:rgba(51,6,6,.28);stroke-width:3.55;stroke-linecap:round;stroke-linejoin:round;transform:translate(.34px,1.95px);filter:url(#pepeBellyBlur)}
    .pepe-yarn-core{fill:none;stroke:#c62821;stroke-width:4.95;stroke-linecap:round;stroke-linejoin:round}
    .pepe-yarn-mid{fill:none;stroke:#dd3c32;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
    .pepe-yarn-top{fill:none;stroke:rgba(255,172,145,.26);stroke-width:.92;stroke-linecap:round;stroke-linejoin:round;transform:translate(-.08px,-.34px)}
    .pepe-twist-groove{fill:none;stroke:rgba(118,20,17,.58);stroke-width:1.14;stroke-linecap:round}
    .pepe-twist-ridge{fill:none;stroke:rgba(255,181,160,.32);stroke-width:.76;stroke-linecap:round}
    .pepe-fiber{stroke-linecap:round;pointer-events:none;filter:url(#pepeFiberSoft)}
    .pepe-pin-sphere{fill:url(#pepePinSphere)}
    .pepe-pin-shade{fill:url(#pepePinShade);opacity:1}
    .pepe-pin-highlight{fill:rgba(255,202,184,.42);filter:url(#pepeHighlightBlur)}
    .pepe-pin-speck{fill:rgba(88,8,7,.16)}
    .pepe-pin-rim-light{fill:none;stroke:rgba(255,159,139,.22);stroke-width:.65}
    .pepe-pin-position{pointer-events:none}
    .pepe-pin-drop{opacity:0;transform-box:fill-box;transform-origin:center center;transform:translateY(-10px) scale(.72)}
    .pepe-pin-drop.settled{opacity:1;transform:translateY(0) scale(1)}
    .pepe-pin-drop.dropped{animation:pepePinDrop .24s cubic-bezier(.16,.84,.28,1) forwards}
    @keyframes pepePinDrop{0%{opacity:0;transform:translateY(-10px) scale(.72)}72%{opacity:1;transform:translateY(0) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
    .pepe-secret-button.holding,.pepe-secret-button.hinting,.pepe-secret-button.unlocked{
      border-color:#5c6873;background:linear-gradient(180deg,#2a3945,#1e2b35);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(213,46,46,.15),0 7px 18px rgba(0,0,0,.28);
    }
    .pepe-secret-button.holding .pepe-paper-wash,.pepe-secret-button.unlocked .pepe-paper-wash{opacity:1}
    .pepe-secret-button.holding .pepe-ghost-red,.pepe-secret-button.holding .pepe-ghost-green,.pepe-secret-button.holding .pepe-ghost-yellow,
    .pepe-secret-button.hinting .pepe-ghost-red,.pepe-secret-button.hinting .pepe-ghost-green,.pepe-secret-button.hinting .pepe-ghost-yellow{opacity:.18}
    .pepe-secret-button.holding .pepe-ghost-red,.pepe-secret-button.hinting .pepe-ghost-red{transform:translate(1.2px,-.2px)}
    .pepe-secret-button.holding .pepe-ghost-green,.pepe-secret-button.hinting .pepe-ghost-green{transform:translate(-1.1px,.2px)}
    .pepe-secret-button.holding .pepe-ghost-yellow,.pepe-secret-button.hinting .pepe-ghost-yellow{transform:translate(.4px,.8px)}
    .pepe-secret-button.hinting{animation:pepeButtonShiver 320ms ease}
    .pepe-secret-button.unlocked{border-color:#7b2c2c!important;background:linear-gradient(180deg,#2a3945,#1e2b35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(213,46,46,.22),0 8px 20px rgba(0,0,0,.32)!important}
    @keyframes pepeButtonShiver{0%,100%{transform:translateX(0)}30%{transform:translateX(.35px)}60%{transform:translateX(-.35px)}}

  
    

/* Tutorial styles */
/* First-open tutorial and toolbar utility buttons */
.toolbar .utility-icon-button,
.toolbar .utility-icon-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border:1px solid #40505f;
  border-radius:10px;
  background:linear-gradient(180deg,#263440,#1b2731);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.26);
  transition:transform .12s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
  text-decoration:none;
  cursor:pointer;
}
.toolbar .utility-icon-button:hover,
.toolbar .utility-icon-link:hover{background:linear-gradient(180deg,#2b3a46,#1e2b35)}
.toolbar .utility-icon-button:active,
.toolbar .utility-icon-link:active{transform:translateY(1px)}
.toolbar .utility-icon-button:focus-visible,
.toolbar .utility-icon-link:focus-visible{outline:2px solid rgba(77,214,255,.72);outline-offset:3px}
.toolbar .utility-icon-button svg,
.toolbar .utility-icon-link svg{width:23px;height:23px;display:block}
.toolbar .coffee-button svg{width:25px;height:25px}
.toolbar .coffee-button .coffee-cup-fill{fill:#ffdd00}
.toolbar .coffee-button .coffee-cup-ink{fill:#111820}
.toolbar .coffee-button .coffee-steam{fill:none;stroke:#ffdd00;stroke-width:1.7;stroke-linecap:round}

#tutorial-overlay[hidden]{display:none!important}
#tutorial-overlay{position:fixed;inset:0;z-index:20000;font-family:Arial,sans-serif;color:#edf2f6}
.tutorial-backdrop{position:absolute;inset:0;background:rgba(3,7,11,.78);backdrop-filter:blur(1.5px);pointer-events:auto}
.tutorial-stage{
  position:fixed;
  z-index:20002;
  overflow:hidden;
  border:1px solid rgba(71,96,116,.92);
  border-radius:10px;
  background:#0a1016;
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  pointer-events:none;
  opacity:1;
  transition:opacity .27s ease;
}
.tutorial-stage.is-hidden{opacity:0;visibility:hidden}
.tut-workspace{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(320px,1fr) minmax(270px,350px);
  gap:10px;
  padding:0;
  transition:grid-template-columns .48s ease;
}
.tutorial-stage.tut-left-collapsed .tut-workspace{grid-template-columns:0 minmax(320px,1fr) minmax(270px,350px)}
.tutorial-stage.tut-right-collapsed .tut-workspace{grid-template-columns:minmax(220px,280px) minmax(320px,1fr) 0}
.tutorial-stage.tut-left-collapsed.tut-right-collapsed .tut-workspace{grid-template-columns:0 minmax(320px,1fr) 0}
.tutorial-stage.tut-notes-mode .tut-workspace{grid-template-columns:minmax(220px,280px) minmax(420px,1fr)}
.tutorial-stage.tut-notes-mode .tut-right{display:none}
.tutorial-stage.tut-notes-mode .tut-center{grid-column:2}

.tut-panel{
  min-width:0;min-height:0;overflow:hidden;
  border:1px solid #2b3946;border-radius:10px;
  background:rgba(17,25,34,.99);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.tut-left,.tut-right{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;transition:opacity .3s ease,transform .45s ease}
.tutorial-stage.tut-left-collapsed .tut-left{opacity:0;transform:translateX(-20px)}
.tutorial-stage.tut-right-collapsed .tut-right{opacity:0;transform:translateX(20px)}
.tut-reading-head,.tut-details-head{padding:14px 16px}
.tut-reading-head h2,.tut-details-head h2{font:400 20px Georgia,serif;margin:0 0 9px}
.tut-reading-head p{margin:5px 0;color:#9aa7b3;font:13px/1.35 Arial,sans-serif}
.tut-reading-list{flex:1;overflow:hidden;padding:12px 14px}
.tut-dictionary{margin-bottom:13px}
.tut-dictionary-title{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-weight:700;font-size:14px}
.tut-entry-list{display:grid;gap:6px;padding-left:4px}
.tut-check-row{display:flex;align-items:center;gap:8px;min-width:0;font:14px Georgia,serif;color:#edf2f6}
.tut-checkbox{
  width:17px;height:17px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid #60778c;border-radius:3px;background:#0d141b;color:#071017;
  font:bold 13px Arial,sans-serif;
}
.tut-checkbox.checked{border-color:#80dfff;background:#80dfff}
.tut-checkbox.cyan-pulse{animation:tutCyanPulse 1.575s ease-in-out infinite}
@keyframes tutCyanPulse{0%,100%{box-shadow:0 0 0 0 rgba(77,214,255,.25)}50%{box-shadow:0 0 0 5px rgba(77,214,255,.28),0 0 20px rgba(77,214,255,.45)}}
.tut-book-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.75);font:bold 14px Georgia,serif;overflow:hidden}
.tut-book-icon{display:block;width:14px;height:14px;object-fit:contain}
.tut-book-letter{display:grid;place-items:center;color:#000;font:bold 15px Arial,sans-serif;line-height:1}
.tut-book-C{background:#a8322d;color:#fff}.tut-book-M{background:#397244;color:#fff}.tut-book-J{background:#d8b326;color:#111}.tut-book-A{background:#f4f1e9;color:#111}

.tut-center{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid #2b3946;border-radius:10px;background:#0a1016}
.tut-graph-view,.tut-notes-view{position:absolute;inset:0}
.tut-notes-view{display:none;overflow:auto;padding:16px;background:#0c131a}
.tutorial-stage.tut-notes-mode .tut-graph-view{display:none}
.tutorial-stage.tut-notes-mode .tut-notes-view{display:block}
.tut-graph-svg{width:100%;height:100%;display:block}
.tut-edge{fill:none;stroke:#c5ced6;stroke-width:2.2;opacity:.92;transition:opacity .42s ease,stroke .42s ease}
.tut-edge.redirect{stroke-dasharray:8 6}
.tut-edge.cyan{stroke:#4dd6ff;filter:drop-shadow(0 0 4px rgba(77,214,255,.75))}
.tut-edge.hidden-edge{opacity:0}
.tut-edge.dim{opacity:.08}
.tut-diamond{fill:#c5ced6;stroke:#0a1016;stroke-width:1.2;transition:fill .42s ease}
.tut-diamond.cyan{fill:#4dd6ff;filter:drop-shadow(0 0 4px rgba(77,214,255,.8))}
.tut-node{transition:opacity .45s ease,transform .825s ease}
.tut-node.dim{opacity:.2}
.tut-node circle{stroke:rgba(255,255,255,.72);stroke-width:1.4}
.tut-node.unread circle{stroke:#4dd6ff;stroke-width:3;filter:drop-shadow(0 0 7px rgba(77,214,255,.7))}
.tut-node.selected circle{stroke:#fff;stroke-width:3.2;filter:drop-shadow(0 0 9px rgba(255,255,255,.75))}
.tut-node text{fill:#edf2f6;font:13px Georgia,serif;text-anchor:middle;paint-order:stroke;stroke:#0a1016;stroke-width:4px;stroke-linejoin:round}
.tut-node .tut-symbol{font:bold 16px Georgia,serif;stroke:none;paint-order:normal}
.tut-node .tut-appendix-symbol{font:bold 18px Arial,sans-serif;fill:#000}
.tut-node-book-icon{pointer-events:none}
.tut-node.unread .tut-label{fill:#4dd6ff}
.tut-graph-hint{position:absolute;left:12px;bottom:10px;color:#70808e;font:12px Arial,sans-serif}
.tut-demo-badge{position:absolute;left:50%;top:16px;transform:translateX(-50%);padding:8px 12px;border:1px solid #3f5668;border-radius:8px;background:rgba(13,20,27,.94);color:#c9d6df;font:13px Arial,sans-serif;opacity:0;transition:opacity .27s ease;white-space:nowrap}
.tut-demo-badge.visible{opacity:1}

.tut-right{min-width:0}
.tut-right .tut-panel{flex:1}
.tut-details{height:100%;overflow:auto;padding:16px}
.tut-details h2{font:400 26px Georgia,serif;margin:0 0 5px}
.tut-details h3{font:400 19px Georgia,serif;margin:17px 0 9px;padding-top:13px;border-top:1px solid #2b3946}
.tut-details p{margin:5px 0;color:#9aa7b3;font:14px/1.4 Georgia,serif}
.tut-reference-row{display:grid;grid-template-columns:40px 25px minmax(0,1fr);align-items:center;gap:7px;margin:7px 0;color:#edf2f6;font:14px Georgia,serif}
.tut-connection-icon{display:block;width:40px;height:16px;color:#c5ced6;overflow:visible}
.tut-note-readonly{padding:10px 11px;border:1px solid #2b3946;border-radius:8px;background:#0f151c;color:#edf2f6;font:14px/1.45 Georgia,serif}
.tut-note-readonly p{color:#edf2f6;margin:.3em 0}
.tut-note-readonly ul{margin:.35em 0;padding-left:1.4em}
.tut-edit-button,.tut-collapse-button,.tut-reopen-tab,.tut-mock-toolbar-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:7px 10px;border:1px solid #40505f;border-radius:8px;
  background:linear-gradient(180deg,#263440,#1b2731);color:#edf2f6;font:13px Arial,sans-serif;
}
.tut-edit-button{width:100%;margin-top:12px}
.tut-collapse-button{position:absolute;top:14px;z-index:5}
.tut-collapse-left{left:270px}.tut-collapse-right{right:340px}
.tut-reopen-tab{position:absolute;top:14px;z-index:6;opacity:0;transition:opacity .27s ease}
.tut-reopen-left{left:0;border-radius:0 8px 8px 0}.tut-reopen-right{right:0;border-radius:8px 0 0 8px}
.tutorial-stage.tut-left-collapsed .tut-reopen-left,.tutorial-stage.tut-right-collapsed .tut-reopen-right{opacity:1}
.tutorial-stage.tut-left-collapsed .tut-collapse-left,.tutorial-stage.tut-right-collapsed .tut-collapse-right{opacity:0}

.tut-notes-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tut-notes-header h2{margin:0;font:400 23px Georgia,serif}
.tut-note-card{margin-bottom:14px;padding:16px;border:1px solid #2b3946;border-radius:10px;background:#111922}
.tut-note-card h3{margin:0 0 5px;font:400 22px Georgia,serif}
.tut-note-meta{color:#9aa7b3;font:12px Arial,sans-serif;margin-bottom:10px}
.tut-format-toolbar{display:flex;gap:4px;padding:6px;border:1px solid #2b3946;border-bottom:0;border-radius:7px 7px 0 0;background:#0b1117}
.tut-format-tool{width:29px;height:29px;display:grid;place-items:center;border:1px solid transparent;border-radius:5px;background:transparent;color:#edf2f6;font:13px Arial,sans-serif}
.tut-format-tool.active{border-color:#4dd6ff;background:#173240;box-shadow:0 0 10px rgba(77,214,255,.25)}
.tut-note-editor{min-height:115px;padding:11px 12px;border:1px solid #2b3946;border-radius:0 0 7px 7px;background:#0f151c;color:#edf2f6;font:14px/1.5 Georgia,serif}
.tut-saved{margin-top:6px;color:#9ee5b1;font:12px Arial,sans-serif;opacity:0;transition:opacity .3s ease}.tut-saved.visible{opacity:1}
.tut-pdf-preview{display:none;margin:18px auto 0;width:min(340px,75%);padding:24px;border-radius:3px;background:#f8f6ef;color:#202020;box-shadow:0 16px 34px rgba(0,0,0,.4);font:13px/1.45 Georgia,serif;transform:rotate(-1deg)}
.tut-pdf-preview.visible{display:block;animation:tutPdfIn .675s ease both}@keyframes tutPdfIn{from{opacity:0;transform:translateY(20px) rotate(-2deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(-1deg) scale(1)}}
.tut-file-demo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:12px;padding:16px 18px;border:1px solid #456378;border-radius:10px;background:#111922;box-shadow:0 14px 34px rgba(0,0,0,.42);font:14px Arial,sans-serif}
.tut-file-demo.visible{display:flex;animation:tutPop .525s ease both}@keyframes tutPop{from{opacity:0;transform:translate(-50%,-44%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.tut-file-icon{width:44px;height:54px;display:grid;place-items:center;border-radius:4px;background:#e8eef3;color:#1c3444;font:bold 12px Arial,sans-serif}

.tutorial-focus{
  z-index:2!important;
  border-color:#4dd6ff!important;
  box-shadow:0 0 0 2px rgba(77,214,255,.82),0 0 22px rgba(77,214,255,.42)!important;
}
body.tutorial-active .tutorial-live-target{
  position:relative!important;
  z-index:20006!important;
  border-color:#4dd6ff!important;
  box-shadow:0 0 0 2px rgba(77,214,255,.82),0 0 24px rgba(77,214,255,.5)!important;
  pointer-events:none!important;
}
body.tutorial-active.tutorial-final #coffee-button.tutorial-live-target{pointer-events:auto!important}
body.tutorial-active.tutorial-step-8 #print-notes-pdf{display:inline-flex!important}
body.tutorial-active{user-select:none}

.tutorial-card{
  position:fixed;
  z-index:20010;
  width:min(500px,calc(100vw - 28px));
  max-height:min(78vh,660px);
  overflow:auto;
  padding:22px 23px 18px;
  border:1px solid #4b6477;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(24,35,46,.99),rgba(13,21,29,.99));
  box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:auto;
}
.tutorial-card h2{margin:0 0 12px;font:400 25px Georgia,serif;color:#f1f5f8}
.tutorial-card p{margin:0 0 12px;color:#cbd5dc;font:15px/1.56 Georgia,serif;white-space:pre-line}
.tutorial-card p:last-of-type{margin-bottom:0}
.tutorial-progress{margin-top:16px;color:#7f93a3;font:12px Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.tutorial-actions{display:flex;align-items:center;gap:8px;margin-top:15px;padding-top:14px;border-top:1px solid #2b3946}
.tutorial-actions .tutorial-skip{margin-right:auto}
.tutorial-actions button{
  min-height:38px;padding:8px 13px;border:1px solid #40505f;border-radius:8px;
  background:linear-gradient(180deg,#263440,#1b2731);color:#edf2f6;font:13px Arial,sans-serif;
}
.tutorial-actions button:hover{background:linear-gradient(180deg,#2f4150,#22313d)}
.tutorial-actions .tutorial-next,.tutorial-actions .tutorial-finish{border-color:#4d9bc1;background:linear-gradient(180deg,#244253,#173143)}
.tutorial-actions button:focus-visible{outline:2px solid #4dd6ff;outline-offset:2px}
.tutorial-step-caption{position:absolute;right:12px;bottom:10px;z-index:4;color:#637481;font:11px Arial,sans-serif}

@media (max-width:1050px){
  .tut-workspace{grid-template-columns:230px minmax(300px,1fr) 290px}
  .tut-collapse-left{left:220px}.tut-collapse-right{right:280px}
  .tutorial-stage.tut-left-collapsed .tut-workspace{grid-template-columns:0 minmax(300px,1fr) 290px}
  .tutorial-stage.tut-right-collapsed .tut-workspace{grid-template-columns:230px minmax(300px,1fr) 0}
}
@media (max-width:760px){
  .tutorial-stage{left:8px!important;right:8px!important;width:auto!important}
  .tut-workspace{grid-template-columns:190px minmax(260px,1fr)}
  .tut-right{display:none}.tut-collapse-right,.tut-reopen-right{display:none}
  .tutorial-card{max-height:62vh;padding:18px}
  .tutorial-card h2{font-size:22px}.tutorial-card p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .tutorial-stage *,body.tutorial-active .tutorial-live-target{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.tut-symbol-legend{
  position:absolute;right:14px;bottom:14px;z-index:5;
  display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;
  padding:10px;border:1px solid #2b3946;border-radius:9px;
  background:rgba(17,25,34,.96);font:12px Arial,sans-serif;
}
.tut-symbol-legend[hidden]{display:none}
.tut-symbol-item{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:6px}

/* Embedded Pepe Silvia board styles */

:host{--board:#121615;--ink:#24211e;--serif:Georgia,'Times New Roman',serif;}
*{box-sizing:border-box}
:host{display:block;position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;background:#090b0b;color:#eee8dc}
:host{font-family:var(--serif)}
.topbar{height:56px;display:flex;align-items:center;gap:18px;padding:0 18px;position:relative;z-index:300;background:rgba(7,9,9,.97);border-bottom:1px solid #303332;box-shadow:0 4px 18px rgba(0,0,0,.48)}
.brand{letter-spacing:.18em;font-weight:700;font-size:14px;color:#ded7ca}
:host .divider{width:1px;height:28px;background:#393c3b}
.view-title{font:700 14px/1 system-ui,sans-serif}
.instruction{margin-left:auto;color:#aaa79f;font:12px/1.2 system-ui,sans-serif}
.board{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 52% 43%,rgba(78,72,56,.10),transparent 43%),repeating-linear-gradient(112deg,rgba(255,255,255,.011) 0 1px,transparent 1px 9px),linear-gradient(135deg,#0c0f0f,#191c1b 53%,#0a0c0c)}
.board::after{content:'';position:absolute;inset:0;z-index:220;pointer-events:none;box-shadow:inset 0 0 160px rgba(0,0,0,.74)}
#backgroundLayer{position:absolute;inset:-4% -4%;z-index:6;pointer-events:none}
#paperLayer{position:absolute;inset:0;z-index:20}
#scrawlCanvas,#pageShadowCanvas,#contactCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#scrawlCanvas{z-index:120;opacity:.90}
#pageShadowCanvas{z-index:130;mix-blend-mode:multiply}
#contactCanvas{z-index:131;mix-blend-mode:multiply}
#paperShadowLayer{display:none}
#yarn{position:absolute;inset:0;width:100%;height:100%;z-index:140;overflow:visible;pointer-events:none}
.yarn-under{fill:none;stroke:rgba(124,22,18,.94);opacity:var(--yarn-under-opacity,.94);stroke-width:6.0;stroke-linecap:round;stroke-linejoin:round;transform:translate(.18px,1.28px)}
.yarn-belly{fill:none;stroke:rgba(51,6,6,.28);opacity:var(--yarn-belly-opacity,1);stroke-width:3.55;stroke-linecap:round;stroke-linejoin:round;transform:translate(.34px,1.95px);filter:url(#bellyBlur)}
.yarn-core{fill:none;stroke:#c62821;stroke-width:4.95;stroke-linecap:round;stroke-linejoin:round}
.yarn-mid{fill:none;stroke:#dd3c32;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.yarn-top{fill:none;stroke:rgba(255,172,145,.26);stroke-width:.92;stroke-linecap:round;stroke-linejoin:round;transform:translate(-.08px,-.34px)}
.twist-groove{fill:none;stroke:rgba(118,20,17,.58);stroke-width:1.14;stroke-linecap:round}
.twist-ridge{fill:none;stroke:rgba(255,181,160,.32);stroke-width:.76;stroke-linecap:round}
.fiber{stroke-linecap:round;pointer-events:none;filter:url(#fiberSoft)}
.pin-sphere{fill:url(#pinSphere)}
.pin-shade{fill:url(#pinShade);opacity:var(--pin-shade-opacity,.78)}
.pin-highlight{fill:rgba(255,202,184,.42);filter:url(#highlightBlur)}
.pin-speck{fill:rgba(88,8,7,.16)}
.pin-rim-light{fill:none;stroke:rgba(255,159,139,.22);stroke-width:.65}
.yarn-shadow{fill:none;stroke:rgba(0,0,0,.72);stroke-width:7.2;stroke-linecap:round}.yarn-line{fill:none;stroke:#c62821;stroke-width:3.4;stroke-linecap:round}.yarn-glint{fill:none;stroke:rgba(255,126,107,.34);stroke-width:.85;stroke-linecap:round}
.paper{--x:50%;--y:50%;--w:240px;--h:320px;--r:0deg;--z:20;position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-50%) rotate(var(--r));transform-origin:50% 50%;z-index:var(--z);cursor:pointer;user-select:none;transition:left .62s cubic-bezier(.2,.76,.2,1),top .62s cubic-bezier(.2,.76,.2,1),width .62s cubic-bezier(.2,.76,.2,1),height .62s cubic-bezier(.2,.76,.2,1),transform .62s cubic-bezier(.2,.76,.2,1),filter .22s ease}
.paper:hover{filter:none}
.paper.selected{filter:none}
.paper.filler{cursor:default;opacity:.98;transition:none}
.paper.filler:hover{filter:none}
.paper-shadow{display:none}
.sheet{position:absolute;inset:0;overflow:hidden;color:var(--ink);box-shadow:none;background-color:#d8d0bc;isolation:isolate;background-image:url("pepe/paper-texture.webp");background-size:cover;background-position:center}
.sheet::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,252,244,.66),rgba(238,233,219,.48) 68%,rgba(219,212,195,.40));mix-blend-mode:screen;opacity:.36;pointer-events:none}
.tape{position:absolute;width:82px;height:22px;left:50%;top:-10px;z-index:7;transform:translateX(-50%) rotate(var(--tape-r,-4deg));background:linear-gradient(90deg,rgba(184,164,116,.54),rgba(232,214,168,.80),rgba(181,159,110,.58));border-radius:1px;opacity:.82;box-shadow:0 1px 0 rgba(255,245,210,.18) inset;mix-blend-mode:multiply;pointer-events:none}
.paper-body{position:absolute;inset:0;padding:14px 16px 14px;display:flex;flex-direction:column;gap:4px;z-index:4}
.paper.filler .paper-body{padding-top:16px}
.title-wrap{position:relative;flex:0 0 auto;padding-top:1px;padding-bottom:4px;margin-bottom:1px}
.title-wrap.hidden{display:none}
.title-image{display:block;max-width:100%;width:auto;height:auto;max-height:68px;pointer-events:none;image-rendering:auto}
.title-rule{height:2px;background:rgba(70,66,61,.54);margin-top:3px;transform:rotate(var(--title-r,-0.7deg));transform-origin:left center}
.note-area{position:relative;flex:1 1 auto;overflow:hidden;padding-right:2px}
.note-body{font-family:'DirtyEnough', cursive; font-size:24px; line-height:0.96; color:#2b2722; white-space:pre-wrap; word-break:break-word; letter-spacing:0.01em; transform:rotate(var(--note-r,0deg)); transform-origin:left top;}
.note-body.filler-note{opacity:.92}
.paper.connected{z-index:90 !important}
.paper.selected{z-index:82 !important}
#centerScrawl{display:none}
#centerScrawl img{display:block;width:100%;height:auto;max-height:58vh;object-fit:contain;}


@media (max-width:900px){.instruction{display:none} #centerScrawl{width:88vw}}
.title-fallback{font-family:DirtyEnough,Georgia,serif;font-size:34px;line-height:1.05;color:#272727;text-align:center;transform:rotate(var(--title-r));padding:2px 8px 5px}
.empty-board-message{position:absolute;inset:0;display:grid;place-items:center;z-index:300;color:#443f35;font:28px DirtyEnough,Georgia,serif;background:#d9d0bd}