:root{--paper:#faf5e9;--paper-deep:#f0e8d3;--ink:#3d2f10;--ink-soft:#6b5a33;--gold:#a97f24;--gold-bright:#d9b23e;--gold-dark:#6f5114;--bg:#c3ccd3;font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:radial-gradient(120% 90% at 50% 0%, #d3dbe1 0%, var(--bg) 55%, #aab5be 100%) fixed;color:var(--ink);min-height:100%;margin:0;padding:0}#app{max-width:480px;min-height:100dvh;padding:max(env(safe-area-inset-top), 8px) 8px calc(env(safe-area-inset-bottom) + 16px);flex-direction:column;align-items:stretch;gap:14px;margin:0 auto;display:flex}header.masthead{order:1}#controls{order:2}.dial-group{flex-direction:column;order:3;align-items:stretch;gap:8px;margin-top:auto;margin-bottom:auto;display:flex}header.masthead{text-align:center;padding:6px 0 0}header.masthead h1{font-variant:small-caps;letter-spacing:.14em;color:#4a3b18;text-shadow:0 1px #fff9;margin:0;font-size:19px;font-weight:600}header.masthead .rule{background:radial-gradient(circle at center, var(--gold) 0 1.6px, transparent 2px) center / 7px 7px no-repeat, linear-gradient(var(--gold), var(--gold)) left center / 56px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) right center / 56px 1px no-repeat;width:140px;height:7px;margin:6px auto 0}.watch-wrap{aspect-ratio:1;perspective:1000px;width:100%;position:relative}.cover{cursor:pointer;touch-action:manipulation;transform-origin:50% 91%;border-radius:50%;outline:none;width:100%;height:100%;transition:transform .9s cubic-bezier(.3,.75,.25,1),opacity .4s ease-in .45s;display:block;position:absolute;inset:0}.cover:focus-visible{box-shadow:0 0 0 3px #a97f248c}.cover.open{opacity:0;pointer-events:none;transform:rotateX(-108deg)}@media (prefers-reduced-motion:reduce){.cover{transition:opacity .4s}.cover.open{transform:none}}#gauge{touch-action:none;border-radius:50%;outline:none;width:100%;height:100%;display:block}#gauge:focus-visible{box-shadow:0 0 0 3px #a97f248c}button{font:inherit;color:var(--ink);cursor:pointer}.hint{text-align:center;color:var(--ink-soft);margin:0;font-size:13px;font-style:italic}.mic-error{text-align:center;color:#7c2d12;font-size:13px;font-style:italic}.plaque{background:linear-gradient(#fdf9ef, var(--paper) 40%, var(--paper-deep));outline-offset:3px;border:1px solid #967428bf;border-radius:10px;outline:1px solid #9674284d;padding:12px 14px 14px;box-shadow:inset 0 1px #ffffffb3,0 3px 10px #322d372e}.plaque h2{font-variant:small-caps;letter-spacing:.18em;text-align:center;color:var(--ink-soft);margin:0 0 10px;font-size:13px;font-weight:600}.plaque h2:before,.plaque h2:after{content:" ❦";color:var(--gold);vertical-align:1px;font-size:10px}.chips{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip{color:var(--ink);background:linear-gradient(#fffdf6,#f3ead2);border:1px solid #6f5114a6;border-radius:999px;flex-direction:column;align-items:center;padding:5px 11px;font-size:13px;line-height:1.25;display:inline-flex;box-shadow:0 1px 2px #3c2a0826}.chip.active{border-color:var(--gold-dark);background:linear-gradient(#f4e2a0,#d9b23e 60%,#c09231);box-shadow:inset 0 1px #fffadccc,0 1px 3px #3c2a084d}.note-grid{grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px;display:grid}.chip.note{border-radius:8px;width:100%;padding:7px 0;font-size:15px}.tone-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.tone-toggle{font-variant:small-caps;letter-spacing:.08em;border:1.5px solid var(--gold-dark);background:linear-gradient(#fbf3d9,#e4c96e);border-radius:999px;flex:1;min-width:130px;padding:10px 16px;font-size:15px;box-shadow:0 1px 3px #3c2a0840}.tone-toggle.playing{background:linear-gradient(#f4e2a0,#cfa031);box-shadow:inset 0 1px 4px #3c2a0859}footer.colophon{text-align:center;color:#3d2f108c;padding-top:4px;font-size:11px;font-style:italic}