:root {
  color-scheme: light;
  --paper: #e9e6df;
  --card: #fbfaf7;
  --ink: #282b2c;
  --muted: #727878;
  --line: rgba(40, 43, 44, .12);
  --green: #17695c;
  --green-soft: #dcece7;
  --wine: #8f342d;
  --amber: #d99438;
  --danger: #ce3e43;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 5%, rgba(143, 52, 45, .08), transparent 34rem),
    var(--paper);
  font-family: var(--sans);
}
button, a, input { font: inherit; }
button { color: inherit; }
.orientation-gate { display:none; }

.site-header {
  width: min(1540px, calc(100% - 48px));
  min-height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.site-header p { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.site-header p i { width: 4px; height: 4px; border-radius: 50%; background: var(--wine); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-glyph { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(143,52,45,.45); border-radius: 50%; color: var(--wine); font-family: var(--serif); font-size: 1.2rem; font-style: italic; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand b { font-size: .8rem; letter-spacing: .24em; }
.brand small { color: var(--muted); font-size: .47rem; letter-spacing: .29em; }

.hero {
  width: min(1500px, calc(100% - 48px));
  min-height: 570px;
  margin: 26px auto 54px;
  padding: clamp(38px, 6vw, 86px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .58fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: center;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(72, 58, 41, .08);
  overflow: hidden;
}
.eyebrow, .section-index { margin: 0 0 18px; color: var(--green); font-size: .67rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 7.2vw, 8rem); font-weight: 400; letter-spacing: -.058em; line-height: .86; }
h1 em { color: var(--wine); font-weight: 400; }
.intro { max-width: 590px; margin: 30px 0 27px; color: #626a69; font-size: clamp(.98rem, 1.3vw, 1.14rem); line-height: 1.7; }
.hero-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: .73rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.hero-link span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(23,105,92,.4); border-radius: 50%; color: var(--green); }
.hero-image { position: relative; width: min(100%, 430px); margin: 0 auto; overflow: hidden; border-radius: 210px 210px 20px 20px; background: #071414; box-shadow: 0 28px 50px rgba(17,28,26,.2); }
.hero-image img { width: 100%; height: 480px; display: block; object-fit: cover; object-position: center 44%; }
.hero-image figcaption { position: absolute; inset: auto 13px 13px; padding: 11px 13px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: #e9ece8; background: rgba(5,18,17,.76); backdrop-filter: blur(8px); font-size: .55rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.atelier {
  width: min(1560px, calc(100% - 28px));
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 28px 80px rgba(72,58,41,.09);
}
.atelier-heading { padding: clamp(30px, 4.5vw, 58px); display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.atelier-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.35rem, 4vw, 4.1rem); font-weight: 400; letter-spacing: -.04em; }
.atelier-heading > p { max-width: 430px; margin: 0 0 7px; color: var(--muted); font-size: .86rem; line-height: 1.65; }

.control-panel { padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f4f1eb; }
.control-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.control-button { min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(40,43,44,.13); border-radius: 9px; color: #414747; background: rgba(255,255,255,.8); font-size: .67rem; font-weight: 850; text-decoration: none; cursor: pointer; box-shadow: 0 2px 4px rgba(40,43,44,.04); transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.control-button:hover:not(:disabled), .control-button:focus-visible { border-color: rgba(23,105,92,.5); background: #fff; }
.control-button:active:not(:disabled) { transform: translateY(1px); }
.control-button:disabled, .control-button.is-disabled { opacity: .34; pointer-events: none; cursor: not-allowed; }
.control-button:focus-visible, .note-cell:focus-visible, input:focus-visible { outline: 3px solid rgba(23,105,92,.24); outline-offset: 2px; }
.indicator { width: 8px; height: 8px; border: 1px solid #89908e; border-radius: 50%; }
.toggle-button.is-on .indicator { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 3px rgba(23,105,92,.12); }
.mark-button.is-on { border-color: var(--wine); color: #fff; background: var(--wine); }
.play-marks-button:not(:disabled) { border-color: var(--green); color: #fff; background: var(--green); }
.record-button { border-color: rgba(206,62,67,.28); }
.record-button.is-recording { border-color: var(--danger); color: #fff; background: var(--danger); }
.record-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(206,62,67,.1); }
.record-button.is-recording .record-dot { border-radius: 2px; animation: pulse 1.1s ease infinite; }
.play-shape { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.download-button { border-color: #d19a52; color: #fff; background: linear-gradient(135deg,#cf8b32,#a9631f); }
.download-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-button {
  min-height: 38px;
  padding-inline: 11px;
  border-color: rgba(23,105,92,.3);
  color: var(--green);
  background: var(--green-soft);
  box-shadow: none;
}
.fullscreen-button:hover:not(:disabled),
.fullscreen-button:focus-visible,
.fullscreen-button[aria-pressed="true"] {
  border-color: rgba(23,105,92,.52);
  color: #0e5146;
  background: #cde5de;
  box-shadow: 0 4px 12px rgba(23,105,92,.1);
}
.expand-corners { width: 13px; height: 13px; border: 2px solid currentColor; clip-path: polygon(0 0,40% 0,40% 15%,15% 15%,15% 40%,0 40%,0 0,100% 0,100% 40%,85% 40%,85% 15%,60% 15%,60% 0,100% 100%,60% 100%,60% 85%,85% 85%,85% 60%,100% 60%,100% 100%,0 100%,0 60%,15% 60%,15% 85%,40% 85%,40% 100%); }
.volume-control { min-height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(40,43,44,.1); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.56); font-size: .62rem; font-weight: 800; }
.volume-control input { width: 72px; accent-color: var(--wine); }
.volume-control output { min-width: 30px; color: var(--ink); font-variant-numeric: tabular-nums; }

.take-strip { min-height: 66px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); background: #fff; border-bottom: 1px solid var(--line); }
.take-state { min-width: 0; display: flex; align-items: center; gap: 12px; }
.take-state > span:last-child { min-width: 0; display: grid; gap: 3px; }
.take-state strong { color: var(--ink); font-size: .79rem; }
.take-state small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.status-light { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(23,105,92,.1); }
.status-light.recording { background: var(--danger); box-shadow: 0 0 0 4px rgba(206,62,67,.12); animation: pulse 1.1s ease infinite; }
.status-light.processing { background: var(--amber); box-shadow: 0 0 0 4px rgba(217,148,56,.12); }
#recordingTimer { flex: 0 0 auto; color: #4f5655; font-size: .8rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }

.instrument-stage {
  position: relative;
  min-height: 540px;
  padding: 32px clamp(20px,3vw,46px) 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 50%, rgba(217,148,56,.15), transparent 26rem),
    linear-gradient(180deg,#f7f3ec,#eee8dd);
}
.stage-exit { display: none; }
.stage-topline { margin-bottom: 18px; display: grid; grid-template-columns: 1fr auto 1fr; color: #96958f; font-size: .56rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.stage-topline b { color: var(--wine); font-size: inherit; }
.stage-topline span:last-child { text-align: right; }
.string-names { display: none; }
.fingerboard-shell { position: relative; min-height: 430px; display: grid; grid-template-columns: clamp(42px,4.5vw,68px) 36px minmax(0,1fr) clamp(210px,22vw,320px); align-items: center; }

.pegbox {
  position: relative;
  z-index: 3;
  grid-column:1;
  grid-row:1;
  width:calc(100% + 3px);
  height: 230px;
  margin-right:-3px;
  border-radius:54% 2px 2px 54%;
  background:
    linear-gradient(90deg,rgba(88,31,23,.2),transparent 35%,rgba(255,210,127,.14)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
    linear-gradient(90deg,#8b3926,#c36a32 46%,#6e281e);
  box-shadow:inset 0 0 0 2px rgba(82,29,22,.24),0 10px 14px rgba(73,47,30,.13);
}
.pegbox i {
  position:absolute;
  z-index:4;
  right:-2px;
  width:calc(100% + 2px);
  height:2px;
  border-radius:3px;
  background:linear-gradient(90deg,rgba(151,150,144,.82),#f8f6ee);
  box-shadow:0 1px 1px rgba(47,34,24,.2);
  pointer-events:none;
  transform:none;
}
.pegbox i:nth-of-type(1){top:40px}
.pegbox i:nth-of-type(2){top:90px;height:2.4px}
.pegbox i:nth-of-type(3){top:140px;height:3px}
.pegbox i:nth-of-type(4){top:190px;height:3.8px}

.string-label-rail {
  position:relative;
  z-index:6;
  grid-column:2;
  grid-row:1;
  width:38px;
  height:230px;
  margin-left:-2px;
  padding:15px 0;
  display:grid;
  grid-template-rows:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.12);
  border-left-color:#c9bda6;
  border-radius:18px 3px 3px 18px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07),transparent 52%),
    linear-gradient(180deg,#303633,#202523);
  box-shadow:inset -1px 0 rgba(255,255,255,.06),0 6px 10px rgba(45,35,26,.11);
}
.string-label-rail span {
  --rail-string-size:2px;
  position:relative;
  display:grid;
  align-items:center;
  justify-items:center;
}
.string-label-rail span:nth-child(2){--rail-string-size:2.4px}
.string-label-rail span:nth-child(3){--rail-string-size:3px}
.string-label-rail span:nth-child(4){--rail-string-size:3.8px}
.string-label-rail span::before {
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:50%;
  height:var(--rail-string-size);
  border-radius:3px;
  background:linear-gradient(#fff,#92928c);
  box-shadow:0 2px 2px rgba(0,0,0,.3);
}
.string-label-rail b {
  position:relative;
  z-index:2;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(143,52,45,.2);
  border-radius:50%;
  color:#4f4e49;
  background:#f8f6f1;
  font-family:var(--serif);
  font-size:.7rem;
  font-weight:400;
  box-shadow:0 3px 7px rgba(0,0,0,.16);
}

.fingerboard {
  position: relative;
  z-index: 4;
  grid-column:3 / 5;
  grid-row:1;
  height: 230px;
  margin-right: -5px;
  padding: 15px 0;
  display: grid;
  grid-template-rows: repeat(4,1fr);
  color: #fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 26%,rgba(0,0,0,.25)),
    #111514;
  clip-path: polygon(0 7%,100% 0,100% 100%,0 93%);
  filter: drop-shadow(0 18px 16px rgba(45,35,26,.22));
}
.fingerboard::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 7.5%,rgba(255,255,255,.018) 7.6% 7.8%); }
.fingerboard::before { display:none; }
.string-row { --string-size:2px; position:relative; min-height:0; padding-left:0; display:grid; grid-template-columns:.5fr 1.3fr .9fr .9fr .9fr .85fr .8fr .75fr .7fr .65fr .6fr .55fr .5fr; align-items:stretch; }
.string-row:nth-child(2){--string-size:2.4px}.string-row:nth-child(3){--string-size:3px}.string-row:nth-child(4){--string-size:3.8px}
.string-row::before { display:none; }
.string-line { position:absolute; z-index:2; left:0; right:0; top:50%; height:var(--string-size); border-radius:4px; background:linear-gradient(#fff,#8f8f89); box-shadow:0 2px 2px rgba(0,0,0,.32); pointer-events:none; transform-origin:right center; }
.string-line::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 2px,transparent 2px 5px); opacity:.35; }
.note-cell { position:relative; z-index:5; min-width:0; padding:0; display:grid; place-items:center; border:0; border-right:1px solid rgba(255,255,255,.045); color:#202524; background:transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.note-cell:first-of-type { border-right-color:rgba(230,205,164,.28); }
.note-token { position:relative; z-index:2; min-width:31px; height:31px; padding:0 6px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.76); border-radius:50%; color:#292d2c; background:rgba(247,245,239,.88); font-family:var(--serif); font-size:.67rem; opacity:0; box-shadow:0 3px 9px rgba(0,0,0,.16); pointer-events:none; transition:opacity .16s ease,background .16s ease,color .16s ease,transform .16s ease; }
.note-name,.shortcut { display:none; }
.show-notes .note-name,.show-shortcuts .shortcut,.show-shortcuts .note-cell.is-marked:not(.has-shortcut) .note-name,.fingerboard:not(.show-notes):not(.show-shortcuts) .note-cell.is-marked .note-name { display:inline; }
.show-notes .note-token,.show-shortcuts .note-token,.note-cell.is-marked .note-token { opacity:1; }
.shortcut { font-family:var(--sans); font-size:.57rem; font-weight:900; }
.note-cell.is-marked .note-token { color:#fff; border-color:#f2b764; background:var(--wine); box-shadow:0 0 0 4px rgba(143,52,45,.14),0 4px 12px rgba(0,0,0,.2); }
@media (hover:hover) and (pointer:fine) { .note-cell.has-shortcut:hover .note-token,.show-notes .note-cell:hover .note-token,.note-cell.is-marked:hover .note-token { opacity:1; transform:scale(1.07); } }

.violin-body-piece {
  position: relative;
  z-index: 2;
  grid-column:4;
  grid-row:1;
  height: 500px;
  margin-left: -6px;
  background: url("./violin-body.webp") left center/auto 100% no-repeat;
  filter: sepia(.1) saturate(1.15) hue-rotate(-7deg) drop-shadow(0 22px 18px rgba(80,50,24,.18));
}
.violin-body-piece::after { content:""; position:absolute; z-index:4; left:0; right:0; top:calc(50% - 75px); height:2px; background:linear-gradient(90deg,#f5f3e9,#9e9c96); box-shadow:0 50px 0 rgba(218,218,211,.92),0 100px 0 rgba(202,202,195,.92),0 150px 0 rgba(184,184,177,.92); opacity:.9; }
.mobile-guide { display:none; }

.instrument-stage:fullscreen,.instrument-stage.fullscreen-fallback { width:100vw; height:100vh; min-height:0; padding:clamp(20px,4vw,52px); display:flex; flex-direction:column; justify-content:center; background:#f2ede4; }
.instrument-stage:fullscreen .stage-exit,.instrument-stage.fullscreen-fallback .stage-exit { position:absolute; z-index:30; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); min-height:42px; padding:0 14px; display:block; border:1px solid rgba(23,105,92,.38); border-radius:10px; color:var(--green); background:rgba(220,236,231,.94); box-shadow:0 4px 14px rgba(23,105,92,.1); font-size:.67rem; font-weight:850; cursor:pointer; }
.instrument-stage:fullscreen .fingerboard-shell,.instrument-stage.fullscreen-fallback .fingerboard-shell { flex:0 1 auto; }
.instrument-stage.fullscreen-fallback { position:fixed; inset:0; z-index:1000; padding-right:max(20px,env(safe-area-inset-right)); padding-left:max(20px,env(safe-area-inset-left)); }

.feature-grid { width:min(1320px,calc(100% - 72px)); margin:clamp(70px,8vw,115px) auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.feature-grid article { padding:30px 42px 18px 0; }
.feature-grid article + article { padding-left:42px; border-left:1px solid var(--line); }
.feature-grid article > span { color:var(--wine); font-size:.62rem; font-weight:900; letter-spacing:.18em; }
.feature-grid h3 { margin:17px 0 9px; font-family:var(--serif); font-size:1.5rem; font-weight:400; }
.feature-grid p { max-width:330px; margin:0; color:var(--muted); font-size:.82rem; line-height:1.65; }
footer { width:min(1540px,calc(100% - 48px)); min-height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:#7f8481; font-size:.6rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
@keyframes pulse { 50% { opacity:.45; transform:scale(.88); } }

@media (max-width:1180px) {
  .control-panel { align-items:flex-start; flex-direction:column; }
  .control-group { width:100%; }
  .transport .control-button { flex:1 1 auto; }
  .fingerboard-shell { grid-template-columns:52px 32px minmax(0,1fr) 190px; }
  .string-label-rail { width:34px; margin-left:-2px; }
  .string-label-rail b { width:25px; height:25px; font-size:.66rem; }
}

@media (max-width:820px) {
  .hero { min-height:0; grid-template-columns:1fr .72fr; gap:28px; padding:46px; }
  h1 { font-size:clamp(3.6rem,10vw,5.8rem); }
  .hero-image img { height:440px; }
  .atelier-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article,.feature-grid article + article { padding:25px 0; border-left:0; border-bottom:1px solid var(--line); }
}

@media (max-width:700px) {
  .site-header { width:calc(100% - 30px); min-height:63px; }
  .site-header p { display:none; }
  .hero { width:calc(100% - 18px); margin:14px auto 34px; padding:32px 22px 24px; grid-template-columns:1fr; border-radius:20px; }
  .hero-copy { order:1; }
  .hero-image { order:2; width:min(100%,360px); border-radius:180px 180px 15px 15px; }
  .hero-image img { height:430px; }
  h1 { font-size:clamp(3.25rem,16.5vw,5rem); }
  .intro { margin:23px 0; font-size:.92rem; line-height:1.58; }
  .atelier { width:calc(100% - 10px); border-radius:18px; }
  .atelier-heading { padding:28px 20px; }
  .atelier-heading > p { font-size:.8rem; }
  .control-panel { padding:8px; }
  .control-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .view-controls { grid-template-columns:1fr 1fr; }
  .volume-control { grid-column:1/-1; }
  .volume-control { min-height:48px; }
  .volume-control input { flex:1; width:auto; }
  .mark-controls { grid-template-columns:1fr 1fr 1fr; }
  .control-button { min-height:48px; min-width:0; padding:0 8px; font-size:.68rem; }
  .take-strip { min-height:64px; padding:10px 12px; }
  .take-state { gap:9px; }
  #recordingTimer { font-size:.72rem; }
  .instrument-stage { min-height:0; padding:22px 12px 28px; }
  .stage-topline { margin:0 4px 15px; }
  .stage-topline span:first-child { visibility:hidden; }
  .string-names { margin:0 0 8px; display:grid; grid-template-columns:repeat(4,1fr); color:#706f69; text-align:center; font-family:var(--serif); font-size:.78rem; }
  .fingerboard-shell { min-height:0; display:block; }
  .pegbox,.string-label-rail,.violin-body-piece { display:none; }
  .fingerboard { width:100%; height:auto; min-height:624px; margin:0; padding:0 12px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:none; border-radius:22px 22px 50px 50px; clip-path:polygon(3% 0,97% 0,100% 100%,0 100%); filter:drop-shadow(0 16px 14px rgba(45,35,26,.18)); }
  .fingerboard::after { background:repeating-linear-gradient(180deg,transparent 0 7.6%,rgba(255,255,255,.022) 7.7% 7.9%); }
  .fingerboard::before { display:none; }
  .string-row { --string-size:2px; min-width:0; padding-left:0; display:grid; grid-template-columns:1fr; grid-template-rows:repeat(13,minmax(46px,1fr)); }
  .string-row:nth-child(2){--string-size:2.4px}.string-row:nth-child(3){--string-size:3px}.string-row:nth-child(4){--string-size:3.8px}
  .string-row::before { display:none; }
  .string-line { left:50%; right:auto; top:0; bottom:0; width:var(--string-size); height:auto; transform-origin:center top; }
  .string-line::after { background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 2px,transparent 2px 5px); }
  .note-cell { min-height:46px; border-right:0; border-bottom:1px solid rgba(255,255,255,.045); touch-action:pan-y; }
  .note-cell:first-of-type { border-right:0; border-bottom-color:rgba(230,205,164,.28); }
  .note-token { min-width:28px; height:28px; padding:0 4px; font-size:.62rem; }
  .mobile-guide { margin:16px 5px 0; display:block; color:#7c7d78; font-size:.67rem; line-height:1.5; text-align:center; }
  .mobile-guide b { color:var(--green); }
  .instrument-stage:fullscreen,.instrument-stage.fullscreen-fallback { height:100vh; overflow-y:auto; justify-content:flex-start; padding:18px 12px; }
  .instrument-stage:fullscreen .fingerboard,.instrument-stage.fullscreen-fallback .fingerboard { min-height:624px; }
  .feature-grid { width:calc(100% - 36px); margin:62px auto; }
  footer { width:calc(100% - 30px); flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
}

@media (max-width:390px) {
  .hero { padding-inline:18px; }
  h1 { font-size:clamp(3.05rem,16vw,4.15rem); }
  .hero-image img { height:400px; }
  .mark-controls { grid-template-columns:1fr 1fr; }
  .play-marks-button { grid-column:1/-1; }
  .take-state small { max-width:175px; }
  .instrument-stage { padding-inline:7px; }
  .fingerboard { padding-inline:7px; }
  .note-token { min-width:26px; height:26px; font-size:.57rem; }
}

@media (max-width:820px) and (orientation:portrait) {
  body {
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }
  .orientation-gate {
    position:fixed;
    inset:0;
    z-index:10000;
    min-height:100vh;
    min-height:100dvh;
    padding:
      max(28px,env(safe-area-inset-top))
      max(24px,env(safe-area-inset-right))
      max(28px,env(safe-area-inset-bottom))
      max(24px,env(safe-area-inset-left));
    display:grid;
    grid-template-columns:auto minmax(0,290px);
    align-items:center;
    justify-content:center;
    gap:22px;
    color:#f8f4eb;
    background:
      radial-gradient(circle at 24% 28%,rgba(217,148,56,.18),transparent 17rem),
      radial-gradient(circle at 78% 72%,rgba(143,52,45,.24),transparent 18rem),
      #15211f;
  }
  .orientation-gate div { display:grid; gap:8px; }
  .orientation-gate small { color:#e7ad61; font-size:.58rem; font-weight:900; letter-spacing:.2em; }
  .orientation-gate strong { font-family:var(--serif); font-size:1.55rem; font-weight:400; line-height:1.08; }
  .orientation-gate span:not(.turn-device) { color:#b8c2bd; font-size:.78rem; line-height:1.5; }
  .turn-device {
    position:relative;
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border:1px solid rgba(217,148,56,.38);
    border-radius:18px;
    color:#e7ad61;
    background:rgba(217,148,56,.08);
    font-size:1.45rem;
  }
  .turn-device::before {
    content:"";
    position:absolute;
    width:22px;
    height:38px;
    border:2px solid currentColor;
    border-radius:5px;
    transform:rotate(-90deg);
  }
}

@media (max-width:900px) and (orientation:landscape) {
  .instrument-stage { min-height:310px; padding:18px 14px 22px; }
  .stage-topline { margin-bottom:8px; }
  .stage-topline span:first-child { visibility:visible; }
  .string-names,.mobile-guide { display:none; }
  .fingerboard-shell {
    min-height:260px;
    display:grid;
    grid-template-columns:34px 28px minmax(0,1fr) clamp(105px,19vw,150px);
  }
  .pegbox,.violin-body-piece { display:block; }
  .pegbox { width:calc(100% + 3px); height:170px; margin-right:-3px; }
  .pegbox i:nth-of-type(1){top:28px}
  .pegbox i:nth-of-type(2){top:66px}
  .pegbox i:nth-of-type(3){top:104px}
  .pegbox i:nth-of-type(4){top:142px}
  .string-label-rail { width:30px; height:170px; margin-left:-2px; padding:9px 0; display:grid; grid-template-rows:repeat(4,1fr); }
  .string-label-rail b { width:22px; height:22px; font-size:.58rem; }
  .fingerboard {
    width:auto;
    height:170px;
    min-height:0;
    margin-right:-4px;
    padding:9px 0;
    display:grid;
    grid-template-columns:none;
    grid-template-rows:repeat(4,1fr);
    border-radius:0;
    clip-path:polygon(0 7%,100% 0,100% 100%,0 93%);
  }
  .fingerboard::after { background:repeating-linear-gradient(90deg,transparent 0 7.5%,rgba(255,255,255,.018) 7.6% 7.8%); }
  .string-row {
    min-width:0;
    padding-left:0;
    display:grid;
    grid-template-columns:.5fr 1.3fr .9fr .9fr .9fr .85fr .8fr .75fr .7fr .65fr .6fr .55fr .5fr;
    grid-template-rows:none;
  }
  .string-line { left:0; right:0; top:50%; bottom:auto; width:auto; height:var(--string-size); transform-origin:right center; }
  .string-line::after { background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 2px,transparent 2px 5px); }
  .note-cell { min-height:0; border-right:1px solid rgba(255,255,255,.045); border-bottom:0; touch-action:none; }
  .note-cell:first-of-type { border-right-color:rgba(230,205,164,.28); border-bottom:0; }
  .note-token { min-width:18px; height:18px; padding:0 2px; font-size:.48rem; }
  .shortcut { font-size:.48rem; }
  .violin-body-piece { height:280px; margin-left:-4px; }
  .violin-body-piece::after { top:calc(50% - 57px); box-shadow:0 38px 0 rgba(218,218,211,.92),0 76px 0 rgba(202,202,195,.92),0 114px 0 rgba(184,184,177,.92); }
}

@media (orientation:landscape) and (max-height:570px) and (pointer:coarse) {
  .instrument-stage:fullscreen,.instrument-stage.fullscreen-fallback { overflow:hidden; justify-content:center; }
  .instrument-stage:fullscreen .fingerboard-shell,.instrument-stage.fullscreen-fallback .fingerboard-shell { min-height:250px; display:grid; grid-template-columns:42px 32px minmax(0,1fr) 150px; }
  .instrument-stage:fullscreen .pegbox,.instrument-stage:fullscreen .violin-body-piece,.instrument-stage.fullscreen-fallback .pegbox,.instrument-stage.fullscreen-fallback .violin-body-piece { display:block; }
  .instrument-stage:fullscreen .pegbox,.instrument-stage.fullscreen-fallback .pegbox { height:180px; }
  .instrument-stage:fullscreen .string-label-rail,.instrument-stage.fullscreen-fallback .string-label-rail { height:180px; padding:10px 0; display:grid; grid-template-rows:repeat(4,1fr); }
  .instrument-stage:fullscreen .pegbox i:nth-of-type(1),.instrument-stage.fullscreen-fallback .pegbox i:nth-of-type(1){top:30px}
  .instrument-stage:fullscreen .pegbox i:nth-of-type(2),.instrument-stage.fullscreen-fallback .pegbox i:nth-of-type(2){top:70px}
  .instrument-stage:fullscreen .pegbox i:nth-of-type(3),.instrument-stage.fullscreen-fallback .pegbox i:nth-of-type(3){top:110px}
  .instrument-stage:fullscreen .pegbox i:nth-of-type(4),.instrument-stage.fullscreen-fallback .pegbox i:nth-of-type(4){top:150px}
  .instrument-stage:fullscreen .violin-body-piece,.instrument-stage.fullscreen-fallback .violin-body-piece { height:310px; }
  .instrument-stage:fullscreen .violin-body-piece::after,.instrument-stage.fullscreen-fallback .violin-body-piece::after { top:calc(50% - 60px); box-shadow:0 40px 0 rgba(218,218,211,.92),0 80px 0 rgba(202,202,195,.92),0 120px 0 rgba(184,184,177,.92); }
  .instrument-stage:fullscreen .fingerboard,.instrument-stage.fullscreen-fallback .fingerboard { min-height:0; height:180px; padding:10px 0; display:grid; grid-template-columns:none; grid-template-rows:repeat(4,1fr); border-radius:0; clip-path:polygon(0 7%,100% 0,100% 100%,0 93%); }
  .instrument-stage:fullscreen .fingerboard::before,.instrument-stage.fullscreen-fallback .fingerboard::before { display:none; }
  .instrument-stage:fullscreen .string-row,.instrument-stage.fullscreen-fallback .string-row { padding-left:0; display:grid; grid-template-columns:.5fr 1.3fr .9fr .9fr .9fr .85fr .8fr .75fr .7fr .65fr .6fr .55fr .5fr; grid-template-rows:none; }
  .instrument-stage:fullscreen .string-line,.instrument-stage.fullscreen-fallback .string-line { left:0; right:0; top:50%; bottom:auto; width:auto; height:var(--string-size); }
  .instrument-stage:fullscreen .note-cell,.instrument-stage.fullscreen-fallback .note-cell { min-height:0; border-bottom:0; border-right:1px solid rgba(255,255,255,.045); }
  .instrument-stage:fullscreen .mobile-guide,.instrument-stage.fullscreen-fallback .mobile-guide,.instrument-stage:fullscreen .string-names,.instrument-stage.fullscreen-fallback .string-names { display:none; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }