:root{
  --bg:#171310; --panel:#241D17; --panel-2:#2F251C; --border:#453626;
  --ink:#F7F0E6; --ink-soft:#C4B39C; --ink-faint:#8A7A63;
  --accent:#E8A33D; --accent-ink:#171310; --accent-2:#5FBFB3;
  --radius:10px; --maxw:880px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --font-body:'Karla',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-head:'Fraunces',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-family:var(--font-body)}
button,input,select,textarea{font-family:inherit}
html[data-cjk="sc"] body,html[data-cjk="sc"] button,html[data-cjk="sc"] input,
html[data-cjk="sc"] select,html[data-cjk="sc"] textarea,html[data-cjk="sc"] option{font-family:'Noto Sans SC',sans-serif}
html[data-cjk="jp"] body,html[data-cjk="jp"] button,html[data-cjk="jp"] input,
html[data-cjk="jp"] select,html[data-cjk="jp"] textarea,html[data-cjk="jp"] option{font-family:'Noto Sans JP',sans-serif}
html[data-cjk="sc"]{--font-head:'Noto Sans SC',sans-serif}
html[data-cjk="jp"]{--font-head:'Noto Sans JP',sans-serif}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{line-height:1.15;font-weight:600;font-family:var(--font-head);letter-spacing:-.01em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ------------------------------------------------------------ masthead
   Deliberately NOT the icon-then-wordmark lockup every other site in the
   portfolio uses — a wordmark-only logo (no icon box at all in the header;
   the beamed-note glyph lives only in the favicon), plus a small pulsing
   "recording dot" as the one ambient animation that's always running. */
.masthead{border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:30}
.mh-row{max-width:var(--maxw);margin:0 auto;padding:16px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
/* Icon-ABOVE-text lockup (not icon-before or icon-after, like every other
   site in the portfolio) — a composed logo mark, not a card: no border, no
   background, icon sitting tight against the wordmark so it reads as one
   unit. A beamed-note glyph (same motif as the tool-card badges) with a
   continuous bob animation is the one thing always moving in the header,
   unmistakably musical rather than a generic "live" indicator. "Gruyera"
   and " Notes" render identically (same face, weight, color, italic) — no
   longer split into a differently-colored/upright second word, which read
   too close to oxtunialetters.com's "Letters" treatment. */
.wordmark{text-decoration:none;font-family:var(--font-head);font-weight:600;font-size:1.4rem;
  font-style:italic;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 0}
.wm-note{color:var(--accent);flex-shrink:0;width:26px;height:26px;margin-bottom:-2px;
  animation:wm-note-bob 1.3s ease-in-out infinite}
@keyframes wm-note-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-4deg)}}
.wordmark .tld{font-style:italic;font-weight:600;color:var(--ink);font-size:1em}
.mh-actions{display:flex;align-items:center;gap:8px;margin-top:22px}
.mh-queue-btn{background:var(--panel-2);border:1px solid var(--border);border-radius:100px;padding:12px 22px;
  cursor:pointer;font-weight:700;color:var(--ink);font-family:var(--font-mono);font-size:1rem;
  transition:transform .35s var(--ease-pop),border-color .2s}
.mh-queue-btn:hover{transform:scale(1.08) rotate(-2deg);border-color:var(--accent)}

/* tab toggle: switches which "side" (Tools / Compare) the track strip shows —
   an in-page toggle, not a hover dropdown or an off-canvas sidebar. */
.mh-tabs{max-width:var(--maxw);margin:0 auto;padding:14px 20px 0;display:flex;gap:4px}
.mh-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 4px 10px;margin-right:18px;
  cursor:pointer;font-weight:700;color:var(--ink-faint);font-size:.95rem;font-family:var(--font-head);
  transition:color .2s,border-color .2s}
.mh-tab:hover{color:var(--ink-soft)}
.mh-tab[aria-selected="true"]{color:var(--accent);border-color:var(--accent)}

/* the track strip itself: a horizontally-scrollable "playlist" of pages,
   each row numbered like a tracklist — the numbering carries real
   information here (it's a genuine flat catalog), not decoration. */
.track-panel{display:none;max-width:var(--maxw);margin:0 auto;padding:10px 20px 16px;
  overflow-x:auto;white-space:nowrap}
.track-panel.active{display:block}
.track-item{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-soft);
  padding:7px 14px 7px 10px;border-radius:100px;border:1px solid var(--border);background:var(--panel-2);
  margin-right:8px;font-size:.86rem;transition:transform .3s var(--ease-pop),color .2s,border-color .2s}
