:root{
    --paper:#F5F1E8;
    --paper-veil:rgba(245,241,232,0.88);
    --ink:#1D1812;
    --ink-soft:#6E6657;
    --hair:#D9D1C0;
    --terra:#A2492F;
    --green:#56604A;
    --serif:'Cormorant Garamond',serif;
    --mono:'IBM Plex Mono',monospace;
    --sans:'Archivo',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    overflow:hidden;
  }
  #stage{position:fixed;inset:0;display:block;}
  #ui{position:fixed;inset:0;pointer-events:none;}
  #ui .pane{pointer-events:auto;}

  .cap{font-family:var(--sans);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);}
  .capdark{color:var(--ink);}
  .mono{font-family:var(--mono);}

  /* ---------- header ---------- */
  header{
    position:absolute;top:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 28px;gap:16px;
  }
  .brand{display:flex;flex-direction:column;gap:3px;}
  .brand h1{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:0.04em;line-height:1;}
  .brand .cap{font-size:9px;}
  #views{display:flex;gap:0;border:1px solid var(--hair);background:var(--paper-veil);backdrop-filter:blur(8px);}
  #views button{
    appearance:none;border:0;background:transparent;cursor:pointer;
    font-family:var(--sans);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ink-soft);padding:10px 18px;border-right:1px solid var(--hair);
    transition:color .2s, background .2s;
  }
  #views button:last-child{border-right:0;}
  #views button:hover{color:var(--ink);}
  #views button.active{background:var(--ink);color:var(--paper);}
  #refBtn,#turnBtn,#snapBtn,#saveBtn,#specBtn,#randBtn{
    appearance:none;border:1px solid var(--hair);background:var(--paper-veil);backdrop-filter:blur(8px);cursor:pointer;
    font-family:var(--sans);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);
    padding:10px 16px;transition:color .2s,border-color .2s;
  }
  #refBtn:hover,#turnBtn:hover,#snapBtn:hover,#saveBtn:hover,#specBtn:hover,#randBtn:hover{color:var(--ink);border-color:var(--ink-soft);}
  #saveBtn{color:var(--terra);border-color:var(--terra);}
  #saveBtn:hover{background:var(--terra);color:var(--paper);border-color:var(--terra);}
  #turnBtn.off{color:var(--ink);border-color:var(--ink);}
  .hdr-btns{display:flex;gap:8px;}

  /* ---------- left panel : composition ---------- */
  #panel-left{
    position:absolute;left:28px;top:86px;bottom:64px;width:296px;
    overflow-y:auto;overscroll-behavior:contain;
    padding:18px 18px 24px 0;
    mask-image:linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
    transition:opacity .35s, transform .35s, bottom .35s;
  }
  body.view-hero #panel-left{bottom:64px;}
  #panel-left.hidden{opacity:0;transform:translateX(-16px);pointer-events:none!important;}
  #panel-left::-webkit-scrollbar{width:3px;}
  #panel-left::-webkit-scrollbar-thumb{background:var(--hair);}
  .panel-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:14px;}
  .panel-title .cap{color:var(--ink);}
  #presets{display:flex;gap:8px;margin-bottom:18px;}
  #presets button{
    appearance:none;cursor:pointer;border:1px solid var(--hair);background:transparent;
    font-family:var(--serif);font-size:14px;font-style:italic;color:var(--ink-soft);
    padding:5px 12px;transition:all .2s;
  }
  #presets button:hover{border-color:var(--ink);color:var(--ink);}
  #moldsel{margin-bottom:18px;border-left:2px solid var(--ink);padding:2px 0 2px 10px;}
  #moldsel>.cap{display:block;margin-bottom:4px;}
  #formName{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.05;}
  #formWhy{font-size:9px;margin-top:2px;}
  .molds{display:flex;flex-wrap:wrap;gap:6px;}
  .molds button{
    appearance:none;cursor:pointer;border:1px solid var(--hair);background:transparent;
    font-family:var(--sans);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
    padding:6px 10px;transition:all .2s;
  }
  .molds button:hover{color:var(--ink);border-color:var(--ink-soft);}
  .molds button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

  .layer-row{border-bottom:1px solid var(--hair);padding:12px 0 14px;}
  .layer-row.off .lr-body{display:none;}
  .layer-row.off .lr-name{color:var(--ink-soft);text-decoration:line-through;text-decoration-thickness:1px;}
  .lr-head{display:flex;align-items:center;gap:8px;}
  .lr-swatch{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);flex:none;transition:background .3s;}
  .lr-name{
    appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
    font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:0.01em;
  }
  .lr-pct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink);}
  .lr-on{appearance:none;border:0;background:transparent;cursor:pointer;font-size:11px;color:var(--ink-soft);font-family:var(--mono);padding:2px 0 2px 6px;}
  .lr-body{display:flex;flex-direction:column;gap:9px;margin-top:9px;}
  .lr-line{display:flex;align-items:center;gap:10px;}
  .lr-line .cap{flex:none;width:66px;font-size:8px;letter-spacing:0.06em;white-space:nowrap;}
  input[type=range]{
    -webkit-appearance:none;appearance:none;flex:1;height:14px;background:transparent;cursor:pointer;min-width:0;
  }
  input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--hair);}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:9px;height:9px;margin-top:-4px;background:var(--ink);border-radius:0;
  }
  input[type=range]::-moz-range-track{height:1px;background:var(--hair);}
  input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--ink);border:0;border-radius:0;}
  .flavs{display:flex;gap:7px;}
  .flav{
    width:15px;height:15px;border-radius:50%;cursor:pointer;border:1px solid rgba(0,0,0,0.18);
    outline:1px solid transparent;outline-offset:2px;transition:outline-color .15s;padding:0;appearance:none;
  }
  .flav.sel{outline-color:var(--ink);}
  .reform-val{font-family:var(--mono);font-size:9px;color:var(--ink-soft);width:30px;text-align:right;flex:none;}
  /* flavour — single-tap swatch row */
  .lr-flav{align-items:flex-start;}
  .flavpick{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
  .fp{
    width:16px;height:16px;border-radius:50%;padding:0;cursor:pointer;
    appearance:none;-webkit-appearance:none;background-clip:padding-box;
    border:1px solid rgba(0,0,0,0.18); outline:1.5px solid transparent; outline-offset:2px;
    transition:outline-color .15s, transform .12s;
  }
  .fp:hover{transform:scale(1.15);}
  .fp.sel{outline-color:var(--ink);}
  .panel-note{margin-top:14px;font-size:10px;line-height:1.6;color:var(--ink-soft);}

  /* ---------- right panel : legend ---------- */
  #panel-right{
    position:absolute;right:28px;top:86px;bottom:30px;width:264px;
    display:flex;flex-direction:column;gap:0;
    overflow-y:auto;overscroll-behavior:contain;
    mask-image:linear-gradient(to bottom, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  #panel-right::-webkit-scrollbar{width:3px;}
  #panel-right::-webkit-scrollbar-thumb{background:var(--hair);}
  #legend{border-top:1px solid var(--ink);padding-top:10px;}
  #legend .leg-head{margin-bottom:4px;}
  .leg-item{display:grid;grid-template-columns:40px 1fr;gap:11px;padding:8px 0;border-bottom:1px solid var(--hair);align-items:start;}
  .leg-item svg{width:40px;height:28px;display:block;color:var(--ink);}
  .leg-item h3{font-family:var(--sans);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;margin-bottom:3px;color:var(--ink);}
  .leg-item p{font-size:10px;line-height:1.45;color:var(--ink-soft);}

  /* ---------- museum caption (merged into the composition panel) ---------- */
  #museum{
    border-left:2px solid var(--ink); padding:2px 0 16px 14px; margin-bottom:18px;
    border-bottom:1px solid var(--hair);
  }
  #museum .ct-no{font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:0.1em;margin-bottom:6px;}
  #museum h2{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.08;margin-bottom:5px;}
  #museum #formWhy{font-size:9px;margin-bottom:7px;}
  #museum .ct-media{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-soft);line-height:1.4;}
  #museum .ct-fact{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}

  /* totals block (health lens) — lives in the right column */
  #totals{display:none;border-top:1px solid var(--ink);padding-top:10px;}
  #lensToggle{display:flex;border:1px solid var(--hair);margin-bottom:12px;}
  #lensToggle button{flex:1;appearance:none;border:0;border-right:1px solid var(--hair);background:transparent;cursor:pointer;font-family:var(--sans);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-soft);padding:7px 4px;transition:all .2s;}
  #lensToggle button:last-child{border-right:0;}
  #lensToggle button:hover{color:var(--ink);}
  #lensToggle button.active{background:var(--ink);color:var(--paper);}
  body.view-lens #totals{display:block;}
  body.view-lens #legend{display:none;}
  body.view-lens #panel-left{opacity:0;transform:translateX(-16px);pointer-events:none;}
  body.view-compare #panel-right{opacity:0;pointer-events:none;}
  #totals .t-kcal{display:flex;align-items:baseline;gap:8px;margin:6px 0 12px;}
  #totals .t-kcal b{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1;}
  .t-row{margin-bottom:10px;}
  .t-row .t-lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
  .t-row .t-lab .cap{font-size:9px;}
  .t-row .t-lab .mono{font-size:11px;}
  .t-track{position:relative;height:4px;background:rgba(0,0,0,0.07);}
  .t-fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transition:width .5s;}
  .t-fill.terra{background:var(--terra);}
  .t-fill.green{background:var(--green);}
  .t-tick{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink);}
  .t-tick i{position:absolute;top:-12px;left:-2px;font-style:normal;font-family:var(--mono);font-size:8px;color:var(--ink-soft);white-space:nowrap;}
  .t-foot{font-size:9.5px;color:var(--ink-soft);line-height:1.5;margin-top:10px;}

  /* ---------- layer annotations (health lens) ---------- */
  #annot{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
  .ann{
    position:absolute;width:188px;opacity:0;transition:opacity .4s;
    will-change:transform;
  }
  .ann.show{opacity:1;}
  .ann .ann-line{position:absolute;top:9px;height:1px;background:var(--ink-soft);width:34px;}
  .ann.R .ann-line{left:-34px;}
  .ann.L .ann-line{right:-34px;}
  .ann .ann-dot{position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:var(--ink);}
  .ann.R .ann-dot{left:-37px;}
  .ann.L .ann-dot{right:-37px;}
  .ann.L{text-align:right;}
  .ann-name{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.2;}
  .ann-name span{font-family:var(--mono);font-size:9px;font-weight:400;color:var(--ink-soft);margin-left:6px;}
  .ann-bars{margin-top:5px;display:flex;flex-direction:column;gap:2.5px;}
  .abar{display:grid;grid-template-columns:24px 1fr 30px;gap:6px;align-items:center;}
  .ann.L .abar{grid-template-columns:30px 1fr 24px;}
  .abar .cap{font-size:7.5px;letter-spacing:0.1em;}
  .abar-track{height:3px;background:rgba(0,0,0,0.07);position:relative;}
  .abar-fill{position:absolute;top:0;bottom:0;background:var(--ink);}
  .ann.R .abar-fill{left:0;}
  .ann.L .abar-fill{right:0;}
  .abar-fill.terra{background:var(--terra);}
  .abar-fill.green{background:var(--green);}
  .abar .mono{font-size:8.5px;color:var(--ink-soft);}
  .ann.L .abar .mono{text-align:left;}
  .ann.R .abar .mono{text-align:right;}

  /* ---------- compare ---------- */
  #compareUi{position:absolute;left:0;right:0;bottom:0;top:0;display:none;}
  #compareUi.show{display:block;}
  .cmp-cap{
    position:absolute;bottom:96px;width:300px;text-align:center;
  }
  .cmp-cap.left{left:calc(25% - 150px);}
  .cmp-cap.right{right:calc(25% - 150px);}
  .cmp-cap h3{font-family:var(--sans);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:6px;}
  .cmp-cap .cmp-nums{font-family:var(--mono);font-size:11px;color:var(--ink-soft);line-height:1.7;}
  .cmp-cap .cmp-nums b{color:var(--ink);font-weight:500;}
  #cmp-delta{
    position:absolute;left:50%;transform:translateX(-50%);bottom:96px;width:230px;text-align:center;
    border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding:0 14px;
  }
  #cmp-delta .cap{display:block;margin-bottom:8px;}
  #cmp-delta .d-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;line-height:2;}
  #cmp-delta .d-row .neg{color:var(--green);}
  #cmp-delta .d-row .pos{color:var(--terra);}
  #cmp-scrub{
    position:absolute;left:50%;transform:translateX(-50%);bottom:34px;width:380px;
    display:flex;align-items:center;gap:14px;pointer-events:auto;
  }
  #cmp-scrub .cap{flex:none;font-size:9px;}
  #cmp-replay{appearance:none;border:1px solid var(--hair);background:var(--paper-veil);cursor:pointer;font-family:var(--mono);font-size:9px;color:var(--ink-soft);padding:4px 9px;}
  #cmp-replay:hover{color:var(--ink);border-color:var(--ink-soft);}

  /* ---------- footer ---------- */
  #disclaimer{
    position:absolute;bottom:10px;left:0;right:0;text-align:center;
    font-size:9px;letter-spacing:0.06em;color:var(--ink-soft);opacity:0.85;
  }

  /* ---------- shelf (gallery collection) ---------- */
  #shelfUi{
    position:absolute; inset:86px 28px 52px 28px; display:none; flex-direction:column;
    pointer-events:auto; background:var(--paper-veil); backdrop-filter:blur(10px);
    padding:20px 22px; border:1px solid var(--hair);
  }
  body.view-shelf #shelfUi{display:flex;}
  body.view-shelf #panel-right{opacity:0;pointer-events:none;}
  .shelf-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:18px;gap:16px;}
  .shelf-head .cap.capdark{font-size:12px;}
  #shelfCount{margin-left:12px;}
  .shelf-actions{display:flex;gap:8px;}
  .shelf-actions button{appearance:none;border:1px solid var(--hair);background:transparent;cursor:pointer;font-family:var(--sans);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);padding:8px 12px;transition:all .2s;}
  .shelf-actions button:hover{color:var(--ink);border-color:var(--ink-soft);}
  #shelfSave{color:var(--terra);border-color:var(--terra);}
  #shelfSave:hover{background:var(--terra);color:var(--paper);}
  #shelfGrid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:22px 20px;
    overflow-y:auto; overscroll-behavior:contain; padding:4px 4px 24px; align-content:start;
  }
  #shelfGrid::-webkit-scrollbar{width:4px;} #shelfGrid::-webkit-scrollbar-thumb{background:var(--hair);}
  .shelf-card{position:relative; cursor:pointer; display:flex; flex-direction:column;}
  .shelf-card .sc-plate{
    position:relative; aspect-ratio:1/1; background:linear-gradient(180deg,#EEE9DD,#E0DACB);
    border:1px solid var(--hair); overflow:hidden;
    box-shadow:0 1px 0 #fff inset, 0 10px 18px -12px rgba(29,24,18,0.4);
    transition:transform .25s, box-shadow .25s;
  }
  .shelf-card:hover .sc-plate{transform:translateY(-4px); box-shadow:0 16px 26px -14px rgba(29,24,18,0.5);}
  .shelf-card .sc-plate img{width:100%; height:100%; object-fit:cover; display:block;}
  .shelf-card .sc-del{
    position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%; border:0;
    background:rgba(245,241,232,0.85); color:var(--ink); cursor:pointer; font-size:13px; line-height:1;
    opacity:0; transition:opacity .2s; backdrop-filter:blur(4px);
  }
  .shelf-card:hover .sc-del{opacity:1;}
  .shelf-card .sc-del:hover{background:var(--terra); color:var(--paper);}
  .sc-meta{padding:9px 2px 0;}
  .sc-no{font-family:var(--mono);font-size:8.5px;letter-spacing:0.1em;color:var(--ink-soft);}
  .sc-title{font-family:var(--serif);font-size:15px;font-weight:500;line-height:1.12;margin:2px 0 3px;}
  .sc-fact{font-family:var(--mono);font-size:9px;color:var(--ink-soft);}
  .shelf-shelfline{grid-column:1/-1; height:0;}
  .shelf-empty{font-size:12px;color:var(--ink-soft);font-style:italic;font-family:var(--serif);margin-top:8px;}
  body.view-shelf #shelfEmpty[hidden]{display:none;}
  #modal{
    position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(29,24,18,0.32);backdrop-filter:blur(3px);pointer-events:auto;
  }
  #modal.show{display:flex;}
  #modal .sheet{
    background:var(--paper);border:1px solid var(--ink);max-width:760px;width:92%;
    max-height:82vh;overflow-y:auto;padding:34px 38px;
  }
  #modal h2{font-family:var(--serif);font-weight:500;font-size:26px;margin-bottom:4px;}
  #modal .sub{font-size:11px;color:var(--ink-soft);margin-bottom:20px;line-height:1.5;}
  #refTable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;}
  #refTable th{font-family:var(--sans);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;text-align:right;padding:6px 8px;border-bottom:1px solid var(--ink);}
  #refTable th:first-child,#refTable th:nth-child(2){text-align:left;}
  #refTable td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--hair);}
  #refTable td:first-child{text-align:left;font-family:var(--serif);font-size:14px;}
  #refTable td:nth-child(2){text-align:left;font-family:var(--sans);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
  #refTable tr.alt td{color:var(--green);}
  #modal .close{
    appearance:none;border:1px solid var(--hair);background:transparent;cursor:pointer;margin-top:22px;
    font-family:var(--sans);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);padding:9px 18px;
  }
  #modal .close:hover{color:var(--ink);border-color:var(--ink);}

  #webgl-fail{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:var(--ink-soft);}