/* One architectural plate sets the desktop coordinates for every foreground layer.
   1536 × 1024: header 0–100, console 16/99–984/909, rug 1008/706–1493/748. */
body{background:#9a572d;color:var(--ink)}
.page-shell{width:100%;max-width:1600px;min-height:0;padding:0;display:block;overflow:visible}
.room-shell{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden}
.room-art{position:absolute;inset:0;z-index:-2;pointer-events:none}
.room-art>img{display:block;width:100%;height:100%;image-rendering:pixelated}
#page-effects{z-index:5}
.page-notes{background:#f3d19b;padding:12px 4% 24px;border-top:4px solid #874822}
.page-notes .announcement{margin:0}
.header-tagline{display:none}

@media(min-width:801px){
 .room-shell{aspect-ratio:1536/1024}
 .site-header{position:absolute;inset:0 0 auto;height:6.51cqw;margin:0;padding:0 5.9% 0 4.4%;gap:2cqw;border:0;box-shadow:none}
 .brand{width:34.2%;margin:0;flex:none}
 .header-tools{margin-left:auto;max-width:24%;padding-left:1cqw}
 #language-select{font-size:1.1cqw;padding:.6cqw .65cqw;max-width:none;width:12.6cqw;min-height:34px}
 .console-layout{position:static;display:block}
 .console{position:absolute;left:1.04%;top:9.67%;width:63.02%;height:79.4%;padding:0;margin:0;min-height:0;filter:drop-shadow(0 3px 0 #5c331950)}
 .console-skin{clip-path:polygon(6% 0,94% 0,94% 1%,97% 1%,97% 3%,98.8% 3%,98.8% 71.5%,100% 71.5%,100% 96%,99% 96%,99% 98%,96% 98%,96% 100%,4% 100%,4% 99%,2% 99%,2% 97%,0 97%,0 4%,2% 4%,2% 2%,4% 2%,4% 1%,6% 1%)}
 .console-top{position:absolute;left:8.3%;right:8.3%;top:4%;height:7.3%;padding:0;gap:0}
 .console-top>.screw{display:none}
 .workflow-steps{font-size:1.47cqw;gap:1cqw;width:100%}
 .workflow-steps li{gap:.8cqw;flex:1;justify-content:center;min-width:0}
 .workflow-steps b{font-size:1.76cqw;padding:.4cqw .55cqw}
 .workflow-steps li+li:before{display:none}
 .screen-frame{position:absolute;left:6.15%;right:5.5%;top:12.3%;height:47.7%;padding:.39cqw;border-width:.39cqw;box-shadow:0 -.25cqw #686b54,0 .25cqw #899379,-.25cqw 0 #777b64,.25cqw 0 #777b64}
 .screen{height:100%;min-height:0;padding:2% 17%}
 .screen-content{max-height:none;overflow:visible;padding:3px}
 .screen-content h2{font-size:1.7cqw;margin:.65cqw 0}
 .screen-content p{font-size:1.17cqw;margin:.65cqw 0;line-height:1.25}
 .dropzone{padding:1.15cqw .9cqw 1cqw}
 .audio-file-icon{width:4.1cqw;height:4.7cqw;margin-bottom:1.3cqw}
 .choose-button,.primary-button{font-size:1.82cqw;padding:.95cqw 1.3cqw;border-width:.26cqw}
 .dropzone p:first-of-type{font-size:1.3cqw;margin:1cqw 0 0}
 .screen-content .upload-limits,.screen-content .formats{font-size:1.17cqw;line-height:1.3}
 .screen-content .upload-limits{margin-top:1cqw}
 .screen-content .action-hint{font-size:.8cqw;margin:.6cqw 0 0}
 .equalizer .bars{height:7.7cqw;gap:.32cqw}
 .equalizer>span{font-size:2.2cqw}
 .screen-corner{font-size:1.9cqw}
 .console-controls{position:absolute;left:15.3%;right:15.3%;top:63%;height:28.3%;margin:0;display:block}
 .stem-grid{height:100%;gap:1.15cqw}
 .stem-card{display:flex;flex-direction:column;padding:.65cqw .75cqw .55cqw}
 .stem-card h3{font-size:1.56cqw;gap:.7cqw;white-space:nowrap}
 .stem-icon{display:grid;width:2.6cqw;height:2.6cqw;font-size:2.05cqw}
 .stem-wave{height:4.05cqw;flex:1;min-height:0;padding:.5cqw 0}
 .download-button,.console[data-state=completed] .download-button{font-size:1.3cqw;min-height:2.9cqw;gap:.5cqw;padding:.55cqw .3cqw}
 .download-button>span:first-child{font-size:1.4cqw}
 .stem-card p{font-size:1.03cqw;line-height:1.1;margin:.6cqw 0 0;min-height:1.15em}
 /* Hardware belongs to the console, not to the download-card row. */
 .console-controls .hardware{position:absolute}
 .hardware-left{left:-18.8%;bottom:0;width:17.3%;height:auto}
 .hardware-right{right:-18.7%;bottom:0;width:18.1%;height:66%}
 .dpad{aspect-ratio:1}
 .console-bottom{position:absolute;left:20%;right:20%;bottom:2.2%;height:4%;margin:0;font-size:.96cqw;letter-spacing:.13cqw}
 .hero-copy{position:absolute;left:64%;top:12.7%;width:34.8%;height:21.5%;margin:0;padding:.75cqw 1cqw;overflow:auto}
 #page-title[data-reference-art=true]{margin:0 0 .65cqw}
 .hero-copy h1{font-size:4.2cqw;line-height:.96;margin:0 0 .7cqw}
 .hero-copy>p:not(.mini-label){font-size:1.58cqw;line-height:1.1}
 .green-rule{margin-top:.85cqw;height:.32cqw;width:4.1cqw}
 html:lang(ru) .hero-copy h1{font-size:2.8cqw;line-height:1.03}
 html:lang(es) .hero-copy h1,html:lang(pt) .hero-copy h1{font-size:3.5cqw}
 .mascot-scene{position:absolute;left:64.06%;top:34.18%;width:35.94%;height:39.55%;aspect-ratio:auto;margin:0;overflow:visible}
 .scene-art{display:none}
 .mascot-scene #mascot-stage{inset:8% 7% 0;width:86%}
 .privacy-card{position:absolute;left:66%;top:77.1%;width:31.3%;height:12%;margin:0;padding:.55cqw 1.1cqw;gap:1cqw;overflow:auto}
 .privacy-card h2{font-size:1.13cqw;line-height:1.2}
 .privacy-card p{font-size:1.05cqw;line-height:1.2;margin:.35cqw 0 0}
 .privacy-card small{font-size:.7cqw;line-height:1.1;margin-top:.3cqw}
 .shield{font-size:1.7cqw;min-width:2.9cqw;padding:.3cqw .5cqw .9cqw}
 .room-shell footer{position:absolute;left:12%;right:12%;bottom:1.5%;height:5%;padding:0;min-height:0;gap:1.1cqw;font-size:.9cqw}
 footer p{font-size:1.1cqw;letter-spacing:.05cqw}
 #sound-toggle{font-size:.85cqw;padding:.4cqw .55cqw}
 .progress-row{font-size:1.05cqw;margin-top:1.2cqw}
 .progress-track{height:1.3cqw;margin-top:.65cqw}
 .processing-meta{margin:.3cqw 0 .7cqw}
 .processing-meta p,.screen-content .mini-label{font-size:.95cqw}
 .screen-content .small-copy{font-size:.85cqw}
 .text-button{font-size:1cqw;padding:.35cqw .1cqw}
 .process-notes{font-size:2.3cqw;margin:.4cqw}
 .cassette-icon{width:6.38cqw;height:3.97cqw;padding:.39cqw;border-width:.2cqw;margin:0 auto .4cqw}
 .cassette-icon>span{font-size:1.43cqw}
 .cassette-icon small{font-size:.59cqw}
 .result-actions{margin-top:.6cqw;gap:1cqw}
 #results-panel .small-copy{margin:.4cqw 0}
 .expiry-notice{padding:.6cqw}
 .selected-file{padding:.65cqw;margin:.6cqw 0;gap:.6cqw}
 .selected-file .file-description p{font-size:1.03cqw}
 .selected-file .file-description #file-details{font-size:.91cqw}
 .convert-button{font-size:1.4cqw;margin-top:.6cqw}
 #upload-panel:has(#selected-file:not([hidden])) .audio-file-icon,
 #upload-panel:has(#selected-file:not([hidden])) .dropzone p{display:none}
 #upload-panel:has(#selected-file:not([hidden])) .dropzone{padding:.4cqw;border:0}
 #upload-panel:has(#selected-file:not([hidden])) .choose-button{font-size:1.25cqw;padding:.55cqw 1cqw}
 .notice{padding:.7cqw;margin-bottom:.6cqw}
 .notice p{font-size:1cqw}
 #processing-panel>p{margin:.45cqw 0}
 /* Leave room for a validation/connection message without adding an inner scroller. */
 .screen-content:has(.notice:not([hidden])) .audio-file-icon,
 .screen-content:has(.notice:not([hidden])) .dropzone p:first-of-type,
 .screen-content:has(.notice:not([hidden])) .dropzone .formats,
 .screen-content:has(.notice:not([hidden])) .process-notes,
 .screen-content:has(.notice:not([hidden])) #processing-copy,
 .screen-content:has(.notice:not([hidden])) .cassette-icon{display:none}
 .screen-content:has(.notice:not([hidden])) .dropzone{padding:.65cqw}
}

@media(max-width:800px){
 .page-shell{max-width:660px;padding:0}
 .room-shell{background:#d8974b url('assets/honeywood/background-clean-v1.png') left top/278.26% auto repeat-y;padding-bottom:0}
 .room-art{display:none}
 .site-header{height:82px;padding:8px 26px 8px 23px;margin:0;border:0;box-shadow:none;gap:10px;background:url('assets/honeywood/background-clean-v1.png') left top/1536px 1024px}
 .brand{width:calc(100% - 117px);margin:0}
 .header-tools{margin-left:auto;flex:none}
 #language-select{max-width:none;width:110px;padding:7px 3px;font-size:12px}
 .console-layout{padding:0;display:flex;flex-direction:column}
 .mascot-scene{order:0;width:100%;aspect-ratio:552/430;align-self:center;margin:0;height:auto;overflow:hidden}
 .scene-art{display:block;inset:0}
 .scene-art img{width:278.26087%;height:238.1395%;left:-178.26087%;top:-76.7442%}
 .mascot-scene #mascot-stage{inset:8% 9% 0;width:82%}
 .console{order:1;align-self:center;width:calc(100% - 16px);margin:-4px 8px 0}
 .hero-copy{order:2;align-self:center;width:calc(100% - 28px);margin:22px 14px 0}
 .privacy-card{order:3;align-self:center;width:calc(100% - 28px);margin:14px 14px 0}
 .room-shell footer{position:relative;min-height:152px;margin-top:18px;padding:17px 74px 24px;gap:8px;align-content:center;background:url('assets/honeywood/background-clean-v1.png') center bottom/1536px 1024px}
 footer p{font-size:12px;margin:0 0 8px;flex-basis:100%}
 footer #sound-toggle{font-size:11px;white-space:normal}
 footer a{font-size:12px;margin-left:5px}
 .page-notes{padding:12px 16px 20px}
}
@media(max-width:370px){
 .site-header{height:72px;padding-left:23px;padding-right:22px;gap:6px}
 .brand{width:calc(100% - 101px)}
 #language-select{width:95px;font-size:10px}
 .room-shell footer{padding-left:62px;padding-right:62px;min-height:153px}
}

@media(min-width:801px){
 html:lang(fr) .hero-copy h1,html:lang(pl) .hero-copy h1{font-size:2.6cqw;line-height:1.12}
 html:lang(ar) .hero-copy h1,html:lang(zh) .hero-copy h1{font-size:2.8cqw;line-height:1.35}
 html:lang(fr) .hero-copy>p,html:lang(pl) .hero-copy>p,html:lang(ar) .hero-copy>p,html:lang(zh) .hero-copy>p{font-size:1.35cqw;line-height:1.3}
 html:lang(ar) .privacy-card p{font-size:1cqw;line-height:1.3}
}