.track-item:hover{color:var(--accent-2);border-color:var(--accent-2);transform:translateY(-3px) rotate(-1deg)}
.track-num{font-family:var(--font-mono);color:var(--accent);font-size:.76rem}

/* spotlight row: curated picks, styled like a cassette side label rather
   than the old "popular strip" pill row */
.spotlight{border-bottom:1px solid var(--border);background:var(--bg)}
.spotlight-inner{max-width:var(--maxw);margin:0 auto;padding:10px 20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.spotlight-label{flex-shrink:0;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent);font-family:var(--font-mono)}
.spotlight-items{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.spotlight-items a{text-decoration:none;color:var(--ink-soft);font-size:.86rem;
  padding:6px 12px;border-radius:6px;border:1px dashed var(--border)}
.spotlight-items a:hover{color:var(--ink);border-color:var(--accent-2);border-style:solid}

/* sliding "queue" panel for language choice — not a dropdown, not a modal:
   a drawer that slides in from the right edge, like a play-queue. */
.queue-backdrop{position:fixed;inset:0;background:rgba(10,7,4,.6);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.queue-backdrop.open{opacity:1;pointer-events:auto}
.queue-panel{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:86vw;background:var(--panel);
  border-left:1px solid var(--border);z-index:41;transform:translateX(100%);transition:transform .35s var(--ease-pop);
  display:flex;flex-direction:column;padding:18px 0}
.queue-panel.open{transform:translateX(0)}
.queue-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px 14px;border-bottom:1px solid var(--border)}
.queue-head b{font-family:var(--font-head);font-style:italic}
.queue-close{background:none;border:none;color:var(--ink-soft);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px}
.queue-close:hover{color:var(--accent)}
.queue-list{overflow-y:auto;padding:6px 0}
.queue-list a{display:flex;align-items:center;gap:10px;padding:11px 18px;text-decoration:none;color:var(--ink);font-size:.94rem}
.queue-list a:hover{background:var(--panel-2)}
.queue-list a[aria-current]{color:var(--accent);font-weight:700}
.queue-list a[lang="zh-Hans"]{font-family:'Noto Sans SC',sans-serif}
.queue-list a[lang="ja"]{font-family:'Noto Sans JP',sans-serif}

/* comparison pages: real brand logos, above everything else on the page.
   No container/frame of any kind — just the two images at a fixed shared
   height, corners rounded directly on the <img> itself via border-radius.
   Height is viewport-relative so the pair shrinks fluidly as the screen
   narrows, staying side by side as long as they reasonably fit. Below the
   breakpoint they no longer shrink further — instead the row switches to a
   centered column: logo, "vs" on its own middle line, logo, so nothing gets
   uncomfortably tiny or squeezed. Both logos always share the exact same
   size (row or column), so they match in height regardless of how wide
   either one's own wordmark is. */
.vs-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;padding:28px 0 6px}
.vs-logo{display:block;height:clamp(40px,10vw,80px);width:auto;max-width:42vw;object-fit:contain;border-radius:14px}
.vs-x{font-family:var(--font-head);font-style:italic;font-weight:600;color:var(--ink-faint);font-size:1.15rem}
@media (max-width:480px){
  .vs-row{flex-direction:column;gap:10px;padding:24px 0 4px}
  .vs-logo{height:clamp(56px,22vw,90px);max-width:78vw}
}

/* hero */
main{max-width:var(--maxw);margin:0 auto;padding:0 20px 60px}
.hero{padding:36px 0 8px}
.hero h1{font-size:2.15rem;margin:0 0 10px;font-style:italic}
.hero-p{color:var(--ink-soft);margin:0;font-size:1.08rem;max-width:56ch}

main>h2,.content h2{position:relative;padding-left:0;margin-top:40px;font-style:italic}
main>h2::after,.content h2::after{content:"";display:block;width:46px;height:3px;background:var(--accent);
  margin-top:8px;border-radius:2px}

/* tool grid / cards — "vinyl single" shape: a corner label-circle overlaps
   the card instead of a left border stripe (camalochatools) or a clipped
   corner-fold (oxtunialetters). */
.grid-tools{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:18px 0 32px}
.tool-card{display:block;position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:20px 20px 20px 44px;text-decoration:none;color:var(--ink);
  transition:transform .4s var(--ease-pop),box-shadow .3s,border-color .3s}
