/* A quiet sidebar and a generous stage; tools appear only when requested. */
:root { --brass:#c8b17d; --line:#c6ae7628; --muted:#a6aaa3; }
body { background:#10151c; }
.ui-icon { width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.site-header { height:68px; max-width:none; padding:0 32px; background:#131922; border-bottom:1px solid var(--line); }
.brand { font-family:Georgia,"Songti SC",serif; font-weight:400; gap:12px; }
.brand>.ui-icon { width:29px; height:29px; color:var(--brass); }
.version { font:8px var(--mono); letter-spacing:.1em; }
.header-meta { gap:24px; font-size:12px; }
.collection-entry { display:flex; gap:8px; align-items:center; }
#collectionCount { font:10px var(--mono); opacity:.6; }
.page-shell { max-width:none; padding:0; }
.workspace { grid-template-columns:340px minmax(0,1fr); gap:0; align-items:stretch; margin:0; min-height:calc(100dvh - 68px); }
.console-left { padding:44px 30px 30px; border-right:1px solid #c5b08030; background:linear-gradient(155deg,#191d28,#0f141c 65%); min-width:0; display:flex; flex-direction:column; }
.intro { margin:0 0 44px; padding:0; display:block; max-width:none; }
.intro .eyebrow { font-size:8px; letter-spacing:.23em; color:var(--brass); margin:0 0 18px; }
.intro h1 { font-size:31px; font-weight:400; letter-spacing:.06em; line-height:1.6; margin:0; }
.intro h1 span { display:block; }
.intro-description { margin:20px 0 0; font-size:11px; line-height:1.8; color:var(--muted); }
.intro-note { display:none; }
.editor-panel { display:block; padding:0; margin:0; max-width:none; width:100%; }
.editor-panel>.section-row { flex-direction:row; align-items:center; margin-bottom:18px; }
.section-kicker { font:8px var(--mono); color:#a29a85; letter-spacing:.16em; }
.color-name { font-family:Georgia,"SimSun",serif; font-size:26px; letter-spacing:.12em; background:none; padding:0; }
.color-preview { height:74px; border:3px solid #888; border-radius:2px; outline:1px solid #b9a77a30; outline-offset:3px; margin:0 0 24px; }
.preview-label,#previewHex,#previewAlpha { display:none; }
.hex-label-row { margin:0 0 10px; }
#sourceLabel { display:none; }
#outputFormat { font:10px var(--mono); letter-spacing:.13em; padding:4px 0; min-height:26px; border:0; background:transparent; color:#c8b17d; }
#outputFormat option { background:#19212a; color:#eee; }
.hex-input-row { display:flex; align-items:center; gap:7px; min-height:49px; padding:4px 0 4px 10px; border:1px solid #b9a77940; border-radius:3px; background:#ffffff04; }
.hex-input-row input { font:20px var(--mono); padding:5px 0; min-width:0; width:100%; color:#e6dfcf; background:none; letter-spacing:0; }
.hex-input-row #formattedValue { font-size:11px; }
.hex-input-row .compact { font-size:9px; min-height:26px; padding:3px; color:#b4aa91; background:none; }
.hex-input-row #copyHex { flex-shrink:0; width:43px; min-width:43px; min-height:32px; font-size:11px; border-left:1px solid var(--line); color:#dac38c; padding:4px; }
.field-error { font-size:10px; }
.fine-tune-trigger,.save-button { display:inline-flex; align-items:center; justify-content:center; width:calc(50% - 6px); min-height:37px; height:37px; margin:18px 0 0; border:1px solid #c3ac7633; border-radius:2px; font-size:11px; background:transparent; color:#d4c4a0; padding:6px; }
.save-button.button.primary { margin-left:7px; background:transparent; border-color:#c3ac7633; color:#d4c4a0; box-shadow:none; }
.local-note { display:none; }
.source-actions { margin-top:auto; padding-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.source-actions p { grid-column:1/-1; font-size:9px; color:#89908c; letter-spacing:.12em; margin:0 0 2px; }
.source-actions button { font-size:11px; color:#c4c5b7; display:flex; align-items:center; gap:9px; padding:12px 0; text-align:left; }
.source-actions .ui-icon { width:17px; height:17px; color:#c2ad7e; }
.record-player { width:100%; max-width:none; margin:0; padding:26px clamp(30px,5vw,100px) 20px; border:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; background:radial-gradient(ellipse at 48% 44%,hsl(var(--scene) 22% 28% / .8),transparent 75%),#172326; }
.machine-top { width:100%; max-width:800px; font-size:8px; color:#adb29f; opacity:.6; margin-bottom:15px; }
.turntable { width:min(100%,calc((100dvh - 300px) * 1.15)); max-width:850px; flex-shrink:0; margin:0; }
.disc-caption { font-size:10px; letter-spacing:.1em; bottom:-2%; color:#adb5a8; }
.machine-controls { width:100%; max-width:740px; margin-top:24px; padding-top:12px; border-top:0; }
.play-sound { font-size:11px; }.play-sound>span:first-child { width:36px; height:36px; }
#soundStatus { font-size:9px; color:#a1aca0; }
.volume-control label { color:#a8b09e; }
.site-footer { display:none; }
.notice { margin:0; border-radius:0; }
.button.primary { background:#c8b17d; border:1px solid #c8b17d; color:#172326; border-radius:2px; }
button:hover:not(:disabled) { filter:brightness(1.12); }
/* Tools share one restrained dialog treatment. */
dialog { background:linear-gradient(135deg,#23302f,#151f22); border:1px solid #b5a47755; border-radius:4px; padding:30px; max-height:88dvh; }
dialog::backdrop { background:#070e14d9; backdrop-filter:blur(5px); }
dialog h2 { font:25px Georgia,"Songti SC","SimSun",serif; color:#ded1ae; }
dialog .eyebrow { color:#b6a479; }
dialog .toast { position:sticky; bottom:0; left:auto; transform:none; width:100%; max-width:100%; }
#fineTuneDialog { width:min(450px,calc(100% - 30px)); }
.fine-current { display:flex; align-items:center; gap:15px; padding:12px; border:1px solid var(--line); }
.fine-current>span { width:40px; height:28px; }.fine-current i { display:block; width:100%; height:100%; }
#fineTuneDialog .sliders { margin:26px 0; }#fineTuneDialog .format-list code { font-size:11px; }
#imageDialog { width:min(1040px,calc(100% - 30px)); max-width:none; padding:24px; }
.image-dialog-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.image-dialog-heading h2 { margin:0 auto 0 0; font-size:23px; }
.image-dialog-heading .button { font-size:11px; padding:8px 10px; }
#imageDialog .drop-zone { min-height:280px; height:min(55dvh,580px); background:#101a1c; border:1px dashed #bcaa7938; border-radius:3px; }
.empty-state { padding:30px 15px; display:flex; align-items:center; justify-content:center; flex-direction:column; height:100%; }
.image-emblem svg { width:52px; height:44px; stroke:#bca36a; stroke-width:1; fill:none; }
.empty-state h2 { font-size:20px; margin:18px 0 8px; }.empty-state p { margin:5px 0; }
.empty-state .primary { margin:18px 0 10px; }.demo-button { color:#c8b17d; }
.image-toolbar { min-height:32px; gap:10px; }.image-info { min-width:0; flex:1; }
.image-stage { height:100%; min-height:0; padding:8px; }
.canvas-wrap { width:min(100%,calc(var(--image-ratio,1) * min(52dvh,550px))); }
.image-bottom { margin:8px 0; }.sample-options select { background:#1b282b; color:#ddd7c7; border:1px solid var(--line); }
.inline-message { color:#d6bf8c; font-size:11px; }.loading-state { background:#172525eb; color:#eee; }
#collectionDialog { width:min(720px,calc(100% - 30px)); max-width:720px; }
#collectionDialog .collection-panel { border:0; margin:0; padding:8px 0 0; }
#collectionDialog .collection-heading { padding-right:15px; margin-bottom:18px; }
#collectionDialog .collection-heading h2 { font-size:25px; }
.library-label { font-size:12px; font-weight:400; color:#c8b17d; margin:10px 0; }
#collectionDialog .saved-list { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:18px; max-height:35dvh; overflow:auto; padding:8px; }
#collectionDialog .saved-color .color-strip { width:100%; height:auto; aspect-ratio:1; }
#collectionDialog .color-strip>span { position:absolute; inset:0; }
#collectionDialog .saved-color .color-caption { padding:13px 0 27px; text-align:center; font-size:10px; }
#collectionDialog .delete-color { bottom:0; right:calc(50% - 14px); min-height:24px; min-width:28px; padding:2px; font-size:16px; }
#collectionDialog .history-section { margin-top:22px; padding-top:16px; }
#collectionDialog .history-section h2 { font-size:12px; font-weight:400; }
#collectionDialog .history-list { display:flex; flex-wrap:wrap; gap:9px; }
#collectionDialog .history-chip { width:26px; height:26px; border-radius:50%; border:0; box-shadow:none; }
#collectionDialog .collection-footnote { font-size:10px; margin-top:18px; }
@media (min-width:801px) and (max-height:760px) {
  .console-left { padding-top:28px; padding-bottom:22px; }.intro { margin-bottom:28px; }
  .intro h1 { font-size:28px; }.intro-description { margin-top:14px; }
  .source-actions { padding-top:25px; }.color-preview { height:58px; margin-bottom:18px; }
}
@media (max-width:1050px) and (min-width:801px) {
  .workspace { grid-template-columns:300px minmax(0,1fr); }.console-left { padding-left:24px; padding-right:24px; }
  .record-player { padding-left:24px; padding-right:24px; }.intro h1 { font-size:27px; }
}
@media (max-width:800px) {
  .site-header { height:60px; padding:0 20px; }.brand { font-size:20px; }.version { display:none; }
  .header-meta { gap:12px; }.header-meta .text-button { font-size:10px; }#helpButton { display:none; }
  .workspace { display:flex; flex-direction:column; min-height:0; }
  .console-left { padding:24px; border:0; order:1; }.intro { margin:0 0 24px; }
  .intro h1 { font-size:27px; }.intro h1 span { display:inline; }.intro .eyebrow { margin-bottom:10px; }
  .intro-description { margin-top:10px; }.editor-panel { max-width:none; }.color-name { font-size:24px; }
  .color-preview { height:45px; margin-bottom:18px; }.source-actions { padding-top:22px; }
  .record-player { order:0; padding:22px 24px 20px; }
  .turntable { width:100%; max-width:540px; }.machine-top { font-size:6px; }.machine-controls { max-width:520px; margin-top:22px; }
  .console-left { padding-bottom:105px; }.mobile-dock { background:#131d24f5; }
  #imageDialog { padding:18px; }.image-dialog-heading { flex-wrap:wrap; }.image-dialog-heading h2 { font-size:19px; }
  #expandedCopy { font-size:10px; }.empty-state h2 { font-size:17px; }
  #collectionDialog { padding:24px 18px; }#collectionDialog .collection-heading { display:block; }
  #collectionDialog .collection-actions { margin-top:15px; }
}

/* Final tactile details: quiet surfaces and a matched pair of physical controls. */
.intro h1 { font-weight:700; }
.console-left { position:relative; isolation:isolate; }
.classical-watermark { position:absolute; left:10px; bottom:14px; font-family:"Segoe UI Symbol","Noto Music",serif; font-size:280px; line-height:1; color:#c8b17d; opacity:.045; z-index:-1; pointer-events:none; user-select:none; transform:rotate(-12deg); }
.color-preview { border:0; outline:0; border-radius:2px; }
.hex-input-row { border:0; background:transparent; padding-left:0; }
.hex-input-row #copyHex { border:0; }
.fine-tune-trigger,.save-button.button.primary { border:0; background:transparent; box-shadow:none; }
.fine-tune-trigger { justify-content:flex-start; padding-left:0; }
#hueRing:focus { outline:none; }
/* Keyboard focus stays visible on the small marker instead of encircling the record. */
#hueRing:focus-visible:not(.pointer-active) .ring-indicator:before { outline:2px solid #c8b17d; outline-offset:4px; }
.machine-controls { align-items:flex-end; }
.machine-controls>div:first-child { position:relative; display:flex; align-items:flex-end; min-height:56px; }
#playSound { width:40px; height:40px; padding:0; display:grid; place-items:center; border:1px solid #aaa68e; border-radius:50%; color:#e3d4a8; background:radial-gradient(circle at 35% 28%,#626964,#253035 66%); box-shadow:0 0 0 3px #101a1e,0 0 0 4px #ffffff10,2px 5px 8px #0008,inset 0 1px 1px #ffffff30; transition:box-shadow .15s,transform .15s; }
#playSound #playIcon { width:auto; height:auto; display:block; border:0; border-radius:0; margin:0; font-size:12px; line-height:1; text-shadow:0 1px 2px #000; }
#playSound:active,#playSound[aria-pressed=true] { box-shadow:0 0 0 3px #101a1e,0 0 0 4px #ffffff10,inset 1px 3px 6px #0008; background:radial-gradient(circle at 50% 65%,#4c5752,#253035 75%); transform:translateY(1px); }
#playSound[aria-pressed=true] #playIcon { color:#f0d99b; }
.volume-control { grid-template-columns:40px 75px; }
.volume-knob { width:40px; height:40px; }
#soundStatus:not(.sr-only) { position:absolute; top:100%; left:0; min-width:240px; margin-top:10px; color:#e2c996; }
@media(max-width:420px) { .volume-control { grid-template-columns:40px 60px; } .volume-knob { width:40px; height:40px; } }
@media(prefers-reduced-motion:reduce) { #playSound { transition:none; } }

/* Colour and its notation share one surface; adjustment stays in the sidebar. */
.machine-top { font-size:11px; letter-spacing:.12em; opacity:.8; }
.volume-control label { font-size:11px; letter-spacing:.06em; }
#playSound { position:relative; flex-shrink:0; }
#playText { position:absolute; left:54px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:12px; font-weight:400; color:#dfcfab; text-shadow:none; }
#playSound:active #playText { transform:translateY(calc(-50% - 1px)); }
.color-preview { height:96px; margin:0; position:relative; overflow:hidden; }
.color-preview .hex-input-row { position:absolute; inset:auto 0 0; display:flex; align-items:center; z-index:1; min-height:48px; padding:6px 10px; background:#0009; gap:6px; }
.color-preview .hex-input-row input { color:#fff; text-shadow:0 1px 2px #0004; font-size:19px; }
.color-preview .hex-input-row #formattedValue { font-size:11px; }
.color-preview .hex-input-row #copyHex,.color-preview .hex-input-row .compact { color:#fff; }
.hex-label-row { margin-bottom:8px; }
#fineTuneDialog { position:relative; padding:14px 0 0; margin-top:8px; width:100%; }
#fineTuneDialog .eyebrow,#fineTuneTitle,#fineTuneDialog .fine-current,#fineTuneDialog .format-list { display:none; }
#closeFineTune { top:0; right:0; width:24px; height:24px; min-height:24px; font-size:17px; }
#fineTuneDialog .sliders { margin:12px 0 0; }
#fineTuneDialog .slider-row { grid-template-columns:52px minmax(0,1fr) 37px; gap:8px; margin-bottom:14px; }
#fineTuneDialog label,#fineTuneDialog output { font-size:10px; }
.classical-watermark { left:0; bottom:0; width:100%; height:400px; object-fit:contain; opacity:.065; transform:none; }
@media(max-width:800px) { .machine-top { font-size:9px; }.volume-control label { font-size:10px; }.color-preview { height:96px; } }
@media(max-width:420px) { #playText { left:49px; font-size:10px; }.machine-top { font-size:8px; letter-spacing:.04em; } }

.color-preview .hex-input-row { inset:0; background:transparent; padding:12px; }
.color-preview .hex-input-row input { background:#0008; border-radius:3px; padding:8px 5px; }
.color-preview .hex-input-row #copyHex,.color-preview .hex-input-row .compact { background:#0008; border-radius:3px; }
#fineTuneDialog .sliders { gap:8px; }
#fineTuneDialog .slider-row { min-height:24px; margin-bottom:6px; }
@media(min-width:801px) {
  .console-left { height:calc(100dvh - 68px); overflow-y:auto; scrollbar-width:thin; }
  .record-player { height:calc(100dvh - 68px); }
}

.color-preview .hex-input-row #formattedValue { font-size:12px; }

/* Requested rollback of type scale and simpler, always-visible adjustment. */
.machine-top { font-size:8px; letter-spacing:.14em; opacity:.6; }
.volume-control label { font-size:8px; letter-spacing:normal; }
.color-preview { height:74px; }
.color-preview .hex-input-row input,
.color-preview .hex-input-row #copyHex,
.color-preview .hex-input-row .compact { background:transparent; border:0; box-shadow:none; }
.color-preview .hex-input-row input { text-shadow:0 1px 3px #0009; }
.color-preview .hex-input-row #copyHex,.color-preview .hex-input-row .compact { text-shadow:0 1px 3px #0009; }
.fine-tune-heading { display:inline-block; width:calc(50% - 6px); margin:20px 0 0; font-size:11px; font-weight:400; color:#d4c4a0; }
#fineTuneDialog { padding-top:0; }
#fineTuneDialog .sliders { margin-top:16px; }
@media(min-width:801px) and (max-height:760px) { .color-preview { height:58px; } }
@media(max-width:800px) { .machine-top { font-size:6px; }.color-preview { height:45px; } }

#fineTuneDialog .sliders { padding:4px 0; margin-top:10px; }
@media(min-width:801px) and (max-height:760px) { .console-left { padding-top:22px; } .intro { margin-bottom:20px; } .source-actions { padding-top:20px; } }

/* Let the ornament rise from the source caption into the sidebar. */
.source-actions p { position:relative; }
.classical-watermark {
  top:auto; right:-24px; bottom:100%; left:-24px; width:auto;
  height:var(--score-height,440px); min-height:0; opacity:.19;
  background:none;

}
.classical-watermark::before { content:""; position:absolute; inset:0; background:var(--score-gradient); -webkit-mask:url("music-score-ai-broad.png") center / 100% 100% no-repeat; mask:url("music-score-ai-broad.png") center / 100% 100% no-repeat; }
@media(max-width:800px) { .classical-watermark { opacity:.17; } }

/* Normalize native controls and keep the same hierarchy on iPad. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button,input,select { -webkit-appearance:none; appearance:none; }
.intro h1,.color-name { font-family:"Songti SC","STSong","Songti TC","SimSun",serif; }
.fine-tune-heading { width:42%; }
.save-button.button.primary { width:calc(58% - 8px); margin-left:0; vertical-align:baseline; }
#playIcon { font-size:0 !important; }
#playIcon::before { content:""; display:block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid #e3d4a8; margin-left:2px; }
#playSound[aria-pressed=true] #playIcon::before { width:8px; height:10px; border:0; margin:0; background:linear-gradient(to right,#e3d4a8 0 30%,transparent 30% 70%,#e3d4a8 70%); }
.record-player { position:relative; isolation:isolate; }
.record-player::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 48% 44%,hsl(var(--scene) 65% 65% / .3),transparent 65%),radial-gradient(ellipse at 48% 44%,rgb(240 169 90 / calc(var(--music-warmth,0) * .2)),transparent 70%); opacity:var(--music-energy,0); transition:opacity .25s linear; }

/* Bundled type and explicit geometry avoid platform font and percentage-height differences. */
@font-face { font-family:"Editorial Serif"; src:url("editorial-serif-0.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Editorial Serif"; src:url("editorial-serif-1.ttf") format("truetype"); font-weight:700; font-display:swap; }
.intro h1,.color-name { font-family:"Editorial Serif",serif; }
.turntable { height:var(--turntable-height); aspect-ratio:auto; }
.hue-ring { height:var(--ring-size); aspect-ratio:auto; }
.platter { height:var(--platter-size); aspect-ratio:auto; top:calc(3% + var(--platter-offset)); }
#volume { background:#4b514e; border:0; border-radius:8px; height:6px; padding:0; }
#volume::-webkit-slider-runnable-track { height:6px; background:transparent; border:0; border-radius:8px; }
#volume::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; margin-top:-4.5px; background:#fff; border:2px solid #7fa993; border-radius:50%; }
#volume::-moz-range-track { height:6px; background:transparent; border:0; }
#volume::-moz-range-thumb { width:11px; height:11px; background:#fff; border:2px solid #7fa993; border-radius:50%; }