/* The illustrated frame supplies every panel; CSS places the live controls in its six recesses. */
dialog.settings-dialog{
 position:fixed;width:min(620px,calc(100vw - 24px),calc((100dvh - 24px)*.8));height:auto;aspect-ratio:1122/1402;
 min-height:0;max-height:none;max-width:none;margin:auto;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;color:#dff4ff;
}
.settings-dialog::backdrop{background:#010711e5;backdrop-filter:blur(7px)}
.settings-dialog #dialog-content{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.settings-dialog .settings-hud{position:absolute;inset:0;overflow:hidden;container-type:inline-size;font-family:var(--font,'Bahnschrift',Arial,sans-serif)}
.settings-dialog .settings-hud-art{position:absolute;inset:0;pointer-events:none;user-select:none}
.settings-dialog .settings-hud-art img{display:block;width:100%;height:100%;object-fit:contain}
.settings-dialog .settings-heading{
 position:absolute;left:15%;right:15%;top:7%;height:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;
}
.settings-dialog .settings-heading>span{color:#74c9e3;font-size:clamp(7px,1.8cqw,10px);font-weight:700;letter-spacing:2px;line-height:1;white-space:nowrap}
.settings-dialog #dialog-content .settings-heading h1{margin:0;color:#ecfaff;font-size:clamp(16px,4.8cqw,29px);line-height:1.1;font-weight:800;letter-spacing:.9px;white-space:nowrap;text-shadow:0 0 14px #43bfff50}
.settings-dialog>.dialog-close{
 position:absolute;z-index:3;right:12.3%;top:11%;transform:translateY(-50%);width:30px;height:30px;margin:0;padding:0;
 display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:#92dff6;font:28px/1 Arial,sans-serif;box-shadow:none;
}
.settings-dialog>.dialog-close:hover{background:transparent;color:#fff}
.settings-dialog>.dialog-close:active:not(:disabled){transform:translateY(-50%)}
.settings-dialog .settings-controls{position:absolute;inset:0}
.settings-dialog #dialog-content .settings-control{
 position:absolute;left:14%;right:14%;top:calc(var(--settings-well-y) / 1402 * 100%);height:8.5%;transform:translateY(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;gap:4px 12px;
 min-width:0;padding:0;margin:0;border:0;background:none;
}
/* Optical centers of the six dark wells in the 1122 × 1402 frame. */
.settings-dialog .settings-control:nth-child(1){--settings-well-y:320}
.settings-dialog .settings-control:nth-child(2){--settings-well-y:486.5}
.settings-dialog .settings-control:nth-child(3){--settings-well-y:653}
.settings-dialog .settings-control:nth-child(4){--settings-well-y:820}
.settings-dialog .settings-control:nth-child(5){--settings-well-y:985.5}
.settings-dialog .settings-control:nth-child(6){--settings-well-y:1148}
.settings-dialog #dialog-content .settings-control>label{
 display:block;min-width:0;margin:0;padding:0;border:0;color:#d8f1ff;font-size:clamp(12px,3cqw,18px);font-weight:650;line-height:1.15;letter-spacing:.15px;
}
.settings-dialog #dialog-content .settings-volume output{
 color:#8eeaff;font-size:clamp(14px,3.7cqw,23px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-align:right;
}
.settings-dialog #dialog-content .settings-volume input{
 grid-column:1/-1;appearance:none;-webkit-appearance:none;display:block;width:100%;height:22px;min-width:0;max-width:none;
 padding:0;margin:0;border:0;border-radius:0;background:transparent;cursor:pointer;accent-color:#45d4ff;
}
.settings-dialog .settings-volume input::-webkit-slider-runnable-track{
 height:6px;border:1px solid #398cb3;border-radius:2px;background:linear-gradient(to right,#6ce8ff 0 var(--settings-level),#102b42 var(--settings-level) 100%);
}
.settings-dialog .settings-volume input::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;width:19px;height:20px;margin-top:-8px;border:2px solid #c4f9ff;border-radius:3px;background:#20a9d4;box-shadow:0 0 10px #36caff75;
}
.settings-dialog .settings-volume input::-moz-range-track{height:5px;border:1px solid #398cb3;border-radius:2px;background:#102b42}
.settings-dialog .settings-volume input::-moz-range-progress{height:5px;background:#6ce8ff}
.settings-dialog .settings-volume input::-moz-range-thumb{width:15px;height:17px;border:2px solid #c4f9ff;border-radius:3px;background:#20a9d4;box-shadow:0 0 10px #36caff75}
.settings-dialog .settings-switch{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.settings-dialog .settings-switch>span{min-width:25px;text-align:right;color:#8ac4d8;font-size:clamp(10px,2.4cqw,13px);line-height:1;font-weight:700;letter-spacing:.7px}
.settings-dialog .settings-switch:has(input:checked)>span{color:#9af4ff}
.settings-dialog #dialog-content .settings-switch input{
 appearance:none;-webkit-appearance:none;position:relative;display:block;flex:0 0 auto;width:48px;height:26px;margin:0;padding:0;
 border:1px solid #467c98;border-radius:4px;background:#081f31;cursor:pointer;transition:background .12s,border-color .12s;
}
.settings-dialog .settings-switch input::before{
 content:'';position:absolute;top:3px;left:3px;bottom:3px;width:18px;border:1px solid #91b4c6;border-radius:2px;background:#4b7188;transition:transform .12s,background .12s;
}
.settings-dialog #dialog-content .settings-switch input:checked{border-color:#7bedff;background:#13445d;box-shadow:0 0 9px #3ccaff38}
.settings-dialog .settings-switch input:checked::before{transform:translateX(22px);border-color:#d1fcff;background:#59d9f3;box-shadow:0 0 7px #5ae5ff85}
.settings-dialog #dialog-content .settings-quality select{
 width:clamp(110px,28cqw,175px);max-width:100%;min-height:34px;margin:0;padding:6px 7px;border:1px solid #3e9bc4;border-radius:3px;
 background:#08283c;color:#d9f7ff;font-size:clamp(12px,2.7cqw,16px);line-height:1.1;cursor:pointer;color-scheme:dark;
}
.settings-dialog #dialog-content input:focus-visible,.settings-dialog #dialog-content select:focus-visible,.settings-dialog>.dialog-close:focus-visible{outline:2px solid #b6f5ff;outline-offset:3px}
@media(max-width:600px){
 .settings-dialog .settings-heading{gap:3px}
 .settings-dialog>.dialog-close{width:24px;height:28px;font-size:24px;right:11.5%}
 .settings-dialog #dialog-content .settings-control{gap:2px 8px}
 .settings-dialog #dialog-content .settings-volume input{height:18px}
 .settings-dialog .settings-switch{gap:6px}
 .settings-dialog #dialog-content .settings-switch input{width:42px;height:24px}
 .settings-dialog .settings-switch input::before{width:16px}
 .settings-dialog .settings-switch input:checked::before{transform:translateX(18px)}
 .settings-dialog #dialog-content .settings-quality select{min-height:27px;padding:4px}
}
@media(max-height:530px) and (orientation:landscape){
 dialog.settings-dialog{width:min(820px,calc(100vw - 24px),calc((100dvh - 20px)*1.5));aspect-ratio:3/2}
 .settings-dialog .settings-heading{left:16%;right:16%;top:9%;height:6.2%;gap:0}
 .settings-dialog .settings-heading>span{display:none}
 .settings-dialog #dialog-content .settings-heading h1{font-size:clamp(17px,3.4cqw,25px)}
 .settings-dialog>.dialog-close{right:10.5%;top:12%;width:28px;height:28px}
 .settings-dialog #dialog-content .settings-controls{left:0;right:0;top:21%;bottom:20%;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:0}
 .settings-dialog #dialog-content .settings-control{position:relative;inset:auto;left:auto;right:auto;width:76%;height:auto;margin:0 auto;transform:none;gap:5px 12px}
 .settings-dialog #dialog-content .settings-control>label{font-size:clamp(12px,2.6cqw,16px)}
 .settings-dialog #dialog-content .settings-volume{grid-template-columns:35% minmax(0,1fr) 35px}
 .settings-dialog #dialog-content .settings-volume>label{grid-column:1;grid-row:1}
 .settings-dialog #dialog-content .settings-volume output{grid-column:3;grid-row:1;font-size:clamp(13px,2.8cqw,17px)}
 .settings-dialog #dialog-content .settings-volume input{grid-column:2;grid-row:1;height:22px}
 .settings-dialog #dialog-content .settings-quality select{min-height:28px;padding:4px 7px;font-size:13px;width:150px}
 .settings-dialog .settings-switch{gap:8px}
 .settings-dialog #dialog-content .settings-switch input{width:42px;height:24px}
 .settings-dialog .settings-switch input::before{width:16px}
 .settings-dialog .settings-switch input:checked::before{transform:translateX(18px)}
}
@media(prefers-reduced-motion:reduce){.settings-dialog .settings-switch input,.settings-dialog .settings-switch input::before{transition:none}}
.reduced-motion .settings-dialog .settings-switch input,.reduced-motion .settings-dialog .settings-switch input::before{transition:none}