:root {
  --bg: #f7f4ee;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #fffdf9;
  --ink: #24282b;
  --muted: #73716b;
  --line: #ded8ce;
  --gold: #b68a3a;
  --shadow: 0 24px 70px rgba(43, 38, 28, .10);
  --radius: 28px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100%; color: var(--ink); background:
    radial-gradient(circle at 10% 0%, rgba(182,138,58,.08), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { width: min(980px, 100%); margin: auto; padding: 20px clamp(16px, 4vw, 44px) 34px; }
.brandbar { display:flex; align-items:center; justify-content:space-between; padding: 10px 0 34px; }
.wordmark { border:0; background:none; padding:0; text-align:left; cursor:pointer; }
.wordmark > span { display:block; font-size: clamp(29px, 5vw, 42px); font-weight: 400; letter-spacing:-.05em; }
.wordmark small { display:block; color:var(--gold); font-size:9px; letter-spacing:.32em; margin-top:5px; }
.gold { color:var(--gold); }
.header-actions { display:flex; gap:8px; }
.icon-button { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.hero { max-width:720px; padding: clamp(18px, 4vw, 40px) 0 30px; }
.eyebrow, .result-label { color:var(--gold); font-size:11px; letter-spacing:.24em; font-weight:700; }
.hero h1 { font-size:clamp(40px, 8vw, 78px); line-height:.98; letter-spacing:-.055em; font-weight:450; margin:12px 0 18px; }
.hero-copy { max-width:620px; color:var(--muted); font-size:clamp(16px, 2vw, 19px); line-height:1.65; }
.tabs { display:flex; gap:6px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.45); margin-bottom:22px; }
.tab { flex:1; min-width:max-content; border:0; border-radius:13px; padding:12px 18px; background:transparent; cursor:pointer; color:var(--muted); }
.tab.active { background:var(--ink); color:#fff; }
.view { display:none; }
.view.active { display:block; animation:fade .25s ease; }
@keyframes fade { from {opacity:0; transform:translateY(5px)} }
.category-strip { display:flex; gap:8px; overflow:auto; padding:2px 0 15px; scrollbar-width:none; }
.category-button { white-space:nowrap; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 14px; cursor:pointer; color:var(--muted); }
.category-button.active { border-color:var(--gold); color:var(--ink); background:rgba(182,138,58,.10); }
.converter-card { background:var(--surface); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.82); box-shadow:var(--shadow); border-radius:var(--radius); padding:clamp(20px, 4vw, 38px); }
.field label { display:block; color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 9px 3px; }
input, select { width:100%; border:1px solid var(--line); border-radius:17px; background:var(--surface-solid); color:var(--ink); padding:16px 17px; outline:none; }
input { font-size:clamp(24px, 5vw, 38px); font-weight:500; }
input:focus, select:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(182,138,58,.10); }
.input-row { display:grid; grid-template-columns:1fr 58px; gap:10px; }
.mic-button { border:0; border-radius:17px; background:var(--ink); color:var(--gold); font-size:13px; cursor:pointer; }
.mic-button.listening { animation:pulse 1s infinite; }
@keyframes pulse { 50% { transform:scale(.92); box-shadow:0 0 0 8px rgba(182,138,58,.16); } }
.unit-grid { display:grid; grid-template-columns:1fr 48px 1fr; gap:12px; align-items:end; margin-top:24px; }
.swap-button { height:50px; border-radius:50%; border:1px solid var(--line); background:var(--surface-solid); cursor:pointer; }
.result-panel { margin-top:24px; padding:24px; border-radius:22px; background:var(--ink); color:#fff; min-height:148px; display:flex; flex-direction:column; justify-content:center; }
.result-panel strong { display:block; font-size:clamp(34px, 8vw, 66px); font-weight:450; letter-spacing:-.045em; margin:8px 0; overflow-wrap:anywhere; }
.result-panel span:last-child { color:#bbb9b2; font-size:13px; }
.tape-stage { display:flex; align-items:center; height:76px; margin:24px 0 2px; overflow:hidden; }
.tape-case { width:67px; height:67px; z-index:2; flex:0 0 auto; display:grid; place-items:center; border-radius:20px; background:var(--ink); color:var(--gold); font-size:28px; box-shadow:0 8px 20px rgba(0,0,0,.13); }
.tape-window { flex:1; overflow:hidden; margin-left:-5px; }
.tape { position:relative; width:88%; height:38px; background:#d7ae50; border:1px solid #9e782a; transform-origin:left; transform:scaleX(.08); transition:transform .55s cubic-bezier(.2,.8,.2,1); box-shadow:inset 0 -8px 14px rgba(104,74,19,.12); }
.tape.extended { transform:scaleX(1); }
.tick { position:absolute; top:0; height:14px; border-left:2px solid #3c321f; }
.t1{left:12%}.t2{left:27%;height:22px}.t3{left:42%}.t4{left:57%;height:22px}.t5{left:72%}.t6{left:87%;height:22px}
.tape-number { position:absolute; top:19px; font-size:9px; color:#3c321f; }
.n1{left:24%}.n2{left:54%}.n3{left:70%}.n4{left:85%}
.card-actions { display:flex; gap:10px; margin-top:20px; }
.secondary-button { flex:1; border:1px solid var(--line); border-radius:14px; background:transparent; padding:13px; cursor:pointer; }
.coin-animation { display:flex; justify-content:center; align-items:center; gap:18px; padding:28px 0 4px; }
.coin { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--gold); background:#f3dfad; color:#5f4619; font-weight:700; transition:transform .4s ease; }
.coin-animation.moving .coin-a { transform:translateX(16px) rotate(25deg); }
.coin-animation.moving .coin-b { transform:translateX(-16px) rotate(-25deg); }
.transfer-line { color:var(--gold); font-size:24px; }
.disclaimer { color:var(--muted); font-size:12px; line-height:1.55; margin:22px 2px 0; }
.list-header { display:flex; justify-content:space-between; align-items:center; }
.list-header h2 { font-size:30px; font-weight:500; }
.text-button { border:0; background:none; color:var(--gold); cursor:pointer; }
.saved-list { display:grid; gap:10px; }
.saved-item, .empty-state { border:1px solid var(--line); border-radius:18px; padding:17px; background:var(--surface); }
.saved-item { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.saved-item strong { display:block; font-size:16px; }
.saved-item small { color:var(--muted); }
.saved-item button { border:0; background:none; color:var(--gold); cursor:pointer; }
footer { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; padding:34px 4px 5px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 20px); background:var(--ink); color:#fff; padding:11px 16px; border-radius:12px; opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
body.dark {
  --bg:#171918; --surface:rgba(35,38,36,.82); --surface-solid:#252826; --ink:#f4f0e7;
  --muted:#aaa79f; --line:#3f423e; --shadow:0 24px 70px rgba(0,0,0,.28);
}
body.dark .tab.active, body.dark .result-panel, body.dark .tape-case, body.dark .mic-button { background:#eee9df; color:#1e211f; }
body.dark .result-panel span:last-child { color:#686b67; }
@media (max-width:620px) {
  .unit-grid { grid-template-columns:1fr 42px 1fr; gap:7px; }
  select { padding:14px 9px; font-size:14px; }
  .converter-card { border-radius:22px; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }


/* Adaptive museum-style conversion visuals */
.visual-stage {
  margin: 24px 0 4px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,234,223,.72)),
    radial-gradient(circle at 20% 10%, rgba(182,138,58,.16), transparent 28%);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 18px 40px rgba(64,53,31,.08);
  overflow: hidden;
}
body.dark .visual-stage {
  background: linear-gradient(145deg, rgba(49,52,49,.94), rgba(27,29,28,.88));
}
.visual-caption { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.visual-caption > span { color:var(--muted); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.sound-toggle { border:0; background:none; color:var(--gold); font-size:11px; cursor:pointer; padding:5px; }
.measurement-visual { display:none; min-height:116px; }
.measurement-visual.active { display:grid; place-items:center; animation:visualFade .35s ease; }
@keyframes visualFade { from { opacity:0; transform:translateY(4px) scale(.99) } }

.tape-photo { width:100%; display:flex; align-items:center; padding:16px 2px 10px; }
.tape-case-real {
  width:86px; height:82px; flex:0 0 86px; position:relative; z-index:3; border-radius:25px 27px 23px 26px;
  background:
    linear-gradient(145deg, #3b3d3d 0%, #17191a 56%, #090a0a 100%);
  border:1px solid #505252;
  box-shadow: 0 16px 24px rgba(0,0,0,.28), inset 8px 9px 15px rgba(255,255,255,.08), inset -9px -11px 14px rgba(0,0,0,.42);
}
.case-highlight { position:absolute; width:48px; height:16px; left:13px; top:9px; border-radius:50%; background:rgba(255,255,255,.09); filter:blur(3px); transform:rotate(-16deg); }
.case-letter { position:absolute; inset:0; display:grid; place-items:center; color:#d1aa58; font-size:34px; font-weight:300; text-shadow:0 1px 0 #473414; }
.case-lock { position:absolute; width:24px; height:9px; left:31px; bottom:-5px; border-radius:0 0 8px 8px; background:linear-gradient(#5a5c5b,#222); }
.tape-track { flex:1; overflow:visible; margin-left:-4px; filter:drop-shadow(0 8px 7px rgba(80,56,14,.18)); }
.tape-real {
  position:relative; height:46px; width:100%; transform-origin:left center; transform:scaleX(.04);
  transition:transform .72s cubic-bezier(.12,.78,.16,1);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.35), transparent 23%, rgba(91,60,9,.12) 92%),
    linear-gradient(90deg,#c79732,#e7c56c 20%,#d5a845 72%,#b98528);
  border:1px solid #94701f; border-left:0;
}
.tape-real.extended { transform:scaleX(var(--tape-extension, .65)); }
.tape-hook { position:absolute; right:-8px; top:-3px; width:11px; height:52px; background:linear-gradient(90deg,#9b9c98,#e7e7df,#7b7c79); border-radius:2px; box-shadow:2px 2px 5px rgba(0,0,0,.24); }
.metric-scale,.imperial-scale { position:absolute; inset:0; opacity:0; transition:opacity .35s ease; }
.metric-scale.active,.imperial-scale.active { opacity:1; }
.metric-scale {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, #342816 12px 13px, transparent 13px 24px),
    repeating-linear-gradient(90deg, transparent 0 59px, #241b0e 59px 61px, transparent 61px 120px);
  background-position:0 0,0 0;
}
.imperial-scale {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, #342816 9px 10px, transparent 10px 18px),
    repeating-linear-gradient(90deg, transparent 0 71px, #241b0e 71px 73px, transparent 73px 144px);
}
.metric-scale::after,.imperial-scale::after {
  position:absolute; left:11px; top:25px; color:#3d2c12; font-size:9px; letter-spacing:2.2em; white-space:nowrap;
}
.metric-scale::after { content:"10 20 30 40 50 60 70 80"; }
.imperial-scale::after { content:"1 2 3 4 5 6 7 8"; }

.vessel-scene { position:relative; height:130px; width:150px; display:grid; place-items:end center; }
.glass-vessel {
  width:76px; height:118px; position:relative; overflow:hidden; border:2px solid rgba(150,160,159,.56); border-top:0;
  border-radius:4px 4px 20px 20px; background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(201,216,213,.12),rgba(255,255,255,.45));
  box-shadow:inset 8px 0 12px rgba(255,255,255,.4), 0 12px 22px rgba(44,61,59,.14);
}
.liquid-fill { position:absolute; left:3px; right:3px; bottom:3px; height:12%; border-radius:0 0 16px 16px; background:linear-gradient(#b6d5d1,#709f9a); transition:height .8s cubic-bezier(.2,.75,.2,1); box-shadow:inset 0 7px 12px rgba(255,255,255,.2); }
.measure-line { position:absolute; right:8px; width:24px; border-top:1px solid rgba(80,91,88,.68); }
.l1{bottom:24%}.l2{bottom:42%}.l3{bottom:60%}.l4{bottom:78%}
.glass-shine { position:absolute; left:10px; top:8px; width:9px; height:86px; border-radius:50%; background:rgba(255,255,255,.48); filter:blur(1px); }
.vessel-shadow { position:absolute; bottom:-5px; width:102px; height:14px; border-radius:50%; background:rgba(32,38,36,.13); filter:blur(5px); }

.scale-scene { position:relative; width:210px; height:126px; }
.scale-beam { position:absolute; left:34px; top:25px; width:142px; height:8px; border-radius:6px; background:linear-gradient(#d7bd7d,#8d6b30); transform:rotate(0deg); transition:transform .75s cubic-bezier(.2,.8,.2,1); box-shadow:0 4px 8px rgba(71,49,14,.2); }
.scale-beam span { position:absolute; left:68px; top:-7px; width:8px; height:20px; border-radius:5px; background:#46351d; }
.scale-post { position:absolute; left:101px; top:36px; width:8px; height:67px; border-radius:4px; background:linear-gradient(90deg,#8c6d37,#d7bb75,#705328); }
.scale-base { position:absolute; left:65px; bottom:7px; width:80px; height:12px; border-radius:50%; background:linear-gradient(#c9a75f,#735526); box-shadow:0 7px 12px rgba(63,45,18,.2); }
.scale-pan { position:absolute; top:56px; width:62px; height:22px; border-radius:0 0 45px 45px; border-bottom:5px solid #b68a3a; transition:transform .75s cubic-bezier(.2,.8,.2,1); }
.pan-left{left:4px}.pan-right{right:4px}
.scale-scene.settle-left .scale-beam{transform:rotate(-5deg)} .scale-scene.settle-left .pan-left{transform:translateY(10px)} .scale-scene.settle-left .pan-right{transform:translateY(-10px)}
.scale-scene.settle-right .scale-beam{transform:rotate(5deg)} .scale-scene.settle-right .pan-left{transform:translateY(-10px)} .scale-scene.settle-right .pan-right{transform:translateY(10px)}

.thermometer-scene { display:flex; align-items:center; gap:18px; height:130px; }
.thermometer { position:relative; width:38px; height:126px; }
.thermo-column { position:absolute; left:13px; top:5px; width:12px; height:94px; overflow:hidden; border:2px solid rgba(130,132,127,.65); border-radius:10px 10px 0 0; background:rgba(255,255,255,.45); }
.thermo-fill { position:absolute; left:2px; right:2px; bottom:0; height:25%; border-radius:6px 6px 0 0; background:linear-gradient(#d89b68,#b84f3c); transition:height .8s cubic-bezier(.2,.8,.2,1); }
.thermo-bulb { position:absolute; bottom:1px; left:4px; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 34% 28%,#e4a681,#b64937 64%,#793326); box-shadow:0 6px 13px rgba(94,38,26,.22); }
.thermo-glint { position:absolute; width:5px; height:20px; left:11px; bottom:7px; border-radius:50%; background:rgba(255,255,255,.35); transform:rotate(30deg); }
.temp-marks { height:88px; display:flex; flex-direction:column; justify-content:space-between; color:var(--muted); font-size:9px; letter-spacing:.12em; }

.clock-face { width:112px; height:112px; position:relative; border-radius:50%; background:radial-gradient(circle at 38% 28%,#fffdf7,#ddd5c8 72%); border:3px solid #a77f38; box-shadow:0 14px 24px rgba(68,50,21,.18), inset 0 0 0 6px rgba(182,138,58,.11); }
.clock-mark { position:absolute; background:#49453f; }
.m12,.m6{width:2px;height:10px;left:52px}.m12{top:8px}.m6{bottom:8px}.m3,.m9{width:10px;height:2px;top:52px}.m3{right:8px}.m9{left:8px}
.clock-hand { position:absolute; left:54px; bottom:54px; width:2px; border-radius:3px; background:#34312d; transform-origin:bottom center; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.hour-hand{height:31px}.minute-hand{height:43px;background:#b68a3a}
.clock-pin{position:absolute;left:49px;top:49px;width:10px;height:10px;border-radius:50%;background:#3c3833;border:2px solid #d4b66f}
.precision-disc { width:100px;height:100px;position:relative;border-radius:50%;background:radial-gradient(circle at 36% 30%,#4b4d4b,#171918 70%);box-shadow:0 13px 24px rgba(0,0,0,.23),inset 0 0 0 5px rgba(182,138,58,.23);transition:transform .75s ease}
.disc-ring{position:absolute;inset:15px;border:1px solid #b68a3a;border-radius:50%;border-style:dashed}.disc-needle{position:absolute;left:49px;top:16px;width:2px;height:35px;background:#d5b05b;transform-origin:bottom;transform:rotate(0deg);transition:transform .75s ease}.disc-center{position:absolute;inset:0;display:grid;place-items:center;color:#e4c578;font-size:18px}

.mic-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.mic-glyph { font-size:19px; line-height:1; transform:rotate(90deg); }
.mic-label { font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.voice-panel {
  position:fixed; z-index:20; left:50%; bottom:24px; transform:translateX(-50%);
  width:min(520px,calc(100% - 28px)); display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:14px;
  padding:15px 16px; border-radius:20px; background:rgba(30,33,31,.96); color:white; box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.voice-panel[hidden] { display:none; }
.voice-panel p{margin:3px 0 0;color:#c5c2ba;font-size:12px}.voice-panel button{border:1px solid #686a66;background:transparent;color:white;border-radius:10px;padding:8px 11px;cursor:pointer}
.voice-orb { width:46px;height:46px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:50%;background:rgba(182,138,58,.16);border:1px solid rgba(182,138,58,.45)}
.voice-orb span { width:3px;height:10px;border-radius:3px;background:#d9b463;animation:voiceWave .7s infinite alternate}
.voice-orb span:nth-child(2){animation-delay:.15s;height:18px}.voice-orb span:nth-child(3){animation-delay:.3s;height:13px}
@keyframes voiceWave{to{transform:scaleY(1.7)}}
@media(max-width:620px){.tape-case-real{width:70px;height:70px;flex-basis:70px}.metric-scale::after,.imperial-scale::after{font-size:8px}.visual-stage{padding:14px}.voice-panel{grid-template-columns:48px 1fr auto}}


/* Version 8 clear controls and quick calculator */
.input-row-with-clear { grid-template-columns: 1fr 68px 58px; }
.clear-button {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-solid);
  color: var(--gold);
  font-size: 12px;
  cursor: pointer;
}
.clear-button:hover { border-color: var(--gold); }
.calculator-card { max-width: 620px; margin: 0 auto; }
.calculator-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.calculator-topline h2 { margin:8px 0 0; font-size:clamp(26px,5vw,38px); font-weight:450; letter-spacing:-.04em; }
.calculator-display {
  min-height: 134px; border-radius: 22px; background: var(--ink); color:#fff; padding:20px 22px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; overflow:hidden;
}
.calculator-expression { color:#bbb9b2; font-size:15px; min-height:24px; overflow-wrap:anywhere; text-align:right; }
.calculator-display strong { font-size:clamp(38px,8vw,64px); font-weight:450; letter-spacing:-.045em; overflow-wrap:anywhere; text-align:right; }
.calculator-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
.calculator-grid button {
  min-height:58px; border:1px solid var(--line); border-radius:17px; background:var(--surface-solid);
  color:var(--ink); font-size:20px; cursor:pointer;
}
.calculator-grid button.operator { color:var(--gold); font-weight:700; }
.calculator-grid button.equals { background:var(--ink); color:#fff; border-color:var(--ink); }
.calculator-actions { display:flex; gap:10px; margin-top:18px; }
body.dark .calculator-display, body.dark .calculator-grid button.equals { background:#eee9df; color:#1e211f; }
body.dark .calculator-expression { color:#6d6b65; }
@media(max-width:620px){
  .input-row-with-clear { grid-template-columns:1fr 56px 52px; gap:7px; }
  .clear-button { font-size:10px; padding:0 5px; }
  .calculator-grid button { min-height:54px; }
}