@font-face{
    font-family:'Fraunces'; font-style:normal; font-weight:400;
    font-display:swap; src:url(fonts/fraunces-variable.woff2) format('woff2');
  }
  @font-face{
    font-family:'Fraunces'; font-style:normal; font-weight:500;
    font-display:swap; src:url(fonts/fraunces-variable.woff2) format('woff2');
  }
  @font-face{
    font-family:'Fraunces'; font-style:normal; font-weight:600;
    font-display:swap; src:url(fonts/fraunces-variable.woff2) format('woff2');
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
    font-display:swap; src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
    font-display:swap; src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:600;
    font-display:swap; src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:400;
    font-display:swap; src:url(fonts/inter-variable.woff2) format('woff2');
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:500;
    font-display:swap; src:url(fonts/inter-variable.woff2) format('woff2');
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:600;
    font-display:swap; src:url(fonts/inter-variable.woff2) format('woff2');
  }
  :root{
    --bg:            #12181A;
    --bg-raised:     #1A2225;
    --bg-inset:      #0D1214;
    --line:          #2A3336;
    --line-soft:     #212A2D;
    --wood:          #C08650;
    --wood-dim:      #8A6440;
    --glass:         #6FA8A0;
    --glass-dim:     #4C7B75;
    --text:          #E9E4DA;
    --text-muted:    #8B958F;
    --text-faint:    #566063;
    --danger:        #C97462;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    min-height:100vh;
  }
  ::selection{ background:var(--glass-dim); color:#fff; }

  a{ color:inherit; }

  /* ---------- top bar ---------- */
  header.top{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:22px 28px 18px;
    border-bottom:1px solid var(--line-soft);
  }
  .wordmark-logo{
    display:block;
    height:56px;
    width:auto;
  }
  .wordmark-logo .wordmark-text{ fill:var(--text); }
  .wordmark-logo .wordmark-swirl{ fill:var(--wood); }
  .tagline{
    font-size:12.5px;
    color:var(--text-faint);
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }

  /* ---------- layout ---------- */
  .layout{
    display:grid;
    grid-template-columns: 300px 1fr 340px;
    gap:0;
    /* fixed, not min-height: on a short screen the controls/output columns
       scroll internally instead of stretching the whole page taller than
       the window — otherwise the viewport (and anything docked to its
       edges, like the reset-view button) can end up below the fold */
    height:calc(100vh - 68px);
  }
  @media (max-width: 980px){
    /* stacked layout reads top-to-bottom on a real page scroll instead —
       independent per-column scrolling only makes sense side-by-side */
    .layout{ grid-template-columns: 1fr; height:auto; }
    .col{ overflow-y:visible; min-height:0; }
  }

  .col{
    padding:22px 24px;
    overflow-y:auto;
    min-height:0; /* let the grid item shrink below its content size so overflow-y actually scrolls instead of growing the row */
  }
  .col.controls{ border-right:1px solid var(--line-soft); }
  .col.output{ border-left:1px solid var(--line-soft); }

  h2.section-title{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.11em;
    color:var(--text-faint);
    margin:0 0 14px;
    display:flex; align-items:center; gap:8px;
  }
  h2.section-title::after{
    content:''; flex:1; height:1px; background:var(--line-soft);
  }
  h2.section-title.spaced-top{ margin-top:22px; }
  h2.section-title.tight-bottom{ margin-bottom:12px; }

  /* ---------- shape picker ---------- */
  .shape-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    margin-bottom:26px;
  }
  .shape-chip{
    border:1px solid var(--line);
    background:var(--bg-raised);
    border-radius:3px;
    padding:11px 10px;
    font-size:12.5px;
    cursor:pointer;
    color:var(--text-muted);
    text-align:left;
    transition:border-color .15s, color .15s;
  }
  .shape-chip.active{
    border-color:var(--glass);
    color:var(--text);
    box-shadow: inset 0 0 0 1px var(--glass);
  }
  .shape-chip.soon{
    cursor:not-allowed;
    opacity:.45;
  }
  .shape-chip .name{ display:block; font-weight:500; }
  .shape-chip .sub{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; font-family:'IBM Plex Mono', monospace; }

  /* ---------- fields ---------- */
  .field{ margin-bottom:16px; }
  .field.pulled-up{ margin-top:-4px; }
  .field label{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:12px; color:var(--text-muted); margin-bottom:6px;
  }
  .field label .unit{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--text-faint); }
  .field input[type=number]{
    width:100%;
    background:var(--bg-inset);
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--text);
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    padding:9px 10px;
  }
  .field input[type=number]:focus{ outline:none; border-color:var(--glass); }
  .field input[type=range]{ width:100%; accent-color:var(--glass); }

  .toggle-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0;
    border-top:1px solid var(--line-soft);
    font-size:13px;
  }
  .toggle-row:first-of-type{ border-top:none; }
  .switch{
    position:relative; width:36px; height:20px; flex-shrink:0;
  }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{
    position:absolute; cursor:pointer; inset:0;
    background:var(--line); border-radius:20px; transition:.15s;
  }
  .slider::before{
    content:''; position:absolute; height:14px; width:14px; left:3px; top:3px;
    background:var(--text-muted); border-radius:50%; transition:.15s;
  }
  input:checked + .slider{ background:var(--glass-dim); }
  input:checked + .slider::before{ transform:translateX(16px); background:var(--text); }

  .rates{
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid var(--line-soft);
  }
  .rate-row{
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
  }
  .rate-row label{ flex:1; font-size:12px; color:var(--text-muted); }
  .rate-row input{
    width:80px; background:var(--bg-inset); border:1px solid var(--line);
    border-radius:3px; color:var(--text); font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; padding:6px 8px; text-align:right;
  }

  /* ---------- viewport ---------- */
  .col.viewport{ padding:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
  #canvas-wrap{ flex:1; position:relative; min-height:340px; }
  #canvas-wrap canvas{ display:block; }
  .viewport-hint{
    position:absolute; bottom:14px; left:18px;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px; color:var(--text-faint);
    letter-spacing:.02em;
  }
  .viewport-price{
    position:absolute; top:18px; right:18px;
    text-align:right;
  }
  .viewport-price .amount{
    font-family:'Fraunces', serif;
    font-size:34px;
    font-weight:500;
    color:var(--text);
    line-height:1;
  }
  .viewport-price .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em;
    margin-top:4px;
  }
  .dim-label{
    position:absolute; top:0; left:0;
    transform:translate(-50%,-50%);
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; font-weight:500; color:var(--text);
    background:rgba(18,24,26,0.82);
    padding:2px 6px; border-radius:3px;
    white-space:nowrap; pointer-events:none;
    display:none;
  }
  .dim-label.visible{ display:block; }
  .dim-label.angle-label{ color:#E8C468; }
  .dim-label.bevel-label{ color:#7EC8E3; }
  button.btn.reset-view{
    position:absolute; bottom:14px; right:18px;
    font-size:11px; padding:6px 12px;
    background:var(--bg-raised); opacity:0.85;
  }
  button.btn.reset-view:hover{ opacity:1; }
  .fit-warning{
    position:absolute; top:18px; left:18px;
    background:rgba(201,116,98,0.12);
    border:1px solid var(--danger);
    color:#E8B4A8;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    padding:8px 12px;
    border-radius:3px;
    display:none;
    max-width:260px;
  }

  /* ---------- cut list ---------- */
  table.cutlist{
    width:100%;
    border-collapse:collapse;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
  }
  table.cutlist th{
    text-align:left;
    font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-faint);
    padding:0 0 8px;
    border-bottom:1px solid var(--line-soft);
    font-weight:500;
  }
  table.cutlist th.text-right{ text-align:right; }
  table.cutlist td{
    padding:9px 0;
    border-bottom:1px solid var(--line-soft);
    color:var(--text-muted);
  }
  table.cutlist tr:last-child td{ border-bottom:none; }
  table.cutlist td.part{ color:var(--text); }
  table.cutlist td.dims{ white-space:nowrap; }
  table.cutlist td.qty{ text-align:right; color:var(--text-faint); }
  table.cutlist th.vis-col{ width:22px; }
  table.cutlist td.vis, table.cutlist td.iso{ text-align:right; padding-left:6px; }
  .vis-btn, .iso-btn{
    background:none; border:none; cursor:pointer; padding:2px 4px;
    display:inline-flex; align-items:center; color:var(--text-faint);
    transition:color .15s;
  }
  .vis-btn:hover, .iso-btn:hover{ color:var(--text-muted); }
  .vis-btn.active{ color:var(--glass); }
  .iso-btn.active{ color:var(--wood); }
  .swatch{ display:inline-block; width:7px; height:7px; border-radius:1px; margin-right:7px; }
  .swatch.wood{ background:var(--wood); }
  .swatch.glass{ background:var(--glass); }
  .swatch.hardware{ background:#9AA6A0; }
  .swatch.flagged{ background:#E8C468; }

  .total-row{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
    font-family:'IBM Plex Mono', monospace;
  }
  .total-row .k{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
  .total-row .v{ font-size:20px; color:var(--text); }

  .starred-legend{
    margin-top:8px; font-size:11px; color:var(--text-faint); line-height:1.5;
    display:none;
  }
  .starred-legend.visible{ display:block; }
  .starred-legend .legend-swatches{
    display:flex; align-items:center; gap:6px; margin-bottom:6px;
    color:var(--text-muted);
  }
  .starred-legend .legend-swatches .swatch{ margin-right:0; }
  .starred-legend .legend-swatches .swatch.flagged{ margin-left:10px; }

  .receipt-meta{
    margin-top:18px; padding:12px; background:var(--bg-inset);
    border:1px solid var(--line-soft); border-radius:3px;
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--text-faint);
    line-height:1.7;
  }
  .receipt-meta b{ color:var(--text-muted); }

  .actions{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
  button.btn{
    font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
    padding:11px 14px; border-radius:3px; cursor:pointer;
    border:1px solid var(--line); background:var(--bg-raised); color:var(--text);
    transition:border-color .15s;
  }
  button.btn:hover{ border-color:var(--glass); }
  button.btn.primary{
    background:var(--wood-dim); border-color:var(--wood-dim); color:#1a1310;
    font-weight:600;
  }
  button.btn.primary:hover{ background:var(--wood); border-color:var(--wood); }
  .file-label{ text-align:center; display:block; }
  .hidden{ display:none; }
  .copied-flag{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--glass);
    text-align:center; height:14px; margin-top:-2px;
  }

  footer.foot{
    grid-column:1 / -1;
    padding:14px 24px;
    border-top:1px solid var(--line-soft);
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px; color:var(--text-faint);
    display:flex; justify-content:space-between;
  }