:root{--gold:#d8b77d;--muted:#a9987b;--paper:#e5d5ad;--ink:#241d16}*{box-sizing:border-box}html{background:#171310}body{margin:0;color:#e9dcc3;font:15px/1.45 system-ui,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 50% -10%,#4b3626,#211a15 60%,#15110f);min-height:100dvh}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #f3d69e;outline-offset:3px}.topbar{max-width:1440px;margin:auto;display:flex;align-items:center;gap:22px;justify-content:space-between;padding:15px 24px;border-bottom:1px solid #66503a}.brand{display:flex;gap:12px;align-items:center;white-space:nowrap}.brandmark{font-size:30px;color:var(--gold)}.brand b{font-family:Georgia,serif;letter-spacing:2px;font-size:21px}.brand b span{color:var(--gold)}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#a99b82}.tabs{display:flex;background:#181713;border:1px solid #7c6143;border-radius:8px;padding:4px;gap:4px}.tab{border:0;border-radius:5px;background:transparent;color:#c5b393;padding:11px 24px;letter-spacing:2px;font-weight:700}.tab.active{background:linear-gradient(#a78654,#665032);color:#fff0c8;box-shadow:inset 0 1px #d5b47d}.version{color:#9c896c;font-size:11px;letter-spacing:1.5px}.swipehint{text-align:center;color:#9b8b73;font-size:11px;padding:10px 8px}.swipehint span{margin-left:10px;color:var(--gold)}main{max-width:1440px;margin:auto;padding:6px 24px 26px}.page{display:none}.page.active{display:block}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:24px;align-items:start}.machine-wrap{padding:10px;background:linear-gradient(100deg,#412817,#9d6b3a 5%,#4b2d19 10%,#2a190f 90%,#8c5a2d 96%,#392215);border:2px solid #a07141;border-radius:15px;box-shadow:0 22px 50px #0009,inset 0 0 0 3px #24160e,inset 0 0 0 7px #9b6d3d}.machine{border:2px solid #9e8258;border-radius:9px;background:radial-gradient(ellipse at 50% 5%,#3b3a34,#242522 50%,#171a19 100%);box-shadow:inset 0 0 32px #000b;position:relative;padding:14px 20px 10px;overflow:hidden}.machine:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:repeating-linear-gradient(30deg,transparent 0 3px,#ffffff09 3px 4px)}.hinge{height:7px;margin:-13px 20% 13px;background:linear-gradient(90deg,#2d251b,#c3a06a,#30291e);border-radius:0 0 6px 6px}.machine-label{text-align:center;display:flex;justify-content:center;align-items:center;gap:16px;color:#c5a775;letter-spacing:2px;font-family:Georgia,serif}.machine-label strong{font-size:21px;border:1px solid #8d704a;padding:3px 16px;background:#161916;box-shadow:0 1px 2px #000}.machine-label span{font-size:10px}.rotor-deck{background:linear-gradient(#30302c,#191c1b);border:2px solid #655b4a;border-radius:6px;margin:14px auto 16px;max-width:570px;padding:10px 14px;box-shadow:inset 0 0 18px #0008,0 3px 4px #0007}.rotor-topline,.rotor-bottomline{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b5a07e;font-size:10px;letter-spacing:1.4px}.rotor-bottomline{margin-top:7px;letter-spacing:0}.brass-btn{color:#dfc398;background:#322b22;border:1px solid #806b4d;border-radius:4px;padding:5px 8px}.tiny{font-size:10px}.rotor-controls{display:flex;gap:12px;justify-content:center;margin:12px auto}.rotor{width:100px;text-align:center;position:relative}.rotor small{display:block;font-size:11px;color:#d4ba89;letter-spacing:2px;margin-bottom:5px}.rotor-window{height:75px;border:4px ridge #ac8b5e;background:linear-gradient(90deg,#0d0d0d,#4e493b 15%,#d8c49b 35%,#e6d7b3 60%,#554e3d 90%,#111);box-shadow:inset 0 0 13px #0009,0 2px 3px #000;border-radius:18px;display:flex;align-items:center;justify-content:center;position:relative;touch-action:pan-x;user-select:none;cursor:ns-resize}.rotor-window:before,.rotor-window:after{content:'▲';position:absolute;font-size:10px;color:#393024;top:2px}.rotor-window:after{content:'▼';top:auto;bottom:2px}.rotor-letter{font:bold 38px Georgia,serif;color:#242018;text-shadow:0 1px #fff8}.rotor-buttons{display:flex;gap:5px;justify-content:center;margin-top:5px}.rotor-buttons button{width:39px;height:25px;border:1px solid #766344;background:#302b23;color:#e8cf9b;border-radius:4px}.panel-label{color:#9f9075;font-size:10px;text-align:center;letter-spacing:2px;margin:12px 0 9px}.lampboard,.keyboard{display:flex;flex-direction:column;gap:9px;align-items:center}.letter-row{display:flex;justify-content:center;gap:clamp(3px,1vw,12px);width:100%}.lamp,.keycap{flex:0 1 47px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-weight:bold;font-size:clamp(12px,1.5vw,19px);min-width:0;user-select:none}.lamp{border:3px solid #625846;background:radial-gradient(circle,#39342a 40%,#161614 75%);color:#ad9a7d;box-shadow:inset 0 3px 7px #000b,0 1px 1px #c4a46c44;transition:background .1s,box-shadow .1s}.lamp.lit{color:#37210a;background:radial-gradient(circle,#fff9b5,#ffd269 55%,#bc7021 90%);box-shadow:0 0 22px #ffc35099,inset 0 0 7px #fff8}.machine-seam{border-top:3px ridge #615540;margin:18px -8px 6px}.keycap{border:3px ridge #a8916d;color:#eee2ca;background:radial-gradient(circle at 45% 33%,#4a4943,#121413 75%);box-shadow:0 5px 0 #100f0e,0 6px 3px #0009;touch-action:manipulation}.keycap:active,.keycap.pressed{transform:translateY(4px);box-shadow:0 1px 0 #000}.bottom-lip{display:flex;justify-content:space-between;align-items:center;color:#a88a5e;font-size:9px;letter-spacing:2px;margin-top:20px;padding-top:7px;border-top:2px ridge #6e5a3d}.desk{background:linear-gradient(135deg,#30271e,#211d18);border:1px solid #69513b;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0005}.desk-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:#d8bd8b;letter-spacing:2px;font-weight:700;font-size:14px;margin-bottom:16px}.desk-title small{font-size:10px;color:#aa9980;letter-spacing:0}.paper{background:linear-gradient(100deg,#d0bd94,#f0e2bf 7%,#e5d3aa 90%,#c8b18b);border-radius:3px;padding:16px;color:#2c241b;box-shadow:inset 0 0 12px #866f4444,0 6px 15px #0006;position:relative}.paper:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 25px,#795c2d 26px)}.paper-label{font-size:10px;letter-spacing:1.4px;color:#715a39;font-weight:700;position:relative}.paper textarea,.paper .output{position:relative;width:100%;border:0;background:transparent;color:#262018;resize:vertical;min-height:62px;outline:0;font:600 18px/1.5 'Courier New',monospace;letter-spacing:2px;overflow-wrap:anywhere}.paper textarea::placeholder{color:#8e7c5f;font-size:13px;letter-spacing:0}.paper-rule{border-top:1px dashed #a38b61;margin:8px 0 12px}.output{white-space:pre-wrap}.statusline{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1px;color:#9b9c7d;margin:10px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions button,.outline{background:#393025;color:#e7d2ad;border:1px solid #846947;border-radius:5px;padding:11px 12px;font-size:11px;letter-spacing:.7px;font-weight:700}.actions .primary{background:linear-gradient(#b29361,#78572d);border-color:#c3a477;color:#20170f;flex:1}.note{color:#b5a58d;border-top:1px solid #5c4936;margin-top:18px;padding-top:13px;font-size:12px}.note b{color:#d5bc91}.note p{margin:6px 0 10px}.outline{width:100%;margin-top:5px;background:transparent}.morse-machine{background:radial-gradient(ellipse at 50% 0,#5e4227,#2d2118 60%,#201913);min-height:650px}.morse-plate{text-align:center;border:2px solid #c39a55;background:linear-gradient(110deg,#9b713b,#e5c48a 38%,#8a632e);padding:9px;color:#302319;box-shadow:0 5px 8px #0007;display:flex;flex-direction:column;gap:3px;font-family:Georgia,serif}.morse-plate strong{font-size:20px;letter-spacing:2px}.morse-plate small{font-size:9px;letter-spacing:3px}.morse-gauges{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 10px}.gauge{border:3px ridge #b78d50;border-radius:8px;background:radial-gradient(#2c2a21,#121310);min-height:115px;text-align:center;padding:8px;color:#d9bd8c;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.gauge>span{font-size:10px;letter-spacing:2px}.signal-lamp{height:47px;width:47px;border-radius:50%;border:5px ridge #a78b5c;background:radial-gradient(#4b452a,#28271f);box-shadow:inset 0 0 8px #000}.signal-lamp.on{background:radial-gradient(#fff9c7,#ffc64c 60%,#9d581b);box-shadow:0 0 28px #ffcb59aa}.gauge small{font-size:9px}.gauge-number{font:bold 32px Georgia,serif}.gauge-number small{font-size:11px}.gauge input{width:90%;accent-color:#c9a367}.key-stage{background:linear-gradient(145deg,#4b2c19,#85522b 50%,#3b2517);border:4px ridge #98643b;border-radius:15px;margin:14px 2px;padding:15px 12px 8px;box-shadow:inset 0 0 18px #0007}.key-caption{text-align:center;color:#d8bd8c;font-size:10px;letter-spacing:1.5px}.telegraph-key{height:205px;width:100%;position:relative;border:0;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.key-base{position:absolute;left:7%;right:7%;bottom:12px;height:33px;border:4px ridge #bb8c4d;border-radius:15px;background:linear-gradient(#4c3523,#23190f);box-shadow:0 8px 12px #0009}.key-arm{position:absolute;left:23%;right:17%;top:73px;height:15px;border:2px solid #dfb774;border-radius:9px;background:linear-gradient(#f0d28b,#9e6a30,#e3bb69);transform:rotate(-11deg);transform-origin:15% 50%;transition:transform .055s;box-shadow:0 7px 9px #0008}.key-knob{position:absolute;z-index:2;right:9%;top:22px;width:78px;height:55px;border-radius:50%;background:radial-gradient(ellipse at 30% 20%,#666052,#0e0e0d 68%);border:5px solid #c99d56;box-shadow:0 8px 9px #000a;transition:transform .055s}.key-pivot{position:absolute;z-index:2;left:19%;top:65px;height:36px;width:36px;border-radius:50%;background:radial-gradient(circle,#f3d69b,#9a6930 65%,#332114);border:4px ridge #d1a35d}.key-contact{position:absolute;right:16%;bottom:37px;width:65px;height:17px;border:3px ridge #e4bd75;border-radius:7px;background:#a36d35}.telegraph-key.down .key-arm{transform:rotate(0deg)}.telegraph-key.down .key-knob{transform:translateY(25px)}.key-instruction{text-align:center;color:#e0c79a;font-size:11px}.tape-reel{background:#28221a;border:2px solid #80623b;border-radius:7px;padding:10px;margin:20px 3px 5px}.tape-header{display:flex;align-items:center;justify-content:space-between;color:#d4b984;font-size:10px;letter-spacing:1px}.morse-tape{margin-top:8px;background:#e4d1a6;color:#2b241c;min-height:62px;padding:14px 10px;font:700 18px/1.5 'Courier New',monospace;overflow-wrap:anywhere;box-shadow:inset 0 0 9px #9b7e53}.field-label{display:block;color:#c8ae80;font-size:11px;letter-spacing:1px;margin:10px 0 7px}select,.settings-grid input,#plugboard{background:#1f1e1a;color:#e5d2ae;border:1px solid #806849;border-radius:5px;padding:10px;width:100%}.morse-output{font-size:15px!important;letter-spacing:1px!important}footer{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1440px;margin:auto;padding:16px 24px 24px;border-top:1px solid #5a4633;color:#8e7b61;font-size:10px;letter-spacing:1px}.dots{display:flex;gap:8px}.dot{border:1px solid #ae9160;width:9px;height:9px;border-radius:50%;background:#4d3b2b;padding:0}.dot.active{width:24px;border-radius:10px;background:#d8b77d}dialog{background:#28221b;color:#e8d5b3;border:2px solid #a88756;border-radius:12px;max-width:min(94vw,560px);max-height:90vh;overflow:auto;padding:22px;box-shadow:0 20px 80px #000c}dialog::backdrop{background:#000a}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.modal-header h2{font:20px Georgia,serif;color:#d6b77f}.modal-header button{background:transparent;color:#e5c894;border:0;font-size:20px}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.settings-grid label{font-size:11px;color:#d0b486}.settings-grid select,.settings-grid input{display:block;margin-top:5px}.error{color:#f0a18a;font-size:12px}#photo-dialog img{max-height:65vh;max-width:100%;display:block;margin:auto}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 18px;background:#e4d0a2;color:#261e15;border-radius:7px;box-shadow:0 8px 20px #0009;display:none;z-index:5}
@media(max-width:950px){.workspace{grid-template-columns:1fr}.desk{max-width:none}.machine-wrap{max-width:760px;margin:auto;width:100%}.topbar{flex-wrap:wrap}.version{display:none}.tabs{margin-left:auto}}
@media(max-width:560px){.topbar{padding:10px 10px;gap:10px}.brand b{font-size:16px}.brand small{font-size:7px;letter-spacing:1px}.brandmark{font-size:23px}.tabs{width:100%;justify-content:center}.tab{flex:1;padding:9px 6px;font-size:12px}.swipehint{font-size:10px}main{padding:2px 5px 18px}.workspace{gap:10px}.machine-wrap{padding:6px;border-radius:10px}.machine{padding:9px 8px 7px}.machine-label{gap:6px}.machine-label span{font-size:7px}.machine-label strong{font-size:14px;padding:4px 9px}.rotor-deck{padding:7px 6px;margin:10px auto}.rotor{width:75px}.rotor-controls{gap:9px;margin:7px auto}.rotor-window{height:60px}.rotor-letter{font-size:31px}.rotor-bottomline{font-size:8px}.rotor-topline{font-size:9px}.rotor-topline button,.rotor-bottomline button{font-size:8px}.letter-row{gap:3px}.lampboard,.keyboard{gap:8px}.lamp,.keycap{flex:0 1 37px;font-size:clamp(11px,3.1vw,15px);border-width:2px}.panel-label{font-size:9px;margin:9px 0 6px}.machine-seam{margin:13px -4px 5px}.bottom-lip{margin-top:14px}.desk{padding:13px}.desk-title{font-size:12px}.desk-title small{font-size:9px}.paper{padding:12px}.morse-machine{min-height:0}.morse-gauges{margin:12px 3px;gap:8px}.key-stage{margin:8px 0;padding:10px 6px}.telegraph-key{height:180px}.key-knob{right:7%}.tape-reel{margin-top:10px}footer{padding:12px;font-size:8px}footer span:last-child{display:none}}
@media(max-width:360px){.lamp,.keycap{flex-basis:31px}.letter-row{gap:2px}.rotor{width:69px}.rotor-controls{gap:5px}.machine-label span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* V0.2 responsive full-height workshop + instrument finish */
html,body{height:100%;}body{min-height:100dvh;overflow-x:hidden}.topbar{max-width:none;padding:9px 20px}.header-tools{display:flex;align-items:center;gap:12px}.language-label{font-size:10px;letter-spacing:1px;color:#c8ad80}.language-label select{width:auto;padding:7px;font-size:12px;margin-left:5px}.header-tools>button{background:#2b241b;border:1px solid #866944;color:#ebd4a8;border-radius:5px;font-size:21px;padding:2px 10px}.brand b{font-size:19px}main{max-width:none;padding:4px 14px 8px}.workspace{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:12px;align-items:stretch}.machine-wrap{padding:7px}.machine{padding:8px 13px 6px}.machine-label strong{font-size:17px}.rotor-deck{margin:8px auto 9px;padding:7px 12px}.rotor-controls{margin:5px auto;gap:9px}.rotor-window{height:56px}.rotor-letter{font-size:30px}.panel-label{margin:6px 0 4px}.lampboard,.keyboard{gap:5px}.lamp,.keycap{flex-basis:min(4.5vh,43px);font-size:clamp(12px,1.35vw,17px)}.machine-seam{margin:9px -5px 3px}.bottom-lip{margin-top:8px}.desk{padding:13px;overflow:auto;max-height:calc(100dvh - 125px)}.desk-title{margin-bottom:9px}.paper{padding:11px}.paper textarea,.paper .output{min-height:42px;font-size:15px}.note{margin-top:9px;padding-top:8px}.note p{margin:4px 0}.actions{margin-top:7px}.actions button{padding:8px}.swipehint{padding:3px}.morse-machine{min-height:0}.morse-gauges{margin:10px 6px}.gauge{min-height:80px}.signal-lamp{height:32px;width:32px}.key-stage{margin:8px 2px;padding:7px}.telegraph-key{height:160px}.tape-reel{margin:9px 3px 3px}.morse-tape{min-height:45px;padding:7px}.mode-line{display:flex;gap:10px;justify-content:space-between;margin:6px 0}.mode-line label{font-size:9px;font-weight:700;flex:1;color:#624d2c}.mode-line select{font-size:11px;padding:5px;color:#33251a;background:#e4d2aa;border:1px solid #b8a077;margin-top:3px}.plugboard-visual{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;background:linear-gradient(125deg,#171717,#383832,#121313);border:3px ridge #8a7858;border-radius:8px;padding:12px;margin:8px 0}.plug-socket{border:3px ridge #a99a79;border-radius:50%;aspect-ratio:1;background:radial-gradient(circle,#0a0b0b 0 30%,#35322b 34%,#151515 62%);color:#d3c49f;min-width:0;padding:0;font:700 12px Georgia,serif}.plug-socket.connected{border-color:#c79753;color:#f1d596;box-shadow:0 0 7px #df9c4c99}.plug-socket.selected{background:#9d7339;color:#1e1711}.microhelp{font-size:11px;color:#bda783}footer{max-width:none;padding:6px 20px}.keycap{background:radial-gradient(circle at 35% 24%,#74736c,#1a1a19 65%,#090909 85%);border:3px solid #a69b87;box-shadow:0 3px 0 #0a0a09,0 5px 5px #000a,inset 0 0 0 2px #2d2b26}.lamp{background:radial-gradient(circle at 45% 50%,#3b382c,#141515 65%);border:3px solid #857b64;box-shadow:inset 0 0 0 2px #161615,inset 0 3px 8px #000}.machine{background:radial-gradient(ellipse at 50% 0%,#43453f,#202321 58%,#111513 100%)}
@media(min-width:951px) and (max-height:790px){.topbar{padding:5px 16px}.swipehint{display:none}.machine{padding:5px 10px}.rotor-window{height:45px}.rotor-letter{font-size:25px}.lamp,.keycap{flex-basis:min(4.3vh,34px)}.rotor-deck{margin:4px auto}.desk{max-height:calc(100dvh - 83px)}.morse-gauges{margin:5px}.telegraph-key{height:125px}.key-knob{top:6px}.key-arm{top:48px}.key-pivot{top:43px}.morse-tape{min-height:34px}}
@media(max-width:950px){.desk{max-height:none}.workspace{grid-template-columns:1fr}.machine-wrap{max-width:780px}.lamp,.keycap{flex-basis:clamp(25px,4.2vw,42px)}}
@media(max-width:950px) and (orientation:landscape){.workspace{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}.machine-wrap{width:100%}.desk{max-height:calc(100dvh - 110px)}.lamp,.keycap{flex-basis:min(5vh,34px)}.rotor-window{height:40px}.rotor-letter{font-size:23px}.rotor-buttons{display:none}.panel-label{margin:3px}.machine-seam{margin:5px}.topbar{padding:5px 12px}.swipehint{display:none}.telegraph-key{height:120px}.morse-gauges{margin:5px}}
@media(max-width:560px){.topbar{padding:8px}.brand b{font-size:14px}.header-tools{width:100%;justify-content:space-between}.tabs{order:3}.language-label select{padding:5px}.machine{padding:8px}.lamp,.keycap{flex-basis:clamp(26px,8vw,36px)}.desk{padding:12px}.plugboard-visual{gap:3px;padding:5px}.plug-socket{font-size:10px;border-width:2px}}
@media(max-width:760px) and (orientation:landscape){.topbar{flex-wrap:nowrap}.brand small{display:none}.header-tools .version{display:none}.tabs{width:auto;order:initial}.tab{font-size:10px;padding:5px}.language-label{font-size:0}.workspace{grid-template-columns:minmax(0,1fr) minmax(240px,.8fr)}.machine-label span,.bottom-lip{display:none}.rotor-bottomline{display:none}.rotor-deck{padding:3px}.rotor-window{height:35px}.rotor-controls{margin:2px}.lamp,.keycap{flex-basis:min(6vh,26px)}.lampboard,.keyboard{gap:2px}.panel-label{font-size:7px}.desk{max-height:calc(100dvh - 65px)}footer{display:none}}

/* V0.3 photo-layer interactive visual preview; desktop/tablet first */
:root{--gold:#dfb56e}html,body{background:#160e0a}body{background:linear-gradient(145deg,#382013,#120e0b)}
.topbar{background:linear-gradient(90deg,#3b2114,#20140e);border-bottom:2px solid #9d713b}.brand b{font-family:Georgia,serif;font-size:clamp(17px,1.65vw,28px)}
main{height:calc(100dvh - 108px);min-height:0;padding:8px 12px}.page.active{height:100%}.workspace{height:100%;min-height:0;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);gap:14px;align-items:stretch}
.machine-wrap{height:100%;min-height:0;padding:0;border:0;border-radius:9px;box-shadow:0 6px 30px #000b;background:#28190f;overflow:hidden;display:flex;align-items:center;justify-content:center}
#page-enigma .machine{width:min(100%,calc((100dvh - 120px)*.743));height:min(100%,calc((100vw - 430px)*1.347));max-width:100%;aspect-ratio:595/801;min-height:0;flex:none;border:0;border-radius:0;padding:0;box-shadow:none;background:#241911 url('assets/enigma-photo.webp') center/100% 100% no-repeat;overflow:hidden}
#page-enigma .machine:before{display:none}
#page-enigma .hinge,#page-enigma .machine-label,#page-enigma .panel-label,#page-enigma .machine-seam,#page-enigma .bottom-lip{display:none}
#page-enigma .rotor-deck{position:absolute;left:27%;top:9.8%;width:49%;height:19%;padding:0;margin:0;border:0;background:none;box-shadow:none}
#page-enigma .rotor-topline,#page-enigma .rotor-bottomline{position:absolute;right:-28%;top:0;z-index:4}
#page-enigma .rotor-topline span,#page-enigma .rotor-bottomline span{display:none}
#page-enigma .rotor-bottomline{top:auto;bottom:0}
#page-enigma .rotor-controls{display:flex;justify-content:space-around;gap:0;height:100%;margin:0}
#page-enigma .rotor{width:29%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
#page-enigma .rotor small{display:none}
#page-enigma .rotor-window{width:64%;height:46%;border:1px solid #b48c4b;border-radius:12px;background:linear-gradient(90deg,#61452299,#f6d69cdd,#66472199);box-shadow:0 1px 9px #0008;touch-action:none}
#page-enigma .rotor-letter{font:700 clamp(18px,2.3vw,36px) Georgia,serif;color:#20150d}
#page-enigma .rotor-buttons{position:absolute;bottom:1%;display:flex;gap:2px}
#page-enigma .rotor-buttons button{padding:0 5px;font-size:12px;background:#251910dc;color:#edc989}
#page-enigma .lampboard,#page-enigma .keyboard{position:absolute;left:8%;width:84%;display:flex;flex-direction:column;justify-content:space-between;gap:0;margin:0;padding:0;background:none;border:0}
#page-enigma .lampboard{top:34.3%;height:19%}#page-enigma .keyboard{top:59%;height:26%}
#page-enigma .letter-row{height:31%;display:flex;justify-content:space-between;gap:0;margin:0;padding:0}
#page-enigma .letter-row:nth-child(2){padding:0 4.4%}
#page-enigma .lamp,#page-enigma .keycap{flex:0 0 10.2%;height:100%;aspect-ratio:1;border:0;border-radius:50%;font-size:0;color:transparent;background:transparent;box-shadow:none;outline-offset:0}
#page-enigma .lamp.lit{background:radial-gradient(circle,#fff7ba 5%,#ffc044aa 25%,#ffad1922 70%,transparent 72%);box-shadow:0 0 17px 6px #ffb72d88}
#page-enigma .keycap:active{background:#e6b66b44;transform:translateY(2px);box-shadow:0 0 7px #ffcd6688}
#page-enigma .desk{height:100%;max-height:none;overflow:auto;border:2px ridge #8e6336;background:linear-gradient(130deg,#3b281c,#201913);box-shadow:inset 0 0 35px #0009}
#page-enigma .paper{background:linear-gradient(#f2ddb3,#ddbd84);box-shadow:0 3px 12px #0007}.desk-title{font-family:Georgia,serif;color:#eac58a}
#page-enigma .note{font-size:12px}
.swipehint{padding:3px 8px}footer{padding:5px 20px}
@media(min-width:1000px){.topbar{height:62px}.swipehint{height:20px}footer{height:26px}main{height:calc(100dvh - 108px)} }
@media(max-width:999px){main{height:auto;min-height:calc(100dvh - 110px)}.workspace{grid-template-columns:1fr;min-height:0}.machine-wrap{height:min(72dvh,800px)}#page-enigma .machine{height:100%;width:auto}.desk{height:auto!important;max-height:none!important}}
@media(max-width:760px) and (orientation:landscape){.topbar{height:45px;flex-wrap:nowrap}.swipehint,footer{display:none}main{height:calc(100dvh - 48px);min-height:0;padding:2px}.workspace{height:100%;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:5px}.machine-wrap{height:100%}#page-enigma .machine{height:100%;width:auto}.desk{height:100%!important;overflow:auto}.note{display:none}}
@media(max-width:760px) and (orientation:portrait){#page-enigma .machine-wrap{display:none}#page-enigma .desk:before{content:'Rotate your device for the full mechanical Enigma view';display:block;padding:12px;color:#e7c68e;border:1px solid #a17c4a;margin-bottom:12px}}

/* V0.3.1 responsive 3-column desktop and rotor layer correction */
#page-enigma .rotor-window{background:linear-gradient(90deg,#31271e 0%,#8d6c41 10%,#ecd7a3 27%,#f3e1b6 51%,#d1b37d 76%,#503d2b 94%,#221c18 100%);border:3px ridge #c7a36a;box-shadow:inset 0 0 11px #2b1c15,0 2px 5px #000b;isolation:isolate;}
#page-enigma .rotor-window:before,#page-enigma .rotor-window:after{opacity:.55;z-index:2}
#page-enigma .rotor-letter{position:relative;z-index:3;text-shadow:0 1px 0 #fff9,0 -1px 1px #3a2411}
#page-enigma .rotor-window:focus-visible{outline:2px solid #ffda93}
#page-enigma .rotor-window{transition:filter .07s}
#page-enigma .rotor-window:active{filter:brightness(1.15)}
.setup-dock{display:none;min-width:0;min-height:0}
#sound-toggle{font-size:18px;min-width:33px;min-height:32px;color:#e4c18c;background:#2b2119;border:1px solid #876744;border-radius:5px}
.sound-volume-label{display:flex;align-items:center;width:68px}.sound-volume-label input{width:100%;accent-color:#d5ad6b}
@media(min-width:1600px) and (min-height:670px){
 #page-enigma .workspace{grid-template-columns:minmax(0,1.28fr) minmax(300px,.83fr) minmax(350px,1fr);gap:12px}
 #page-enigma .setup-dock{display:block;height:100%;overflow:auto;border:2px ridge #946b40;border-radius:11px;background:linear-gradient(130deg,#33261d,#1c1815);padding:9px}
 #page-enigma #settings-dialog[open]:not(:modal){position:static;display:block;width:100%;max-width:none;max-height:none;margin:0;padding:8px;border:0;box-shadow:none;background:transparent;color:#ead4ac;overflow:visible}
 #page-enigma #settings-dialog .modal-header h2{font-size:17px}
 #page-enigma #settings-dialog .modal-header button,#page-enigma #settings-dialog #cancel-settings{display:none}
 #page-enigma #settings-dialog .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #page-enigma #settings-dialog .settings-grid label{font-size:10px}
 #page-enigma #settings-dialog .settings-grid select,#page-enigma #settings-dialog .settings-grid input{min-width:0;width:100%;padding:6px;font-size:12px}
 #page-enigma #settings-dialog .plugboard-visual{gap:3px;padding:5px}
 #page-enigma #settings-dialog .plug-socket{border-width:2px;font-size:10px}
 #page-enigma #settings-dialog .actions button{padding:8px}
 #page-enigma .desk{min-width:0;padding:12px}
 #page-enigma .desk .actions button{padding:8px 7px}
 #page-enigma .machine{height:100%;width:auto;max-width:100%}
}
@media(min-width:1000px) and (max-width:1599px){#page-enigma .setup-dock{display:none}}
@media(max-width:999px){#page-enigma .setup-dock{display:none}}
@media(max-height:750px) and (min-width:1000px){#page-enigma .desk .note{display:none}#page-enigma .desk{padding:10px}#page-enigma .paper textarea,#page-enigma .paper .output{min-height:40px}}


/* V0.3.2 — single rotor glyph layer, brass console, photographic Morse key */
#page-enigma .machine{background-image:url('assets/enigma-rotor-clean.webp')}
#page-enigma .rotor-deck{left:31.4%;top:13.1%;width:39.1%;height:13.4%;pointer-events:none}
#page-enigma .rotor-controls{justify-content:space-between}
#page-enigma .rotor{width:28%;pointer-events:none}
#page-enigma .rotor-window{width:65%;height:82%;border:0;border-radius:48%/24%;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:ns-resize;overflow:hidden}
#page-enigma .rotor-window:before,#page-enigma .rotor-window:after{display:none!important}
#page-enigma .rotor-letter{font:700 clamp(22px,2.4vw,42px) Georgia,serif;color:#1c130e;text-shadow:0 1px 0 #f9dba8,0 0 1px #30190a}
#page-enigma .rotor-buttons{display:none!important}
#page-enigma .rotor-topline,#page-enigma .rotor-bottomline{pointer-events:none;right:-57%;z-index:7}
#page-enigma .rotor-topline button,#page-enigma .rotor-bottomline button{pointer-events:auto}
#page-enigma .rotor-topline{top:-8%}#page-enigma .rotor-bottomline{bottom:-10%}
#page-enigma .rotor-window:focus-visible{outline:2px solid #ffdc9c;outline-offset:0}
#page-enigma .machine-wrap{background:radial-gradient(ellipse at center,#3d2a19 0%,#23170f 76%)}
#page-enigma .machine{max-height:100%;max-width:100%}
#page-enigma .setup-dock{background:linear-gradient(135deg,#51331f 0%,#251b14 8%,#141717 53%,#3c291b 100%);border:4px ridge #a6804a;box-shadow:inset 0 0 0 2px #24180e,inset 0 0 22px #000b,0 8px 16px #0007}
#page-enigma .setup-dock #settings-dialog[open]:not(:modal){padding:12px 9px;background:transparent}
#page-enigma .setup-dock .modal-header h2{font-family:Georgia,serif;color:#e7be7a;letter-spacing:1px;text-shadow:0 1px 2px #000}
#page-enigma .setup-dock .settings-grid label{color:#e1b981;letter-spacing:.4px}
#page-enigma .setup-dock .settings-grid select,#page-enigma .setup-dock .settings-grid input,#page-enigma .setup-dock #plugboard{background:linear-gradient(#1b1b1a,#292722);border:1px solid #9b784a;color:#f2dcad;border-radius:5px}
#page-enigma .setup-dock .plugboard-visual{background:radial-gradient(ellipse,#34332e,#0e1010);border:3px ridge #b39865;box-shadow:inset 0 4px 15px #000}
#page-enigma .setup-dock .primary{background:linear-gradient(#d9b87c,#85623b);border:1px solid #e6c58a;color:#24160c}
#page-enigma .setup-dock.setup-flash{animation:setup-flash .7s ease-out}
@keyframes setup-flash{0%,40%{box-shadow:0 0 0 3px #f6d187,0 0 26px #ffc45d}100%{box-shadow:inset 0 0 22px #000b}}
#page-morse .machine-wrap{background:radial-gradient(ellipse,#47301d,#20140f 75%)}
#page-morse .morse-machine{width:min(100%,720px);max-width:100%;background:linear-gradient(145deg,#31261b,#111514);border:3px ridge #99764b;box-shadow:inset 0 0 25px #000,0 8px 25px #0009}
#page-morse .key-stage{background:linear-gradient(155deg,#24160e,#41291b);border:2px ridge #b78a53;box-shadow:inset 0 0 22px #0009;padding:6px}
#page-morse .telegraph-key{display:block;position:relative;width:100%;height:auto;aspect-ratio:3/2;background:url('assets/morse-brass-key.webp') center/contain no-repeat;border:0;border-radius:6px;box-shadow:0 2px 14px #000a;touch-action:none;transition:transform .06s ease,filter .06s ease}
#page-morse .telegraph-key span{display:none}
#page-morse .telegraph-key.down{transform:translateY(2px) rotate(-.15deg);filter:brightness(1.12)}
#page-morse .telegraph-key:focus-visible{outline:3px solid #f3c67d}
#page-morse .key-caption{position:relative;z-index:1;color:#e7bd79}
#page-morse .key-instruction{color:#dfc295}
@media(min-width:1000px){#page-morse .machine-wrap{align-items:center}#page-morse .morse-machine{max-height:100%;overflow:auto}}
@media(min-width:1000px) and (max-height:790px){#page-morse .telegraph-key{max-height:38dvh}}
@media(min-width:1000px) and (max-width:1599px){#page-enigma .machine-wrap{justify-content:center}}
@media(max-width:999px){#page-enigma .machine-wrap{background:#291c13}}

/* V0.3.3 mechanical interaction refinement */
#page-enigma .setup-dock{border:9px solid transparent;border-image:linear-gradient(130deg,#3b1e0e,#a46b37,#341b10,#80532a,#261308) 1;background:repeating-linear-gradient(92deg,#3c2416 0px,#432718 8px,#352014 17px,#50301d 23px),#2b1c13;box-shadow:inset 0 0 0 3px #bd9255,inset 0 0 0 9px #1c1b19,0 9px 26px #0009;}
#page-enigma .setup-dock #settings-dialog[open]:not(:modal){background:linear-gradient(135deg,#272824,#121716 70%,#29251e);border:2px ridge #a5854c;border-radius:6px;padding:13px 12px;box-shadow:inset 0 0 16px #000b;}
#page-enigma .setup-dock .modal-header{border-bottom:2px solid #8c6d41;padding-bottom:8px;margin-bottom:9px}
#page-enigma .setup-dock .modal-header h2{background:linear-gradient(#f4d8a3,#aa7d41);color:#2c1c0d;text-shadow:0 1px #ffe1a3;padding:7px 9px;border:2px ridge #c7a26b;font-size:15px!important;letter-spacing:1px}
#page-enigma .setup-dock .settings-grid select,#page-enigma .setup-dock .settings-grid input{background:linear-gradient(#282923,#0f1312);border:2px ridge #8b704c;box-shadow:inset 0 2px 5px #0008}
.legacy-start{display:none!important}
.start-position-guide{font:11px Georgia,serif;letter-spacing:.7px;color:#e2bc7c;padding:9px 6px;margin:9px 0;border-top:1px solid #81603a;border-bottom:1px solid #81603a}
#page-enigma .rotor-deck{pointer-events:auto}
#page-enigma .rotor{pointer-events:auto}
#page-enigma .rotor-window{width:64%;height:85%;position:relative;overflow:visible;touch-action:none}
#page-enigma .rotor-letter{pointer-events:none}
#page-enigma .rotor-wheel{position:absolute;right:-34%;top:12%;width:28%;height:76%;border-radius:3px;background:repeating-linear-gradient(to bottom,#1a1a18 0 3px,#a29b87 3px 6px,#383832 6px 9px,#c2b6a0 9px 11px);border:2px solid #c3a97a;box-shadow:inset 2px 0 4px #fff5,3px 2px 6px #000d;cursor:ns-resize;touch-action:none}
#page-enigma .rotor-wheel:active{filter:brightness(1.4)}
#page-enigma .rotor-window{cursor:ns-resize}
#page-enigma .rotor-window:focus-visible{outline:2px solid #ffdc9c}
#page-enigma .keycap.pressed{background:#e9b86d55!important;box-shadow:0 0 12px #ffcd6688!important;transform:translateY(2px)}
#page-morse .telegraph-key{background:none!important;overflow:hidden;transform:none!important;filter:none!important;box-shadow:none!important;}
#page-morse .telegraph-key .key-fixed-art,#page-morse .telegraph-key .key-moving-art{display:block!important;position:absolute;inset:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;pointer-events:none;}
#page-morse .telegraph-key .key-fixed-art{background-image:url('assets/morse-fixed.webp')}
#page-morse .telegraph-key .key-moving-art{background-image:url('assets/morse-lever.webp');transform-origin:72% 30%;transition:transform .075s ease-out;}
#page-morse .telegraph-key.down .key-moving-art{transform:rotate(1.35deg)}
#page-morse .telegraph-key.down{transform:none!important;filter:none!important}
@media(min-width:1000px) and (max-width:1599px){#page-enigma .machine-wrap{background:radial-gradient(ellipse at center,#4a2e1a,#20140f 80%)}}

/* V0.3.4: tablet modal must be above the entire machine, not clipped by hidden dock. */
#settings-dialog:modal{position:fixed!important;inset:0!important;margin:auto!important;z-index:9999!important;display:block!important;width:min(94vw,600px)!important;max-height:90dvh!important;overflow-y:auto!important;background:linear-gradient(145deg,#382819,#151818)!important;border:8px ridge #9c7545!important;box-shadow:0 20px 80px #000e!important;color:#ead6b3!important;padding:20px!important;}
#settings-dialog::backdrop{background:#080503c9;backdrop-filter:blur(3px)}
#settings-dialog:modal .modal-header button,#settings-dialog:modal #cancel-settings{display:inline-flex!important}
/* Historical machine window: aged steel, inset enamel number ring, serrated wheel. */
#page-enigma .rotor-window{background:linear-gradient(90deg,#161816 0%,#656154 7%,#d3c7a6 16%,#eee2c0 40%,#d5c5a1 68%,#766a50 89%,#181917 100%)!important;border:3px solid #66665e!important;border-radius:45%/22%!important;box-shadow:inset 4px 0 8px #000b,inset -3px 0 6px #0008,0 0 0 3px #17191a,0 1px 3px #000!important;overflow:visible!important;}
#page-enigma .rotor-window .rotor-letter{font-family:Georgia,serif;font-size:clamp(22px,2.4vw,40px);color:#24201a;text-shadow:0 1px #fff7;letter-spacing:-2px}
#page-enigma .rotor-wheel{right:-33%;top:5%;height:90%;width:26%;border-radius:2px;border:1px solid #6f6a59;background:repeating-linear-gradient(to bottom,#22221f 0 2px,#b4ae9e 2px 5px,#484840 5px 8px,#d0c7b1 8px 10px);box-shadow:inset 3px 0 3px #fff5,inset -3px 0 4px #000b,2px 2px 5px #000b}
/* The original photo is static; the rigid overlay rotates as one connected piece around the hinge. */
#page-morse .telegraph-key{background:url('assets/morse-brass-key.webp') center/100% 100% no-repeat!important;}
#page-morse .telegraph-key .key-fixed-art{display:none!important}
#page-morse .rigid-key-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 2px 3px #0008)}
#page-morse .rigid-key-arm{transform-box:view-box;transform-origin:1107px 303px;transition:transform .09s ease-out;transform:rotate(0deg)}
#page-morse .telegraph-key.down .rigid-key-arm{transform:rotate(-2deg)}

/* V0.3.5 — photographic desktop/tablet composition, no synthetic rotor teeth or duplicate key */
:root { --emw-wood:#512a17; }
#page-enigma .machine-wrap {background:linear-gradient(90deg,#2a160e,#714020 2%,#402311 4%,#251710 96%,#794621 98%,#27140b);padding:9px;border:3px ridge #ad8147;box-shadow:inset 0 0 0 3px #24160b,0 8px 28px #0009}
#page-enigma .machine {aspect-ratio:818/694!important;background:#272725 url('assets/enigma-authentic.webp') center/100% 100% no-repeat!important;width:min(100%,calc((100dvh - 125px)*1.179))!important;height:auto!important;max-height:100%!important;border:3px solid #35261a!important;border-radius:5px!important;box-shadow:0 0 0 3px #ab8248,0 0 0 7px #492812!important}
#page-enigma .machine::after {content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 12px 5px #0007;border-radius:4px}
#page-enigma .rotor-deck {left:24.4%!important;top:3%!important;width:30.6%!important;height:21.8%!important;z-index:5;pointer-events:none!important}
#page-enigma .rotor-controls {height:100%!important;gap:0!important;align-items:center!important}
#page-enigma .rotor {width:33.333%!important;height:100%!important;pointer-events:none!important}
#page-enigma .rotor-window {width:48%!important;height:24%!important;min-width:0!important;top:-1%!important;background:linear-gradient(90deg,#a7aaa3,#d3d4c8 30%,#dddcd1 68%,#a8aaa2)!important;border:1px solid #34342e!important;border-radius:2px!important;box-shadow:none!important;overflow:hidden!important;pointer-events:auto!important;touch-action:none}
#page-enigma .rotor-letter {font:bold clamp(13px,1.6vw,25px) Georgia,serif!important;color:#0c0b08!important;text-shadow:none!important}
#page-enigma .rotor-wheel,#page-enigma .rotor-buttons {display:none!important}
#page-enigma .rotor-topline {right:-125%!important;top:30%!important;pointer-events:none!important}
#page-enigma .rotor-bottomline {right:-125%!important;bottom:10%!important;pointer-events:none!important}
#page-enigma .rotor-topline button,#page-enigma .rotor-bottomline button {pointer-events:auto!important;background:#2b221bdc;border-color:#b59055;font-size:clamp(7px,.68vw,11px);padding:5px}
#page-enigma .lampboard,#page-enigma .keyboard {inset:0!important;width:100%!important;height:100%!important;display:block!important;pointer-events:none!important}
#page-enigma .lampboard .letter-row,#page-enigma .keyboard .letter-row {position:static!important;display:contents!important}
#page-enigma .lamp,#page-enigma .keycap {position:absolute!important;display:block!important;transform:translate(-50%,-50%);width:5.2%!important;height:6.4%!important;min-width:0!important;aspect-ratio:auto!important;border:0!important;box-shadow:none!important;background:transparent!important;color:transparent!important;font-size:0!important;pointer-events:none!important;padding:0!important}
#page-enigma .keycap {pointer-events:auto!important;cursor:pointer!important;touch-action:manipulation!important}
#page-enigma .lamp.lit {background:radial-gradient(circle,#ffefac 4%,#ffbc3fbb 28%,#ff9c1240 52%,transparent 75%)!important;box-shadow:0 0 12px 5px #fdb72c88!important}
#page-enigma .keycap.pressed,#page-enigma .keycap:active {background:radial-gradient(circle,#e3cba644,transparent 70%)!important;transform:translate(-50%,-49%) scale(.95)!important}
#page-enigma .setup-dock {background:repeating-linear-gradient(91deg,#442617,#56321d 9px,#382013 18px,#5a3420 25px)!important;border:7px ridge #91663c!important;padding:8px!important}
#page-enigma .setup-dock #settings-dialog[open]:not(:modal) {background:linear-gradient(145deg,#302d27,#101312)!important;border:3px ridge #ae8d5d!important;border-radius:5px!important}
#page-morse .workspace {grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr);gap:14px}
#page-morse .machine-wrap {background:linear-gradient(100deg,#362014,#51301b,#21140e);padding:0;align-items:center;justify-content:center;border:2px ridge #91673d}
#page-morse .morse-machine {width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:5px!important;border:0!important;background:transparent!important;box-shadow:none!important}
#page-morse .morse-plate,#page-morse .morse-machine>.morse-gauges,#page-morse .morse-machine>.tape-reel,#page-morse .morse-machine>.bottom-lip {display:none!important}
#page-morse .key-stage {margin:0!important;padding:0!important;width:100%!important;height:100%!important;max-width:calc((100dvh - 120px)*.75)!important;max-height:100%!important;display:flex;align-items:center;justify-content:center;border:0!important;background:none!important;box-shadow:none!important}
#page-morse .key-caption,#page-morse .key-instruction {display:none!important}
#page-morse .telegraph-key {display:block!important;position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1086/1448!important;max-height:100%!important;background:url('assets/morse-portrait.webp') center/contain no-repeat!important;transform:none!important;filter:none!important;border:0!important;box-shadow:none!important;touch-action:none!important;overflow:hidden!important;user-select:none}
#page-morse .telegraph-key span,#page-morse .rigid-key-overlay {display:none!important}
#page-morse .telegraph-key::after {content:'';position:absolute;left:36%;top:73%;width:28%;height:20%;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(ellipse,#0000 30%,#ffe3a31f 50%,transparent 74%);transition:opacity .055s}
#page-morse .telegraph-key.down::after {opacity:1}
#page-morse .telegraph-key.down {filter:brightness(1.035)!important}
#page-morse .desk {height:100%!important;overflow:auto!important;min-height:0!important;max-height:none!important}
#page-morse .desk-title {flex-wrap:wrap}
#swap-morse {white-space:nowrap;font:700 11px system-ui,sans-serif;letter-spacing:.4px}
#page-morse .desk .morse-gauges {display:flex!important;gap:12px;margin:8px 0 12px}
#page-morse .desk .gauge {flex:1;min-height:70px;padding:6px}
#page-morse .desk .signal-lamp {width:26px;height:26px;border-width:3px}
#page-morse .desk .gauge-number {font-size:20px}
#page-morse .desk .tape-reel {margin-top:12px}
#page-morse.morse-reversed .workspace {grid-template-columns:minmax(420px,1.22fr) minmax(0,.78fr)}
#page-morse.morse-reversed .machine-wrap {order:2}
#page-morse.morse-reversed .desk {order:1}
@media(min-width:1000px) and (max-width:1599px) {#page-enigma .workspace{grid-template-columns:minmax(0,1.05fr) minmax(350px,.95fr)}}
@media(min-width:1600px) and (min-height:670px) {#page-enigma .workspace{grid-template-columns:minmax(0,1.05fr) minmax(360px,.77fr) minmax(360px,1fr)!important}#page-enigma .machine{width:min(100%,calc((100dvh - 130px)*1.179))!important} }
@media(min-width:850px) and (max-width:1199px){#page-morse .workspace{grid-template-columns:minmax(0,.8fr) minmax(350px,1.2fr)}#page-morse.morse-reversed .workspace{grid-template-columns:minmax(350px,1.2fr) minmax(0,.8fr)}}
@media(max-width:849px){#page-morse .workspace,#page-morse.morse-reversed .workspace{grid-template-columns:1fr}#page-morse .machine-wrap{height:65dvh}#page-morse .desk{height:auto!important}#page-morse.morse-reversed .machine-wrap{order:0}#page-morse.morse-reversed .desk{order:0}}
#page-enigma .machine-wrap {position:relative}
#page-enigma .machine-wrap::before {content:'CHIFFRIERMASCHINE  ·  ENIGMA I';position:absolute;top:4%;left:50%;transform:translateX(-50%);font:700 clamp(12px,1.2vw,20px) Georgia,serif;letter-spacing:2px;color:#d4ae73;text-shadow:0 2px 4px #000;white-space:nowrap;pointer-events:none}
#page-enigma .machine-wrap::after {content:'ELEKTROMECHANISCH  ·  1940';position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font:700 clamp(9px,.7vw,13px) Georgia,serif;letter-spacing:2px;color:#bc915a;text-shadow:0 2px 4px #000;white-space:nowrap;pointer-events:none}
@media(min-width:1600px) and (min-height:670px) {#page-enigma .workspace{grid-template-columns:minmax(0,1.24fr) minmax(360px,.75fr) minmax(360px,.96fr)!important}}

/* V0.3.5.3 PC refinements */
#page-enigma .desk{display:flex;flex-direction:column;max-height:none;min-height:calc(100dvh - 135px);overflow:visible}
#page-enigma .desk>.paper{display:flex;flex-direction:column;flex:1;min-height:330px}
#page-enigma .paper textarea{flex:1;min-height:120px;resize:vertical}
#page-enigma .paper .output{flex:1;min-height:130px;max-height:360px;overflow:auto}
#page-enigma .desk .note{font-size:11px}
#page-enigma #show-photo{display:none!important}
#swap-morse{flex-shrink:0;white-space:nowrap;padding:6px 10px;font-size:11px}
#swap-morse[aria-pressed=true]{background:#b89560;color:#20170f}
#history-dialog{width:min(94vw,660px)}#history-dialog h3{color:#d6b77f;margin-bottom:5px}#history-dialog p{line-height:1.6}#history-dialog a{color:#efd39d}
@media(max-width:900px){#page-enigma .desk{min-height:0}#page-enigma .desk>.paper{min-height:300px}}

/* V0.3.5.4 identity and cinematic opening */
.topbar{min-height:86px;height:auto!important;padding:8px 20px}.brand{gap:14px}.brand-logo{height:66px;width:66px;object-fit:contain;flex:none;border-radius:13px}.brand b{font-size:clamp(18px,1.7vw,28px)}
@media(min-width:1000px){main{height:calc(100dvh - 132px)}}
@media(max-width:760px){.topbar{min-height:60px;height:auto!important}.brand-logo{height:42px;width:42px}}
#page-morse #morse-code-input{min-height:140px;resize:vertical;overflow:auto;line-height:1.65}
.opening{position:fixed;inset:0;z-index:99999;background:#000;color:#ead2a0;overflow:hidden;display:grid;place-items:center}.opening-scene,.opening-finale{position:absolute;inset:0;transition:opacity 1s ease}.opening-photo{position:absolute;inset:0;background-color:#050505;background-position:center;background-size:cover;filter:grayscale(1) contrast(1.1) brightness(.63);transition:opacity .8s ease;animation:opening-pan 12s linear infinite}.opening-vignette{position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,transparent 48%,#0009 100%),radial-gradient(ellipse at center,transparent 30%,#0009 100%)}.opening-copy{position:absolute;bottom:12%;left:8%;right:8%;text-shadow:0 3px 20px #000;letter-spacing:.16em}.opening-copy span{font-size:clamp(12px,1.3vw,17px);color:#b9a38b}.opening-copy h1{font:clamp(27px,4vw,66px) Georgia,serif;margin:8px 0;color:#f0dfbe}.opening-copy p{font-size:clamp(12px,1.1vw,17px);letter-spacing:.06em}.opening-finale{opacity:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000;pointer-events:none}.opening-finale.visible{opacity:1}.opening-finale img{width:min(44vh,43vw,430px);max-width:80vw;object-fit:contain}.opening-finale p{font:clamp(12px,1.4vw,20px) Georgia,serif;letter-spacing:.28em;color:#d7b373}.opening-skip{position:absolute;right:20px;top:18px;z-index:2;background:#100f0e99;border:1px solid #917246;color:#e7c88f;padding:10px 16px;border-radius:5px;font-size:12px;letter-spacing:.12em}.opening-start{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);padding:20px 28px;background:#18130feb;border:1px solid #c7a268;border-radius:8px;color:#f4dca9;font:20px Georgia,serif;box-shadow:0 0 0 100vmax #0007;white-space:nowrap}.opening-start small{display:block;font:12px system-ui;margin-top:8px;color:#bea783}.opening-start:hover{background:#4b3824}@keyframes opening-pan{from{transform:scale(1)}to{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.opening-photo{animation:none}}

/* V0.3.5.5 vintage entry plaque and sepia finale */
.opening-finale{background:#000 url('assets/historical-finale.png') center center/contain no-repeat;}
.opening-start{width:min(86vw,600px);white-space:normal;min-height:116px;top:64%;border:4px ridge #d6a44f;border-radius:18px;background:linear-gradient(165deg,#a8752a,#674018 20%,#3b230f 50%,#986526 85%,#c3954d);box-shadow:inset 0 0 0 2px #e2b963,inset 0 0 22px #000b,0 12px 45px #000d,0 0 0 100vmax #0007;color:#ffe4a4;text-shadow:0 2px 2px #180b03,0 0 12px #000;letter-spacing:.05em;cursor:pointer;}
.opening-start:before,.opening-start:after{content:'✦';position:absolute;top:12px;color:#f5c679;font-size:20px}.opening-start:before{left:16px}.opening-start:after{right:16px}
.opening-start .plaque-main{font:clamp(21px,2.8vw,37px) Georgia,serif;display:block}.opening-start small{font:clamp(9px,1vw,13px) Georgia,serif;letter-spacing:.16em;color:#efc787}.opening-start:hover{filter:brightness(1.16)}
@media(max-width:650px){.opening-start{top:60%;min-height:96px;padding:14px 28px}.opening-finale{background-size:cover}}

/* V0.3.5.6 — isolated, subtly aged brass entrance plaque */
.opening-start{width:min(86vw,820px);height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline-offset:5px;top:64%;display:block;line-height:0;filter:drop-shadow(0 10px 18px #000a);}
.opening-start::before,.opening-start::after{content:none!important;}
.opening-start .plaque-image{display:block;width:100%;height:auto;max-height:29vh;object-fit:contain;pointer-events:none;}
.opening-start:hover{filter:brightness(1.12) drop-shadow(0 12px 22px #000c);}
.opening-start:focus-visible{outline:2px solid #edc681;}
@media(max-width:650px){.opening-start{width:90vw;top:60%;padding:0;min-height:0}.opening-start .plaque-image{max-height:24vh}}

/* V0.3.5.7: centre the entry plaque in the viewport */
.opening-start,.opening-start:where(:hover,:focus-visible){top:50%;left:50%;transform:translate(-50%,-50%)}
@media(max-width:650px){.opening-start{top:50%}}
.qr-dialog{max-width:min(92vw,510px)}.qr-visual{display:flex;justify-content:center;align-items:center;padding:16px;background:#fff;margin:12px auto;width:fit-content;max-width:100%;border-radius:5px}.qr-visual svg{display:block;width:min(70vw,310px);height:auto}.qr-dialog textarea,.qr-scan-dialog textarea{box-sizing:border-box;width:100%;background:#ead8b1;color:#25190e;padding:10px;font:12px monospace}.qr-scan-dialog{max-width:min(92vw,550px)}