@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

    @font-face {
      font-family: 'IBM Plex Sans';
      src: url('fonts/IBMPlexSans-VariableFont_wdth,wght.woff2') format('woff2');
      font-weight: 100 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'IBM Plex Mono';
      src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: 'IBM Plex Mono';
      src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
  
    @font-face {
      font-family: 'IBM Plex Mono';
      src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

:root{
    --bg:#0e1c2b;
    --panel:#0b1622;
    --panel-2:#122336;
    --grid:rgba(238,243,248,0.045);
    --grid-strong:rgba(238,243,248,0.09);
    --ink:#eef3f8;
    --muted:#7e93ab;
    --muted-2:#4f6579;
    --line:rgba(238,243,248,0.16);
    --accent:#ffb454;
    --accent-ink:#2a1c04;
    --mint:#6ee7b7;
    --danger:#ff8f8f;
    --radius:3px;
    --serif:'Fraunces', Georgia, serif;
    --sans:'IBM Plex Sans', system-ui, sans-serif;
    --mono:'IBM Plex Mono', 'Courier New', monospace;
  }

  *{box-sizing:border-box;}
  html{-webkit-tap-highlight-color:transparent;}

  body{
    margin:0;
    min-height:100vh;
    background-color:var(--bg);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:28px 28px;
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.5;
    padding:48px 20px 80px;
  }

  a{color:var(--accent);}

  .wrap{
    max-width:680px;
    margin:0 auto;
  }

  /* header */
  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:18px;
    height:1px;
    background:var(--muted-2);
    display:inline-block;
  }
  h1{
    font-family:var(--serif);
    font-weight:600;
    font-size:clamp(28px, 5vw, 38px);
    line-height:1.15;
    margin:0 0 10px;
    letter-spacing:-0.01em;
  }
  .lede{
    color:var(--muted);
    font-size:15px;
    max-width:46ch;
    margin:0 0 40px;
  }

  /* blueprint panel with corner registration marks */
  .panel{
    position:relative;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px 28px 28px;
  }
  .panel::before, .panel::after,
  .corner-br::before, .corner-br::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    border:1px solid var(--muted-2);
  }
  .panel::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .panel::after{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
  .corner-br{ position:absolute; inset:0; pointer-events:none; }
  .corner-br::before{ bottom:-1px; left:-1px; top:auto; border-right:none; border-top:none; }
  .corner-br::after{ bottom:-1px; right:-1px; top:auto; border-left:none; border-top:none; }

  /* calculator row */
  .calc-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    padding-bottom:8px;
  }

  .fraction-block{
    display:flex;
    align-items:center;
    gap:6px;
  }

  .sign-toggle{
    font-family:var(--mono);
    font-size:20px;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    width:34px;
    height:34px;
    cursor:pointer;
    transition:color .15s, border-color .15s;
  }
  .sign-toggle[data-neg="true"]{ color:var(--danger); border-color:var(--danger); }
  .sign-toggle:hover{ border-color:var(--muted); }

  .whole-input{
    width:44px;
    font-family:var(--mono);
    font-size:22px;
    text-align:center;
    background:transparent;
    border:none;
    border-bottom:1px dashed var(--line);
    color:var(--ink);
    padding:4px 0;
  }
  .whole-input::placeholder{ color:var(--muted-2); }
  .whole-input:focus{ outline:none; border-bottom-color:var(--accent); }

  .stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .stack input{
    width:52px;
    font-family:var(--mono);
    font-size:22px;
    text-align:center;
    background:transparent;
    border:none;
    color:var(--ink);
    padding:2px 0;
  }
  .stack input::placeholder{ color:var(--muted-2); }
  .stack input:focus{ outline:none; background:var(--panel-2); border-radius:2px; }
  .bar{
    width:56px;
    height:1px;
    background:var(--ink);
    opacity:0.85;
  }

  .op-group{
    display:flex;
    gap:4px;
    margin:0 4px;
  }
  .op-btn{
    font-family:var(--mono);
    font-size:17px;
    width:38px;
    height:38px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:all .15s;
  }
  .op-btn:hover{ color:var(--ink); border-color:var(--muted); }
  .op-btn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    font-weight:600;
  }

  .equals{
    font-family:var(--serif);
    font-size:26px;
    color:var(--muted-2);
    margin:0 4px;
  }

  /* tabs */
  .tabs{
    display:flex;
    flex-wrap:wrap;
    gap:4px 18px;
    margin-bottom:28px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .tab{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.04em;
    background:transparent;
    border:none;
    color:var(--muted);
    padding:4px 0;
    cursor:pointer;
    position:relative;
  }
  .tab:hover{ color:var(--ink); }
  .tab.active{ color:var(--accent); }
  .tab.active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-15px;
    height:2px;
    background:var(--accent);
  }

  .mode-panel.hidden{ display:none; }

  .dir-toggle{
    display:flex;
    justify-content:center;
    gap:4px;
    margin-bottom:24px;
  }
  .dir-toggle button{
    font-family:var(--mono);
    font-size:12px;
    padding:7px 14px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:all .15s;
  }
  .dir-toggle button:hover{ color:var(--ink); border-color:var(--muted); }
  .dir-toggle button.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    font-weight:600;
  }

  .decimal-input{
    width:160px;
    font-family:var(--mono);
    font-size:24px;
    text-align:center;
    background:transparent;
    border:none;
    border-bottom:1px dashed var(--line);
    color:var(--ink);
    padding:6px 0;
  }
  .decimal-input::placeholder{ color:var(--muted-2); }
  .decimal-input:focus{ outline:none; border-bottom-color:var(--accent); }
  .percent-sign{
    font-family:var(--mono);
    font-size:22px;
    color:var(--muted);
    margin-left:6px;
  }

  .compare-symbol{
    font-family:var(--serif);
    font-size:30px;
    font-weight:600;
    color:var(--accent);
    min-width:34px;
    text-align:center;
  }

  .hidden{ display:none !important; }

  /* result */
  .result-area{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    min-height:120px;
    justify-content:center;
  }
  .result-fraction{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .result-sign{ font-family:var(--mono); font-size:34px; color:var(--danger); }
  .result-whole{ font-family:var(--serif); font-size:44px; font-weight:600; }
  .result-stack{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .result-stack .num, .result-stack .den{
    font-family:var(--serif);
    font-size:30px;
    font-weight:600;
    line-height:1.1;
  }
  .result-bar{ width:54px; height:2px; background:var(--ink); }
  .result-meta{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
    margin-top:8px;
  }
  .result-placeholder{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted-2);
    letter-spacing:0.04em;
  }
  .error-msg{
    font-family:var(--mono);
    font-size:13px;
    color:var(--danger);
  }

  /* steps */
  .steps-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:26px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  .steps-toggle button{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:6px 12px;
    cursor:pointer;
  }
  .steps-toggle button:hover{ color:var(--ink); border-color:var(--muted); }

  .steps-list{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .step{
    display:flex;
    gap:14px;
    padding:14px 0;
    border-left:1px dashed var(--line);
    padding-left:18px;
    position:relative;
  }
  .step:not(:last-child){ padding-bottom:18px; }
  .step::before{
    content:"";
    position:absolute;
    left:-4px;
    top:16px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
  }
  .step-num{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted-2);
    min-width:18px;
    padding-top:2px;
  }
  .step-body .step-label{
    font-size:13px;
    color:var(--ink);
    margin-bottom:3px;
  }
  .step-body .step-detail{
    font-family:var(--mono);
    font-size:13px;
    color:var(--mint);
  }

  /* history */
  .history{
    margin-top:20px;
  }
  .history-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
  }
  .history-head span{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted-2);
  }
  .history-head button{
    background:none;
    border:none;
    color:var(--muted-2);
    font-family:var(--mono);
    font-size:11px;
    cursor:pointer;
    text-decoration:underline;
  }
  .history-head button:hover{ color:var(--muted); }
  .history-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .history-list li{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:8px 12px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
  }
  .history-list li:hover{ border-color:var(--muted-2); color:var(--ink); }
  .history-empty{
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted-2);
  }

  footer{
    max-width:680px;
    margin:50px auto 0;
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted-2);
    text-align:center;
  }

  @media (max-width:480px){
    .panel{ padding:28px 16px 22px; }
    .calc-row{ gap:8px; }
    .op-group{ margin:0 2px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }