:root {
  --ink: #1d1c17;
  --paper: #e9e4d8;
  --paper-soft: #f2eee4;
  --moss: #55624d;
  --rust: #a14c2f;
  --line: rgba(29, 28, 23, 0.2);
  --mono: "DM Mono", monospace;
  --serif: "Noto Serif SC", serif;
}

* { box-sizing: border-box; }

html { background: #cbc4b6; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(135deg, #d8d1c3, #beb7a9);
  font-family: var(--serif);
}

button, input, select { font: inherit; }
button, label, select, input[type="range"] { cursor: pointer; }

.shell {
  width: min(1440px, calc(100% - 40px));
  min-height: calc(100vh - 40px);
  margin: 20px auto;
  background: var(--paper);
  box-shadow: 0 24px 80px rgba(35, 30, 22, .18);
  overflow: hidden;
}

.topbar {
  height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-weight: 600; letter-spacing: .08em; }
.brand small { font: 300 9px/1 var(--mono); letter-spacing: .18em; opacity: .55; margin-left: 3px; }
.brand-mark { width: 26px; height: 32px; display: flex; gap: 3px; align-items: center; transform: rotate(-7deg); }
.brand-mark i { display: block; width: 4px; border-radius: 50%; background: var(--ink); }
.brand-mark i:nth-child(1) { height: 22px; transform: rotate(7deg); }
.brand-mark i:nth-child(2) { height: 30px; }
.brand-mark i:nth-child(3) { height: 18px; transform: rotate(-8deg); }
.intro { margin: 0; font-size: 12px; letter-spacing: .22em; opacity: .62; }
.about-button { justify-self: end; border: 0; border-bottom: 1px solid; padding: 7px 0; background: transparent; font-size: 12px; letter-spacing: .12em; color: inherit; }
.about-button span { display: inline-block; margin-left: 12px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr); }
.image-stage { padding: 26px 34px 25px; border-right: 1px solid var(--line); min-width: 0; }
.stage-meta, .panel-heading { display: flex; justify-content: space-between; align-items: center; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; opacity: .72; }

.canvas-wrap { position: relative; height: min(61vh, 660px); min-height: 400px; overflow: hidden; background: #594b38; }
#barkCanvas { width: 100%; height: 100%; display: block; filter: none; }
.is-traced #barkCanvas { filter: none; }
#traceCanvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.canvas-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.trace-status { position: absolute; z-index: 4; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; color: #f3ead8; background: rgba(26,22,15,.54); backdrop-filter: blur(8px); font: 400 9px/1 var(--mono); letter-spacing: .08em; }
.trace-status i { display: block; width: 36px; height: 2px; overflow: hidden; background: rgba(255,255,255,.2); }
.trace-status i::after { content: ""; display: block; width: var(--trace-progress, 0%); height: 100%; background: #efdfb8; transition: width .08s linear; }
.scan-line { position: absolute; z-index: 3; right: 0; left: 0; bottom: 0; height: 2px; opacity: 0; background: #efdfb8; box-shadow: 0 0 14px rgba(255,236,188,.75); pointer-events: none; }
.scan-line::before { content: "SCAN ↑"; position: absolute; right: 14px; bottom: 8px; color: #f7e7bf; font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.scan-line span { position: absolute; width: 9px; height: 9px; left: 50%; bottom: -4px; border-radius: 50%; background: #f7e7bf; box-shadow: 0 0 0 4px rgba(247,231,191,.18); }
.scan-right .scan-line { top: 0; right: auto; bottom: 0; left: 0; width: 2px; height: auto; }
.scan-right .scan-line::before { content: "SCAN →"; top: 14px; right: auto; bottom: auto; left: 9px; white-space: nowrap; }
.scan-right .scan-line span { top: 50%; right: -4px; bottom: auto; left: auto; }
.is-playing .scan-line { opacity: 1; }
.texture-label { position: absolute; z-index: 3; right: 14px; bottom: 14px; padding: 7px 9px; color: #f3ead8; background: rgba(26,22,15,.54); backdrop-filter: blur(8px); font: 400 9px/1 var(--mono); letter-spacing: .08em; }
.free-play-cursor { --free-color: 239, 223, 184; position: absolute; z-index: 4; left: 50%; top: 50%; width: 14px; height: 14px; border: 1px solid rgba(var(--free-color), .92); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.72); box-shadow: 0 0 0 5px rgba(var(--free-color), .14), 0 0 28px rgba(var(--free-color), .72); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.free-play-cursor i { position: absolute; inset: 4px; border-radius: 50%; background: rgb(var(--free-color)); }
.free-mode .canvas-wrap { cursor: crosshair; touch-action: none; }
.free-mode .canvas-wrap.is-free-active .free-play-cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.free-mode .trace-status { color: #fff3d3; background: rgba(83,47,30,.72); }
.free-mode .trace-status i::after { width: 100%; }
.drop-hint { position: absolute; z-index: 5; inset: 16px; display: grid; place-content: center; gap: 7px; text-align: center; color: #fff7e7; border: 1px dashed rgba(255,255,255,.7); background: rgba(43,35,24,.58); backdrop-filter: blur(4px); opacity: 0; transform: scale(.98); transition: .2s ease; pointer-events: none; }
.drop-hint strong { font-size: 20px; font-weight: 500; }
.drop-hint span { font: 10px var(--mono); letter-spacing: .12em; }
.dragging .drop-hint { opacity: 1; transform: scale(1); }

.upload-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-top: 21px; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--rust); font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.upload-row h1 { margin: 0; font-size: clamp(20px, 2vw, 29px); font-weight: 500; letter-spacing: .03em; }
.upload-button { flex: 0 0 auto; display: flex; gap: 9px; align-items: center; padding: 11px 16px; border: 1px solid var(--ink); font-size: 11px; letter-spacing: .08em; transition: .2s ease; }
.upload-button:hover { color: var(--paper-soft); background: var(--ink); }
.upload-button span { font: 18px/1 var(--mono); font-weight: 300; }
.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.sound-panel { display: flex; flex-direction: column; padding: 26px 34px 24px; min-width: 0; }
.analysis-state { display: flex; align-items: center; gap: 7px; color: var(--moss); opacity: 1; }
.analysis-state i { width: 6px; height: 6px; border-radius: 50%; background: #718264; box-shadow: 0 0 0 3px rgba(113,130,100,.14); }
.score-card { margin-top: 5px; padding: 20px 0 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.score-head { display: flex; justify-content: space-between; align-items: start; }
.score-head div > span, .score-head > span { display: block; font: 400 9px/1 var(--mono); letter-spacing: .11em; opacity: .55; }
.score-head strong { display: block; margin-top: 8px; color: var(--rust); font: 400 23px/1 var(--mono); letter-spacing: .08em; }
#scoreCanvas { width: 100%; height: 122px; display: block; margin-top: 11px; }
.score-axis { display: flex; justify-content: space-between; font: 400 8px/1 var(--mono); opacity: .45; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.metrics > div { min-width: 0; }
.metrics span { display: block; font-size: 10px; opacity: .58; }
.metrics strong { display: block; margin: 8px 0 10px; font: 300 24px/1 var(--mono); }
.metrics small { font-size: 10px; margin-left: 2px; }
.metrics i { display: block; height: 2px; background: rgba(29,28,23,.13); overflow: hidden; }
.metrics b { display: block; width: 50%; height: 100%; background: var(--rust); transition: width .6s ease; }

.controls { display: grid; gap: 16px; padding: 19px 0 20px; border-bottom: 1px solid var(--line); }
.controls label { display: grid; grid-template-columns: 105px 1fr; align-items: center; gap: 15px; font-size: 11px; }
.controls label > span { display: flex; justify-content: space-between; }
.controls output { color: var(--rust); font: 400 9px var(--mono); }
.controls select { width: 100%; padding: 5px 3px; border: 0; border-bottom: 1px solid var(--line); outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.scan-controls { display: grid; gap: 16px; }
.free-readout { display: none; padding-top: 3px; }
.free-mode .scan-controls { display: none; }
.free-mode .free-readout { display: grid; gap: 17px; }
.free-readout-status { display: flex; align-items: center; gap: 8px; color: var(--rust); font: 400 9px/1.5 var(--mono); letter-spacing: .05em; }
.free-readout-status i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px rgba(161,76,47,.12); animation: freeStatusPulse 1.8s ease-in-out infinite; }
@keyframes freeStatusPulse { 50% { opacity: .4; transform: scale(.76); } }
.free-readout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.free-readout-grid div { min-width: 0; }
.free-readout-grid span { display: block; margin-bottom: 7px; font-size: 9px; opacity: .55; }
.free-readout-grid strong { display: block; overflow: hidden; color: var(--ink); font: 400 15px/1.35 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.free-readout-grid div:nth-child(-n+2) strong { color: var(--rust); font: 400 19px/1.2 var(--mono); }
.free-sound-legend { display: flex; flex-wrap: wrap; gap: 9px 15px; font: 400 8px/1.35 var(--mono); letter-spacing: .02em; }
.free-sound-legend span { display: flex; align-items: center; gap: 6px; opacity: .7; }
.free-sound-legend i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.free-sound-legend .deep { background: #26211b; }
.free-sound-legend .bark { background: #b46f3f; }
.free-sound-legend .green { background: #5f8c55; }
.free-sound-legend .cool { background: #8fb1ae; }
.free-sound-legend .bright { background: #d9b98d; border: 1px solid rgba(29,28,23,.18); }
input[type="range"] { appearance: none; width: 100%; height: 2px; background: rgba(29,28,23,.18); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--rust); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--rust); }
.timbre-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0 0; font: 400 8px/1 var(--mono); letter-spacing: .05em; }
.timbre-legend span { display: flex; align-items: center; gap: 6px; opacity: .68; }
.timbre-legend i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29,28,23,.08); }
.timbre-legend i.earth { background: #c4875d; }
.timbre-legend i.moss { background: #7f9d56; }
.timbre-legend i.light { background: #fff0c2; border: 1px solid rgba(29,28,23,.22); }
.timbre-legend b { color: var(--rust); font-weight: 500; }
.free-mode .timbre-legend { display: none; }

.performance-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border: 1px solid var(--line); }
.performance-switch button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 39px; border: 0; color: inherit; background: transparent; font-size: 11px; letter-spacing: .08em; transition: color .2s ease, background .2s ease; }
.performance-switch button + button { border-left: 1px solid var(--line); }
.performance-switch button i { display: block; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; transition: background .2s ease, box-shadow .2s ease; }
.performance-switch button:hover { color: var(--rust); }
.performance-switch button[aria-pressed="true"] { color: #f4ede1; background: var(--rust); }
.performance-switch button[aria-pressed="true"] i { background: #f4ede1; box-shadow: 0 0 0 3px rgba(244,237,225,.18); }
.free-mode .transport .play-button, .free-mode .transport .restart-button { opacity: .34; pointer-events: none; }

.transport { display: grid; grid-template-columns: 54px 1fr 36px; gap: 14px; align-items: center; margin-top: 20px; }
.play-button { width: 54px; height: 54px; border: 0; border-radius: 50%; color: #f5eee1; background: var(--rust); box-shadow: 0 8px 22px rgba(161,76,47,.25); transition: transform .2s ease, background .2s ease; }
.play-button:hover { transform: scale(1.04); background: #8e4028; }
.pause-icon { display: none; font: 18px var(--mono); }
.is-playing .play-icon { display: none; }
.is-playing .pause-icon { display: inline; }
.transport div { min-width: 0; }
.transport strong, .transport span { display: block; }
.transport strong { margin-bottom: 5px; font-size: 13px; font-weight: 500; }
.transport div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; opacity: .55; }
.restart-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: inherit; background: transparent; font: 19px var(--mono); }
.recording-tools { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.record-button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); color: inherit; background: transparent; font-size: 10px; letter-spacing: .06em; transition: .2s ease; }
.record-button:hover { border-color: var(--rust); color: var(--rust); }
.record-button i { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); }
.record-progress { height: 2px; overflow: hidden; background: rgba(29,28,23,.13); }
.record-progress i { display: block; width: 0%; height: 100%; background: var(--rust); transition: width .16s linear; }
.recording-tools output { grid-column: 1 / -1; font: 400 8px/1 var(--mono); letter-spacing: .06em; opacity: .5; }
.is-recording .record-button { color: #f4ede1; border-color: var(--rust); background: var(--rust); }
.is-recording .record-button i { background: #f4ede1; animation: recordPulse 1.1s ease-in-out infinite; }
@keyframes recordPulse { 50% { opacity: .25; transform: scale(.72); } }
.mapping-note { margin: auto 0 0; padding-top: 18px; font-size: 9px; line-height: 1.7; letter-spacing: .04em; opacity: .52; }

footer { display: flex; justify-content: space-between; padding: 13px 34px; border-top: 1px solid var(--line); font: 400 8px/1 var(--mono); letter-spacing: .12em; opacity: .56; }

.format-portrait .shell { width: min(820px, calc(100% - 32px)); }
.format-portrait .topbar { grid-template-columns: 1fr auto; padding: 0 28px; }
.format-portrait .topbar .intro { display: none; }
.format-portrait .workspace { grid-template-columns: 1fr; }
.format-portrait .image-stage { padding: 24px 28px 26px; border-right: 0; border-bottom: 1px solid var(--line); }
.format-portrait .canvas-wrap { width: 100%; height: auto; min-height: 0; aspect-ratio: 11 / 13; }
.format-portrait .sound-panel { padding: 26px 28px 32px; }
.format-portrait .mapping-note { margin-top: 24px; }

dialog { width: min(500px, calc(100% - 40px)); padding: 48px; border: 0; color: #eee7d8; background: #26271f; box-shadow: 0 30px 90px rgba(0,0,0,.4); }
dialog::backdrop { background: rgba(28,25,19,.62); backdrop-filter: blur(5px); }
dialog button { position: absolute; top: 15px; right: 18px; border: 0; color: inherit; background: transparent; font: 28px/1 var(--mono); }
dialog h2 { margin: 16px 0 20px; font-size: 30px; line-height: 1.45; font-weight: 500; }
dialog p { margin: 0; font-size: 13px; line-height: 2; opacity: .72; }

@media (max-width: 900px) {
  html, body { overflow-x: clip; }
  body { min-width: 0; min-height: 100dvh; }
  .shell { width: 100%; min-height: 100dvh; margin: 0; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 20px; }
  .intro { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .image-stage { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px; }
  .canvas-wrap { height: 56vh; min-height: 350px; }
  .sound-panel { padding: 24px 20px 30px; }
  .mapping-note { margin-top: 18px; }
  footer { padding: 13px 20px; }

  .format-portrait .shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
  }
  .format-portrait .topbar {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .format-portrait .image-stage {
    padding: 22px max(20px, env(safe-area-inset-right)) 22px max(20px, env(safe-area-inset-left));
  }
  .format-portrait .sound-panel {
    padding: 24px max(20px, env(safe-area-inset-right)) 30px max(20px, env(safe-area-inset-left));
  }
  .format-portrait footer {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

@media (max-width: 520px) {
  .brand small, footer span:last-child { display: none; }
  .canvas-wrap { min-height: 310px; }
  .upload-row { align-items: stretch; flex-direction: column; }
  .upload-button { justify-content: center; }
  .metrics { gap: 10px; }
  .controls label { grid-template-columns: 90px 1fr; }
  .free-readout-grid { gap: 16px; }
  dialog { padding: 42px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}