/* The vinyl-single corner badge now carries a beamed-eighth-notes glyph
   (was an empty circle) — every card reads as music-related on its own. */
.tc-badge{position:absolute;top:16px;left:-14px;width:28px;height:28px;border-radius:50%;
  background:var(--accent);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--border);
  display:flex;align-items:center;justify-content:center;color:#000}
.tool-card:hover,.tool-card:focus-visible{transform:translateY(-6px) rotate(1deg);box-shadow:0 16px 34px rgba(0,0,0,.45);border-color:var(--accent-2)}
.tool-card b{display:block;font-family:var(--font-head);font-weight:600;font-size:1.08rem;margin-bottom:4px;color:var(--ink);font-style:italic}
.tool-card span{color:var(--ink-soft);font-size:.92rem;display:block}

/* tool widget */
.tool{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin:22px 0}
.tool .row{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:16px}
.tool .row.row-single{grid-template-columns:1fr}
.tool label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.tool input[type=number],.tool input[type=text],.tool input[type=date],.tool select{width:100%;padding:11px 12px;border:1px solid var(--border);
  border-radius:8px;font-size:1rem;background:var(--bg);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.tool input:focus,.tool select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,163,61,.18);outline:none}
.sl-copy-row{display:flex;gap:8px;margin-top:6px}
.sl-copy-row input{flex:1}
.tool input::placeholder{color:var(--ink-soft);opacity:.7}
.required-mark{color:#FF8A65}
.tool input.input-error{border-color:#FF8A65;box-shadow:0 0 0 3px rgba(255,138,101,.2)}
.field-error{color:#FF8A65;font-weight:700;font-size:.85rem;margin-top:6px}

/* buttons: chunky "stomp pedal" — a thick bottom ledge that compresses on
   press, instead of a plain flat rounded-rect. */
.btn{position:relative;display:inline-block;border:none;border-radius:8px;padding:12px 22px 15px;font-weight:700;cursor:pointer;
  text-decoration:none;font-size:.98rem;font-family:var(--font-head);top:0;
  transition:top .12s,box-shadow .12s}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 5px 0 #B87A22}
.btn-primary:hover{top:-2px;box-shadow:0 7px 0 #B87A22}
.btn-primary:active{top:3px;box-shadow:0 2px 0 #B87A22}
.btn-secondary{background:var(--panel-2);color:var(--ink);border:1px solid var(--border);box-shadow:0 5px 0 var(--border)}
.btn-secondary:hover{top:-2px;box-shadow:0 7px 0 var(--border)}
.btn-secondary:active{top:3px;box-shadow:0 2px 0 var(--border)}
.tool-result{margin-top:18px;padding-top:16px;border-top:1px dashed var(--border)}
.result-row{display:flex;justify-content:space-between;padding:6px 0;font-size:1rem}
.verdict{margin-top:12px;font-weight:700;background:var(--panel-2);border-radius:8px;padding:12px 14px}
.verdict-bad{background:#3A1F27;color:#FF9FAE}
.verdict-ok{background:#173B32;color:#79E8C6}

.pixabay-credit{font-size:.82rem;color:var(--ink-soft);margin:10px 0 4px}
.pixabay-credit a{color:var(--accent-2);font-weight:700}
.cf-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));margin:16px 0}
.cf-thumb{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border);aspect-ratio:1/1;transition:transform .3s var(--ease-pop)}
.cf-thumb:hover{transform:scale(1.05)}
.cf-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.bpm-btn{width:100%;padding:32px;font-size:1.2rem;border-radius:var(--radius)}
.bpm-display{text-align:center;margin:18px 0;font-family:var(--font-head)}
.bpm-display #bpm-value{font-size:3rem;font-weight:700;color:var(--accent-2)}
.bpm-display .bpm-unit{font-size:1rem;color:var(--ink-soft);margin-left:8px}

.split-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.split-row{display:grid;grid-template-columns:1fr 100px 36px;gap:10px;align-items:center}
.split-row input{padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:.98rem;background:var(--bg);color:var(--ink)}
.rs-remove{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);
  color:var(--ink-soft);font-size:1.1rem;cursor:pointer;line-height:1;transition:transform .2s var(--ease-pop)}
.rs-remove:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.12)}
.rs-remove:disabled{opacity:.35;cursor:not-allowed}
.split-table{width:100%;border-collapse:collapse;margin-top:4px}
.split-table th,.split-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);font-size:.95rem}
.split-table tr.rs-total-row td{font-weight:800;border-top:2px solid var(--border)}
.split-table tr.rs-unassigned-row td{color:var(--ink-soft);font-style:italic}
.inline-note{margin-top:14px;font-size:.9rem;color:var(--ink-soft)}
.inline-note a{color:var(--accent-2);font-weight:700;text-decoration:none}

