:root{
    --bg:#F7F7F5;
    --surface:#FFFFFF;
    --ink:#14181F;
    --ink-soft:#5B6470;
    --ink-faint:#9AA2AC;
    --line:#E2E5E7;
    --accent:#2F5D8A;
    --accent-ink:#1F4166;
    --accent-soft:#E9F0F6;
    --amber:#E8A33D;
    --amber-soft:#FBF0DD;
    --success:#3F8F6C;
    --danger:#C1543C;
    --radius-sm:8px;
    --radius:12px;
    --radius-lg:18px;
    --shadow:0 1px 2px rgba(20,24,31,0.04), 0 8px 24px -12px rgba(20,24,31,0.12);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --panel-dark:#14181F;
    --topbar-bg:rgba(247,247,245,0.82);
    --badge-ink:#8a5a12;
    color-scheme:light;
    transition:background .2s ease, color .2s ease;
  }

  [data-theme="dark"]{
    --bg:#14171C;
    --surface:#1B1F26;
    --ink:#EDEFF2;
    --ink-soft:#A6ADB8;
    --ink-faint:#6E7683;
    --line:#2B3038;
    --accent:#5B9BD9;
    --accent-ink:#8FC0EC;
    --accent-soft:#1F2A36;
    --amber:#E8A33D;
    --amber-soft:#2E2717;
    --success:#4FAE85;
    --danger:#D97159;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
    --panel-dark:#0F1216;
    --topbar-bg:rgba(20,23,28,0.82);
    --badge-ink:#F0C177;
    color-scheme:dark;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  button, a, input, select, .tool-card, .faq-question{
    touch-action:manipulation;
  }
  button, .btn, .tool-card, .calc-pad button, .segmented button, .sci-pad button, .faq-question, .theme-toggle{
    -webkit-user-select:none; user-select:none;
  }

  /* subtle blueprint grid backdrop */
  .grid-bg{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:40px 40px;
    opacity:0.45;
    mask-image:radial-gradient(ellipse 80% 50% at 50% 0%, black 40%, transparent 90%);
  }

  a{color:inherit;}
  button{font-family:inherit;}

  h1,h2,h3,.font-display{font-family:var(--font-display);letter-spacing:-0.01em;}
  .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

  /* ---------- Topbar ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    background:var(--topbar-bg);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .logo{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display);
    font-weight:700; font-size:20px;
    text-decoration:none;
    cursor:pointer;
  }
  .logo-mark{
    width:26px; height:26px;
    border-radius:7px;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:14px; font-weight:700;
    box-shadow:0 2px 6px -1px rgba(20,24,31,0.25);
  }
  .logo-mark svg{width:60%; height:60%;}
  nav.tools-nav{display:flex; gap:4px;}
  nav.tools-nav button{
    background:none; border:none; cursor:pointer;
    font-size:14px; font-weight:500; color:var(--ink-soft);
    padding:9px 14px; border-radius:999px;
    transition:background .15s ease, color .15s ease;
  }
  nav.tools-nav button:hover{color:var(--ink); background:var(--accent-soft);}
  nav.tools-nav button.active{color:var(--accent-ink); background:var(--accent-soft);}

  .theme-toggle{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
    cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
    flex:none;
  }
  .theme-toggle:hover{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft);}

  .topbar-actions{display:flex; align-items:center; gap:12px;}

  /* ---------- Layout ---------- */
  main{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 32px 80px;}
  .view{display:none;}
  .view.visible{display:block;}

  /* ---------- Hero / Home ---------- */
  .hero{
    display:grid; grid-template-columns:1fr 1fr; gap:56px;
    padding:56px 0 40px; align-items:start;
  }
  .hero-copy .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--accent-ink); background:var(--accent-soft);
    display:inline-block; padding:5px 10px; border-radius:6px; margin-bottom:18px;
  }
  .hero-copy h1{font-size:44px; line-height:1.08; margin:0 0 16px; font-weight:700;}
  .hero-copy p{color:var(--ink-soft); font-size:16px; max-width:44ch; margin:0 0 28px;}


  .tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px;}
  .tool-card{
    display:flex; gap:12px; align-items:flex-start;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; text-align:left; cursor:pointer;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    text-decoration:none;
  }
  .tool-card, .tool-card *{text-decoration:none !important;}
  .tool-card:hover{border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px);}
  .tool-card .icon{
    width:48px; height:48px; flex:none; border-radius:10px;
    background:var(--accent-soft); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; line-height:1;
    border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(20,24,31,0.08), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .tool-card .label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-family:var(--font-mono); font-weight:600; margin-bottom:4px;}
  .tool-card h3{margin:0 0 4px; font-size:15px;}
  .tool-card p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.4;}
  .tool-card.hidden-by-search{display:none;}

  /* ---------- Calculator (flagship / hero widget) ---------- */
  .calc-widget{
    background:var(--panel-dark); border-radius:var(--radius-lg);
    padding:20px; box-shadow:var(--shadow);
    width:100%; max-width:360px; margin-left:auto;
  }
  .calc-readout{
    background:#0B0E13; border-radius:var(--radius);
    padding:20px 18px 16px; margin-bottom:14px;
    position:relative; overflow:hidden;
  }
  .calc-readout .expr{
    font-family:var(--font-mono); font-size:13px; color:#6C7684;
    min-height:16px; text-align:right; word-break:break-all;
  }
  .calc-readout .result{
    font-family:var(--font-mono); font-size:34px; font-weight:500;
    color:#fff; text-align:right; margin-top:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .calc-readout .tick{
    height:2px; background:var(--amber); width:0; margin-top:10px;
    transition:width .28s ease;
  }
  .calc-readout .tick.pulse{width:100%;}
  .calc-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
  .calc-pad button{
    border:none; border-radius:10px; padding:14px 0;
    font-family:var(--font-mono); font-size:16px; font-weight:500;
    background:#1D232D; color:#fff; cursor:pointer;
    transition:background .12s ease, transform .05s ease;
  }
  .calc-pad button:active{transform:scale(0.96);}
  .calc-pad button:hover{background:#262E3A;}
  .calc-pad button.op{
    background:#3E7DC9; color:#fff; font-size:20px; font-weight:700;
    box-shadow:0 2px 10px -2px rgba(62,125,201,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .calc-pad button.op:hover{background:#4A8AD6;}
  .calc-pad button.op:active{background:#356EB3;}
  .calc-pad button.eq{background:var(--amber); color:#1a1200;}
  .calc-pad button.eq:hover{background:#d6922f;}
  .calc-pad button.fn{background:#2A313D; color:#B7C0CC; font-family:var(--font-body); font-size:13px; font-weight:600;}
  .calc-pad button.zero{grid-column:span 2;}

  /* ---------- Tool pages ---------- */
  .tool-page{padding:48px 0;}
  .tool-page-head{margin-bottom:32px;}
  .tool-page-head .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-ink); margin-bottom:10px; display:block;
  }
  .tool-page-head h1{font-size:32px; margin:0 0 8px;}
  .tool-page-head p{color:var(--ink-soft); margin:0; max-width:56ch;}

  .tool-body{display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:start;}
  @media (max-width:860px){
    .tool-body{grid-template-columns:1fr;}
    .hero{grid-template-columns:1fr;}
    .calc-widget{margin:0 auto;}
    .readout-panel{position:static;}
  }

  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:26px;
  }
  .panel h2{font-size:14px; margin:0 0 18px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--font-body); font-weight:600;}

  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:6px;}
  .field input[type=text], .field input[type=number], .field input[type=date], .field input[type=time], .field select{
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
    font-size:16px; font-family:var(--font-body); color:var(--ink); background:var(--bg);
  }
  .field input:focus, .field select:focus{outline:2px solid var(--accent); outline-offset:1px; background:var(--surface);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .field-row.three{grid-template-columns:1fr 1fr 1fr;}
  .field-hint{font-size:12px; color:var(--ink-faint); margin-top:6px;}
  .sci-pad{grid-template-columns:repeat(5,1fr);}
  .sci-pad button{font-size:14px; padding:12px 0;}
  .fraction-row{display:flex; align-items:center; gap:10px;}
  .fraction-input{display:flex; flex-direction:column; gap:6px; width:74px;}
  .fraction-input input{width:100%; padding:9px 8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); text-align:center; font-family:var(--font-mono);}
  .fraction-bar{width:34px; height:2px; background:var(--ink-faint);}
  .fraction-op{font-family:var(--font-mono); font-size:20px; color:var(--ink-soft);}
  .fraction-select{padding:9px 8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); font-family:var(--font-mono);}

  .segmented{display:flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
  .segmented button{flex:1; border:none; background:var(--surface); padding:10px; font-size:13px; font-weight:500; color:var(--ink-soft); cursor:pointer;}
  .segmented button.active{background:var(--accent); color:#fff;}

  .row-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
  .row-item{display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 0.7fr auto; gap:8px; align-items:center;}
  .row-item input, .row-item select{
    padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius-sm);
    font-size:16px; background:var(--bg); font-family:var(--font-body);
  }
  .row-item .remove-row{
    background:none; border:none; color:var(--ink-faint); cursor:pointer;
    width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  }
  .row-item .remove-row:hover{background:#F6E4DF; color:var(--danger);}

  .btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
    background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink);
  }
  .btn:hover{border-color:var(--accent); color:var(--accent-ink);}
  .btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
  .btn.primary:hover{background:var(--accent-ink);}

  /* readout panel used across grade/gpa/calorie/dice */
  .readout-panel{
    background:var(--panel-dark); border-radius:var(--radius-lg); padding:26px; color:#fff;
    position:sticky; top:96px;
  }
  .readout-panel .label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8891A0; margin-bottom:8px;}
  .readout-panel .big{font-family:var(--font-mono); font-size:46px; font-weight:600; line-height:1; margin-bottom:4px;}
  .readout-panel .tick-line{height:2px; background:var(--amber); width:60%; margin:14px 0 18px; transition:width .3s ease;}
  .readout-panel .sub{font-size:13px; color:#B7C0CC; margin-bottom:14px;}
  .readout-panel .stat-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .readout-panel .stat-row{display:flex; justify-content:space-between; font-size:13px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08);}
  .readout-panel .stat-row span:first-child{color:#8891A0;}
  .readout-panel .stat-row span:last-child{font-family:var(--font-mono); font-weight:600;}
  .readout-panel .badge{
    display:inline-block; padding:4px 10px; border-radius:6px; font-family:var(--font-mono); font-size:13px; font-weight:700;
    background:var(--amber-soft); color:var(--badge-ink);
  }

  /* dice */
  .dice-tray{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; min-height:64px;}
  .die{
    width:52px; height:52px; border-radius:10px; background:#1D232D;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:20px; font-weight:700; color:#fff;
    animation:pop .25s ease;
  }
  @keyframes pop{ from{transform:scale(0.5); opacity:0;} to{transform:scale(1); opacity:1;} }
  .history-list{display:flex; flex-direction:column; gap:6px; max-height:180px; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .history-list .h-row{display:flex; justify-content:space-between; font-size:12px; color:#8891A0; font-family:var(--font-mono); padding:4px 0; border-top:1px solid rgba(255,255,255,0.06);}

  footer{
    position:relative; z-index:1;
    border-top:1px solid var(--line); padding:40px 32px 24px; margin-top:40px;
    font-size:13px; color:var(--ink-faint);
  }
  .footer-inner{max-width:1120px; margin:0 auto;}
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; gap:32px;
    padding-bottom:24px; margin-bottom:20px; border-bottom:1px solid var(--line);
    flex-wrap:wrap;
  }
  .footer-brand .logo{margin-bottom:8px;}
  .footer-brand p{margin:0; font-size:13px; color:var(--ink-faint); max-width:32ch; line-height:1.6;}
  .footer-links{display:flex; gap:24px; flex-wrap:wrap;}
  .footer-links a{
    font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; cursor:pointer;
  }
  .footer-links a:hover{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}

  /* ---------- SEO content section ---------- */
  .seo-section{
    position:relative; z-index:1;
    margin-top:24px; padding-top:48px; border-top:1px solid var(--line);
  }
  .seo-section h2{font-size:26px; margin:0 0 14px;}
  .seo-section h3{font-size:17px; margin:28px 0 8px; color:var(--ink);}
  .seo-section p{color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0 0 4px; max-width:76ch;}
  .seo-section a{color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
  .seo-section a:hover{color:var(--accent);}

  /* ---------- FAQ section ---------- */
  .faq-section{
    position:relative; z-index:1;
    margin-top:24px; padding-top:48px; border-top:1px solid var(--line);
  }
  .faq-section h2{font-size:26px; margin:0 0 8px;}
  .faq-section > p{color:var(--ink-soft); font-size:15px; margin:0 0 24px; max-width:64ch;}
  .faq-list{display:flex; flex-direction:column; gap:10px; max-width:820px;}
  .faq-item{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:border-color .15s ease;
  }
  .faq-item.open{border-color:var(--accent);}
  .faq-question{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 20px; background:none; border:none; cursor:pointer; text-align:left;
    font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--ink);
  }
  .faq-question:hover{color:var(--accent-ink);}
  .faq-icon{
    flex:none; width:22px; height:22px; border-radius:999px;
    background:var(--accent-soft); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease;
  }
  .faq-item.open .faq-icon{transform:rotate(45deg);}
  .faq-answer{
    max-height:0; overflow:hidden;
    transition:max-height .22s ease, padding .22s ease;
  }
  .faq-answer p{
    margin:0; padding:0 20px 18px; color:var(--ink-soft); font-size:14px; line-height:1.7; max-width:70ch;
  }

  /* ---------- Legal / info pages (about, privacy, terms, contact) ---------- */
  .legal-content{max-width:76ch;}
  .legal-content .updated{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin:0 0 28px;}
  .legal-content h2{font-size:19px; margin:30px 0 10px;}
  .legal-content h2:first-child{margin-top:0;}
  .legal-content p{color:var(--ink-soft); font-size:15px; line-height:1.75; margin:0 0 14px;}
  .legal-content ul{color:var(--ink-soft); font-size:15px; line-height:1.75; margin:0 0 14px; padding-left:20px;}
  .legal-content li{margin-bottom:6px;}
  .legal-content a{color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
  .legal-content a:hover{color:var(--accent);}
  .legal-content strong{color:var(--ink);}

  .contact-card{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:22px 26px; margin:8px 0 28px;
  }
  .contact-card .icon{
    width:44px; height:44px; flex:none; border-radius:10px;
    background:var(--accent-soft); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-card .label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:3px;}
  .contact-card .value{font-size:16px; font-weight:600;}
  .contact-card a.value{text-decoration:none; color:var(--accent-ink);}
  .contact-card a.value:hover{color:var(--accent);}
  @media (max-width:640px){ .contact-card{flex-direction:column; text-align:center;} }

  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

  /* ---------- Tablet ---------- */
  @media (max-width:860px){
    main{padding:0 24px 60px;}
    .hero{padding:40px 0 32px; gap:36px;}
    .tool-page{padding:36px 0;}
  }

  /* ---------- Mobile ---------- */
  @media (max-width:600px){
    .topbar{padding:12px 16px;}
    .logo{font-size:16px; gap:6px;}
    .logo-mark{width:24px; height:24px; font-size:13px;}
    .topbar-actions{gap:8px;}
    .theme-toggle{width:40px; height:40px;}

    main{padding:0 16px 48px;}
    .hero{padding:28px 0 20px; gap:28px;}
    .hero-copy .eyebrow{font-size:11px; margin-bottom:14px;}
    .hero-copy h1{font-size:28px;}
    .hero-copy p{font-size:14px; margin-bottom:22px;}

    .tool-grid{grid-template-columns:1fr;}
    .tool-card{padding:14px;}

    .calc-widget{padding:16px;}
    .calc-readout{padding:16px 14px 12px;}
    .calc-readout .result{font-size:28px;}
    .calc-pad button{padding:13px 0; font-size:15px;}

    .tool-page{padding:24px 0;}
    .tool-page-head{margin-bottom:22px;}
    .tool-page-head h1{font-size:24px;}
    .tool-page-head p{font-size:14px;}

    .panel{padding:18px;}
    .readout-panel{padding:20px;}
    .readout-panel .big{font-size:34px;}

    .field input[type=text], .field input[type=number], .field input[type=date], .field input[type=time], .field select,
    .row-item input, .row-item select, .fraction-input input, .fraction-select{
      font-size:16px;
    }
    .field-row{grid-template-columns:1fr 1fr; gap:10px;}
    .field-row.three{grid-template-columns:1fr 1fr 1fr; gap:6px;}

    .row-item{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:12px; margin-bottom:2px; border-bottom:1px solid var(--line);}
    .row-item input, .row-item select{flex:1 1 130px; width:auto;}
    .row-item .remove-row{flex:0 0 auto; margin-left:auto;}
    .row-list{gap:0;}

    .sci-pad button{font-size:13px; padding:11px 0;}

    .fraction-row{flex-wrap:wrap; justify-content:center;}

    footer{padding:28px 16px 20px;}
    .footer-top{flex-direction:column; gap:20px; text-align:center;}
    .footer-brand p{max-width:none;}
    .footer-links{justify-content:center; gap:16px 20px;}
    .footer-bottom{flex-direction:column; gap:6px; text-align:center;}
  }

  /* ---------- Small phones ---------- */
  @media (max-width:380px){
    .topbar{padding:10px 12px;}
    .logo span:last-child{display:none;}
    .hero-copy h1{font-size:24px;}
  }

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

  .skip-link{
    position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; z-index:100;
    font-family:var(--font-body); font-weight:600; text-decoration:none;
  }
  .skip-link:focus{left:16px; top:16px; width:auto; height:auto; overflow:visible;}
  .breadcrumb{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin:24px 0 0;}
  .breadcrumb a{color:var(--ink-soft); text-decoration:none;}
  .breadcrumb a:hover{color:var(--accent-ink); text-decoration:underline;}
  .related-tools{margin:8px 0 0; padding:24px 0 0;}
  .related-tools h2{font-size:16px; margin:0 0 12px;}
  .related-tools .links{display:flex; gap:12px; flex-wrap:wrap;}
  .related-tools a{
    display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none;
    font-size:13px; font-weight:600; transition:border-color .15s ease, color .15s ease;
  }
  .related-tools a:hover{border-color:var(--accent); color:var(--accent-ink);}
  .all-tools-footer{padding-top:18px; margin-top:18px; border-top:1px solid var(--line);}
  .all-tools-footer .links{display:flex; flex-wrap:wrap; gap:10px 16px;}
  .all-tools-footer a{font-size:12px; color:var(--ink-faint); text-decoration:none;}
  .all-tools-footer a:hover{color:var(--accent-ink); text-decoration:underline;}
  /* ---------- Rough sheet (step-by-step working) ---------- */
  .rough-sheet{
    margin-top:24px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:24px 24px 8px 50px;
    position:relative;
    overflow:hidden;
  }
  .rough-sheet::before{
    content:"";
    position:absolute; left:32px; top:0; bottom:0; width:1px;
    background:rgba(217,83,79,0.35);
  }
  .rough-sheet::after{
    content:"";
    position:absolute; left:22px; top:20px; bottom:20px; width:6px;
    background-image:radial-gradient(circle, var(--line) 3px, transparent 3.2px);
    background-size:6px 34px;
    background-repeat:repeat-y;
  }
  .rough-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; position:relative; z-index:1;}
  .rough-sheet h2{font-size:14px; margin:0; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--font-body); font-weight:600;}
  .rough-sheet .tag{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:3px 10px;}
  .rough-steps{display:flex; flex-direction:column; position:relative; z-index:1;}
  .rough-step{
    display:flex; gap:12px; align-items:baseline;
    padding:11px 0;
    border-bottom:1px solid var(--line);
  }
  .rough-step:last-child{border-bottom:none;}
  .rough-step .num{
    font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent-ink);
    background:var(--accent-soft); border-radius:6px; width:20px; height:20px; flex:none;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .rough-step .txt{font-family:var(--font-mono); font-size:14px; color:var(--ink); line-height:1.5;}
  .rough-step .txt .fin{color:var(--accent-ink); font-weight:700;}
  @media (max-width:640px){
    .rough-sheet{padding:20px 18px 4px 40px;}
    .rough-sheet::before{left:24px;}
    .rough-sheet::after{display:none;}
    .rough-step{padding:9px 0;}
    .rough-step .txt{font-size:13px;}
  }