:root{--accent:#d9b780;--gold:#d9b780;--bg:#111210;--muted:#c0b094}.instrument{max-width:1370px;margin:25px auto;padding:35px 48px 24px;border:1px solid #756045;border-radius:34px;background:radial-gradient(ellipse at 30% 10%,#35332966,transparent 65%),url('./assets/texture.svg'),#151612;box-shadow:inset 0 0 0 4px #070806,inset 0 0 0 6px #504735,0 20px 70px #0008}.instrument-head{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto 35px}.instrument-head>.icon-button{color:var(--gold)}.instrument-brand{text-align:center}.brand-word{font-family:Cinzel,serif;letter-spacing:12px;font-size:67px;margin-left:12px}.brand-sub{letter-spacing:8px;font-family:Cinzel;font-size:11px}.screw{display:block;position:relative;width:21px;height:21px;border-radius:50%;background:linear-gradient(120deg,#e0c38f,#513b24 49%,#1e1b12 51%,#bfa16f 54%,#65502e);border:2px solid #17130d;box-shadow:0 1px 1px #efd1a466,0 2px 6px #000}.screw:after{content:"";position:absolute;width:15px;height:2px;left:1px;top:8px;background:#0d0c08;transform:rotate(44deg);box-shadow:0 1px 1px #e3c892}main{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:start}.instrument-label{display:flex;justify-content:space-between;color:#b6a281;font:9px var(--sans);letter-spacing:2px;margin:5px 20px 23px}.dial-housing{aspect-ratio:1;position:relative;border-radius:50%;background:linear-gradient(135deg,#ead2a4,#4b341e 19%,#b58b54 40%,#302519 65%,#cfab71 88%,#5e4126);padding:10px;box-shadow:0 15px 28px #000c,0 0 0 1px #0b0906,0 0 0 3px #7c6444,0 0 0 5px #151510,inset 0 0 0 2px #f6dfb288}.dial{position:relative;aspect-ratio:1;border-radius:50%;touch-action:none;user-select:none;cursor:grab;background:#11120e;box-shadow:inset 0 0 16px #000}.dial:active{cursor:grabbing}.dial>svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 2px #000)}.dial-labels{position:absolute;inset:0}.engraving{position:absolute;width:105px;left:50%;top:50%;margin-left:-52.5px;margin-top:-36px;height:75px;display:flex;align-items:center;flex-direction:column;justify-content:center;color:#dbcbab;text-shadow:0 2px 1px #000;transition:color .2s}.engraving .icon{width:34px;height:34px;margin-bottom:7px}.engraving span{font-size:25px;line-height:1}.engraving[aria-pressed=true]{color:#231a0e;text-shadow:0 1px 0 #ead1a0}.dial-center{pointer-events:none;position:absolute;left:29%;top:29%;width:42%;height:42%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:repeating-radial-gradient(circle at 37% 29%,transparent 0 1px,#9684670d 1px 2px),conic-gradient(from 25deg,#37352b,#161712,#464336,#191a13,#35362a);border:5px solid #ad8752;box-shadow:0 0 0 2px #181008,0 0 0 4px #e0c292,inset 0 0 0 2px #20190e,inset 0 0 30px #000,0 12px 25px #000c}.dial-center span{font-family:Cinzel,serif;font-size:18px;line-height:1.6;text-align:center;letter-spacing:2px;color:#e0c69b}.dial-center i{width:35px;height:1px;background:#b49766;margin-top:14px}.fixed-pointer{position:absolute;top:5px;left:calc(50% - 10px);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:17px solid #fff0c7;z-index:5;filter:drop-shadow(0 0 7px #fbc780);pointer-events:none}.dial-control-row{display:flex;align-items:center;justify-content:space-between;padding:20px 10px 5px;color:#c6b28e}.dial-control-row p{text-align:center;font-size:17px;line-height:1.15;margin:0}.dial-control-row small{font-size:12px;color:#aea087}.dial-control-row .icon-button{border:1px solid #605138;border-radius:50%}.bank-switch{display:flex;justify-content:center;margin:12px 0;gap:0}.bank-switch button{font:11px var(--sans);border:1px solid #675339;padding:13px 22px;min-height:44px;text-transform:uppercase;letter-spacing:1px;color:#bfb098}.bank-switch button[aria-pressed=true]{background:linear-gradient(#d1b181,#99764a);color:#19170f;box-shadow:inset 0 1px 1px #ffe0b0}.output-section{padding-top:12px}.output-panel{border:1px solid #7f725b;box-shadow:inset 0 0 0 3px #080a06,inset 0 0 0 4px #4b4538,0 12px 24px #0007;background:url('./assets/texture.svg'),radial-gradient(at 20% 0,#333129,#11130e 80%);position:relative;border-radius:19px;text-align:center;padding:39px 32px 30px}.output-panel .screw{position:absolute}.tl{top:12px;left:12px}.tr{top:12px;right:12px}.bl{bottom:12px;left:12px}.br{bottom:12px;right:12px}.output-panel .eyebrow{font-size:9px;color:#bfa982;margin-bottom:20px}#output h1{font-size:51px;line-height:1.04;letter-spacing:-1px;margin-bottom:17px}#output p{font-size:25px;line-height:1.2;color:#c9b99c;min-height:60px}#output .primary{width:100%;border-radius:50px;min-height:67px;font-size:30px;margin:14px 0 26px;background:repeating-linear-gradient(0deg,transparent 0 1px,#fff2 1px 2px),linear-gradient(110deg,#9c7947,#e8cba0 48%,#b49160);border:2px solid #eccb98;box-shadow:0 0 0 2px #604527,0 7px 16px #0008,inset 0 0 0 2px #8f6c43}.instrument-facts{border-top:1px solid #736040;display:flex;justify-content:center;padding:24px 0 0;font-size:15px;line-height:1.2;color:#c8b18c}.instrument-facts>span{flex:1;display:flex;align-items:center;gap:8px;justify-content:center}.instrument-facts>span+span{border-left:1px solid #665132}.instrument-facts .icon{width:23px;height:23px}.alternatives-panel{margin-top:28px;padding-inline:4px}.alternatives-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;color:#b9a47f;margin-bottom:9px}.alternatives-heading .eyebrow{font-size:8px}.alternatives-heading>span:last-child{font:11px var(--sans)}.frequency-option{display:flex;align-items:center;gap:15px;padding:16px 5px;border-top:1px solid #665234;width:100%;text-align:left}.frequency-option>span{flex:1}.frequency-option small{display:block;font:10px var(--sans);letter-spacing:1px;color:#bcae93;margin-bottom:4px}.frequency-option strong{font-size:23px;font-weight:500;line-height:1.1}.frequency-option .icon{width:19px;color:#c8ac7c}.serial-plate{font:8px var(--sans);letter-spacing:1.7px;text-align:center;color:#9d927c;border:1px solid #514530;margin:25px auto 0;padding:8px 10px;width:fit-content}.instrument-nav{display:flex;justify-content:center;gap:55px;border-top:1px solid #564b38;padding-top:20px;margin-top:30px}.instrument-nav button{display:flex;align-items:center;gap:9px;font:12px var(--sans);color:#c9b693;min-height:44px}.instrument-nav .icon{width:19px}.first-entry .dial-housing{animation:assemble 1s cubic-bezier(.1,.8,.2,1)}@keyframes assemble{from{transform:scale(.92) rotate(-25deg);opacity:.2}to{transform:none;opacity:1}}
.dial-housing{touch-action:none}.dial-labels{pointer-events:none}.engraving{pointer-events:auto;touch-action:none}
@media(max-width:1000px){.instrument{margin:15px;padding:30px}main{gap:30px}.engraving span{font-size:20px}.engraving .icon{width:28px;height:28px}.dial-center span{font-size:14px}#output h1{font-size:41px}.output-panel{padding:35px 22px 28px}}
@media(max-width:760px){.instrument{max-width:570px;border-radius:27px;margin:12px auto;padding:26px 20px 17px}main{display:block}.instrument-head{margin-bottom:26px}.brand-word{font-size:53px;letter-spacing:10px}.brand-sub{font-size:9px}.instrument-head>.screw{margin-left:10px}.instrument-label{font-size:7px;margin-bottom:21px;letter-spacing:1.5px}.dial-housing{margin:0 4px}.dial-center span{font-size:clamp(12px,3.7vw,18px);letter-spacing:1.5px}.engraving{width:84px;margin-left:-42px;margin-top:-32px;height:65px}.engraving span{font-size:23px}.engraving .icon{width:29px;height:29px;margin-bottom:7px}.dial-control-row{padding-top:21px}.bank-switch{margin:15px 0 23px}.output-section{padding-top:0}.output-panel{padding:35px 26px 28px}#output h1{font-size:41px;line-height:1.02}#output p{font-size:22px;min-height:0}#output .primary{font-size:29px;min-height:59px;margin-bottom:23px}.instrument-facts{font-size:13px;padding-top:19px}.instrument-facts .icon{width:20px}.instrument-nav{gap:18px;flex-wrap:wrap;margin-top:24px}.instrument-nav button{font-size:10px;gap:6px}.alternatives-panel{margin-top:24px}.serial-plate{font-size:7px}.output-panel .eyebrow{font-size:8px}.instrument-nav .icon{width:17px}}
@media(max-width:400px){.instrument{margin:7px;padding:24px 14px 16px}.engraving span{font-size:20px}.engraving .icon{width:25px;height:25px}.output-panel{padding-inline:22px}.instrument-facts>span{gap:4px}.instrument-facts{font-size:12px}}
.instrument{overflow:clip}