.result-head{display:flex;justify-content:flex-end;margin-bottom:14px}
.export-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.export-label{margin:0;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-family:var(--font-mono)}
.export-btns{display:flex;gap:10px}
.export-btn{background:none;border:none;padding:0;cursor:pointer}
.export-ico{display:flex;align-items:center;justify-content:center;width:52px;height:40px;border-radius:8px;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;color:#fff;transition:transform .3s var(--ease-pop)}
.export-btn:hover .export-ico{transform:translateY(-4px) rotate(-3deg)}
.export-ico-xlsx{background:#1D6F42}
.export-ico-pdf{background:#C4291C}
.export-ico-docx{background:#2B579A}

.compare-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
.compare-table th,.compare-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
.compare-table thead th{font-weight:800;color:var(--ink);font-family:var(--font-head);font-style:italic}
.compare-table tbody tr:nth-child(odd){background:var(--panel)}

.content{margin:28px 0}
.content p{margin:0 0 12px}
.faq{margin:28px 0}
.faq details{border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:10px;background:var(--panel);transition:border-color .2s}
.faq details:hover{border-color:var(--accent-2)}
.faq summary{font-weight:700;cursor:pointer;font-family:var(--font-head)}
.faq p{margin:10px 0 2px;color:var(--ink-soft)}

.reco{margin:32px 0;padding:24px;background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:16px;color:var(--ink)}
.reco h2{margin:0 0 16px;font-size:1.35rem;padding-left:0}
.reco h2::after{display:none}
.reco-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.reco-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:18px;transition:transform .3s var(--ease-pop)}
.reco-card:hover{transform:translateY(-4px)}
.reco-primary{background:rgba(232,163,61,.1);border-color:var(--accent)}
.reco-badge{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--accent);color:var(--accent-ink);padding:3px 10px;border-radius:100px;margin-bottom:8px}
.reco-badge-alt{background:var(--accent-2);color:var(--accent-ink)}
.reco-card h3{margin:4px 0 2px;font-family:var(--font-head);font-style:italic}
.reco-price{margin:0 0 8px;color:var(--ink-soft);font-weight:700}
.reco-card p{color:var(--ink-soft);font-size:.92rem;margin:0 0 14px}
.reco .btn-primary{width:100%;text-align:center}
.reco .btn-secondary{width:100%;text-align:center}

/* footer: multi-column "liner notes" layout, not a single centered block */
footer{border-top:1px solid var(--border);margin-top:48px;background:var(--panel)}
.ftr-grid{max-width:var(--maxw);margin:0 auto;padding:32px 20px 18px;display:grid;gap:24px;
  grid-template-columns:1.3fr 1fr 1fr}
.ftr-col b{display:block;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--accent);margin-bottom:10px}
.ftr-col p{color:var(--ink-soft);font-size:.88rem;margin:0}
.ftr-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:.88rem;padding:3px 0;transition:color .2s}
.ftr-col a:hover{color:var(--accent-2)}
.ftr-bottom{border-top:1px solid var(--border);padding:14px 20px;max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--ink-faint);font-size:.8rem}
.ftr-bottom p{margin:0}
.fnav{display:flex;align-items:center;gap:14px}
.fnav a{color:var(--ink-faint);text-decoration:none}
.fnav a:hover{color:var(--accent-2)}

.license-note{margin-top:14px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border);
  border-left:4px solid var(--accent-2);border-radius:8px;font-size:.88rem;color:var(--ink-soft)}
.license-note a{color:var(--accent-2);font-weight:700}

.ref-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:18px 0}
.ref-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:transform .3s var(--ease-pop)}
.ref-card:hover{transform:translateY(-3px)}
.ref-card b{display:block;margin-bottom:4px;font-family:var(--font-head);font-style:italic}
.ref-card span{color:var(--ink-soft);font-size:.9rem}
.checklist{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;gap:10px;align-items:flex-start}
.checklist input[type=checkbox]{margin-top:3px;flex-shrink:0}

@media (max-width:640px){
  .ftr-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tool .row{grid-template-columns:1fr}
  .reco-grid{grid-template-columns:1fr}
  .mh-tabs{overflow-x:auto}
}