/* OUTLANDS beta 7h: self-contained page. No CSS dependency on v86 example UI. */
:root { color-scheme:dark; }
*, *::before, *::after { box-sizing:border-box; }
html, body { width:100%; height:100%; min-height:100%; margin:0; padding:0; overflow:hidden; }
body { background:#080808; color:#eee; font:14px/1.35 system-ui,sans-serif; }
#crt-runtime { position:fixed; inset:0; display:block; width:100vw; height:100dvh; overflow:hidden; }
#crt-stage { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(100vw,133.333333dvh); aspect-ratio:1448 / 1086; container-type:inline-size; }
#crt-artwork { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
/* CRT calibration relative to the 1448×1086 original artwork.
   At native artwork size, move guest display 11px right and 32px down.
   Percentages scale with the CRT at any viewport size. */
#screen_container { position:absolute; left:18.4097%; top:10.9466%; width:62.2%; height:62.5%;
    padding:0; margin:0; overflow:hidden; background:#050507; border-radius:3.7% / 5%; touch-action:none; }
#screen { white-space:pre; position:absolute; top:0; left:0; width:max-content;
    margin:0; font: bold 15px/normal 'Liberation Mono','DejaVu Sans Mono','Courier New',monospace;
    transform-origin:top left; }
#vga { position:absolute; top:0; left:0; background:#000; max-width:none; max-height:none;
    transform-origin:top left; touch-action:none; }
/* Lower the bezel button group 32px at native artwork size. */
#crt-controls { position:absolute; left:18.55%; top:77.3466%; width:45.7%; height:10.4%;
    padding:0; margin:0; border:0; display:flex; flex-wrap:wrap;
    align-content:flex-start; align-items:flex-start; gap:.42cqw; overflow:hidden; }
#crt-controls button { flex:0 0 auto; margin:0; min-height:2.75cqw; padding:.42cqw .66cqw;
    font:600 clamp(7px,.88cqw,14px)/1.12 system-ui,sans-serif; white-space:nowrap;
    border:1px solid #746d66; border-radius:.4cqw; cursor:pointer;
    background:linear-gradient(#f4f0e8,#c3b9ad); color:#302b28; text-shadow:0 1px #fff8;
    box-shadow:0 2px 3px #16120f55; }
#crt-controls button:hover { background:linear-gradient(#fff8e6,#ded1bd); }
#crt-controls button:disabled { opacity:.48; cursor:not-allowed; }
#crt-controls #manage_disk_images { background:linear-gradient(#e8ddc4,#b7a783); }
#crt-controls button:focus-visible { outline:2px solid #dfbd57; outline-offset:1px; }
#screen_container:fullscreen { position:fixed; inset:0; width:100vw; height:100dvh;
    border-radius:0; background:#000; }
#screen_container:fullscreen #vga { max-width:none;max-height:none; }
#outlands-status { position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);
    background:#1e253b;color:#fff;border:1px solid #8797c7;box-shadow:0 6px 20px #000a;
    border-radius:8px;max-width:min(90vw,600px);padding:10px 17px;pointer-events:none; }
#outlands-status[data-kind="error"] { background:#421c23;border-color:#ec818f; }
#outlands-status[hidden] { display:none; }
#outmedia-host { position:static; }
/* v86 phone/keyboard focus styling */
.phone_keyboard {position:absolute;left:-9999px;top:0;opacity:0;}

#outmedia-host { margin:0; padding:0; }
.outmedia-overlay { position:fixed; inset:0; z-index:100000; display:flex; justify-content:center; align-items:center; padding:20px; box-sizing:border-box; background:rgba(2,3,13,.78); backdrop-filter:blur(3px); overflow-y:auto; }
.outmedia-overlay[hidden] { display:none !important; }
.outmedia-dialog { color:#eff1ff; box-sizing:border-box; width:min(790px,100%); max-height:min(92vh,940px); overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(150deg,#1d2464 0%,#131647 55%,#0c1038 100%); border:1px solid #848cff; border-radius:15px; padding:22px; box-shadow:0 22px 90px #000c,0 0 0 2px #1e2053; font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.outmedia-dialog * { box-sizing:border-box; }
.outmedia-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:15px; }
.outmedia-header h2 { font:700 clamp(20px,3vw,25px)/1.23 system-ui,sans-serif; margin:0 0 4px; letter-spacing:-.025em; color:#fff; }
.outmedia-header p { color:#c4c9ec; margin:0; font:14px/1.4 system-ui,sans-serif; }
.outmedia-dialog button { cursor:pointer; font:600 14px/1.35 system-ui,sans-serif; transition:background .15s,border-color .15s,filter .15s; }
.outmedia-dialog button:disabled { opacity:.5; cursor:not-allowed; }
.outmedia-dialog button:focus-visible, .outmedia-dialog input:focus-visible, .outmedia-dialog select:focus-visible { outline:2px solid #f1d06d; outline-offset:2px; }
.outmedia-close { width:36px; height:36px; flex:none; border:1px solid #5964ab; border-radius:50%; background:#2b347f; color:white; font-size:26px !important; font-weight:400 !important; line-height:1 !important; }
.outmedia-close:hover { background:#424d9d; }
.outmedia-account { padding:14px; background:#252d79a6; border-radius:10px; border:1px solid #353e91; }
.outmedia-form-grid { display:grid; grid-template-columns:minmax(125px,1.6fr) minmax(108px,1fr) minmax(125px,1.4fr) auto; gap:10px; align-items:end; }
.outmedia-field { display:flex; flex-direction:column; gap:5px; min-width:0; color:#d8ddff; font:13px/1.3 system-ui,sans-serif; }
.outmedia-field input, .outmedia-field select, .outmedia-drive-row select, .outmedia-browse-tools select { height:38px; min-width:0; width:100%; border:1px solid #626fb8; border-radius:7px; background:#161d56; color:#fff; padding:7px 10px; color-scheme:dark; font:14px system-ui,sans-serif; }
.outmedia-field input::placeholder { color:#b1b8dd; }
.outmedia-field input:disabled, .outmedia-field select:disabled { opacity:.65; }
.outmedia-auth-buttons { display:flex; gap:6px; align-items:end; height:38px; }
.outmedia-auth-buttons button { white-space:nowrap; height:38px; }
.outmedia-dn { color:#b8c3f9; margin-top:8px; font:italic 12px/1.35 system-ui,sans-serif; overflow-wrap:anywhere; }
.outmedia-notice { background:#3d3219; color:#ffe4a9; padding:8px; border-radius:6px; }
.outmedia-status { margin:10px 0; min-height:22px; color:#c6cbec; overflow-wrap:anywhere; }
.outmedia-status.outmedia-success { color:#8ff1b2; }
.outmedia-status.outmedia-error { color:#ffabab; }
.outmedia-browser { border:1px solid #4b58bf; border-radius:12px; padding:16px; background:linear-gradient(135deg,#1c246d,#161a59); }
.outmedia-browser[hidden] { display:none !important; }
.outmedia-drive-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:#ffe17d; font-weight:700; font-size:16px; margin-bottom:12px; }
.outmedia-drive-row select { max-width:185px; font-weight:500; }
.outmedia-browse-tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }
.outmedia-browse-tools select { width:auto; min-width:85px; }
.outmedia-icon-button { background:#2a347b; color:#eee; border:1px solid #5d6cbd; border-radius:7px; padding:8px 12px; }
.outmedia-icon-button:hover { background:#35429f; }
.outmedia-breadcrumbs { min-height:38px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; background:#2d387e; border-radius:8px; padding:4px 8px; margin-bottom:12px; overflow-wrap:anywhere; }
.outmedia-breadcrumbs button { color:#e8e9ff; background:transparent; border:none; padding:3px 5px; border-radius:5px; }
.outmedia-breadcrumbs button:not(:disabled):hover { background:#4655a7; }
.outmedia-breadcrumbs button:disabled { color:#fff; opacity:1; cursor:default; }
.outmedia-separator { color:#a5aedf; }
.outmedia-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:300px; overflow-y:auto; padding:2px; }
.outmedia-tile { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; min-height:78px; padding:11px 8px; border:1px solid #6475d9; border-radius:9px; background:#2c398f; color:#fff; overflow-wrap:anywhere; text-align:center; }
.outmedia-tile:hover { background:#3949a9; border-color:#b8c3ff; }
.outmedia-tile.is-selected { background:linear-gradient(145deg,#ffe17a,#edbd45); color:#1b1b27; border-color:#ffe993; }
.outmedia-tile-icon { color:#ffd653; font-size:24px; line-height:1; }
.outmedia-tile.is-selected .outmedia-tile-icon { color:#202036; }
.outmedia-tile-name { font-size:14px; font-weight:600; }
.outmedia-tile-file { font-size:11px; opacity:.82; }
.outmedia-empty { grid-column:1/-1; color:#aeb7f1; text-align:center; margin:18px; }
.outmedia-selected { text-align:center; color:#e1e7ff; margin:13px 0 5px; min-height:20px; overflow-wrap:anywhere; }
.outmedia-mounted { text-align:center; color:#aab4f3; font-size:12px; margin-bottom:13px; overflow-wrap:anywhere; }
.outmedia-actions { display:flex; gap:12px; }
.outmedia-primary, .outmedia-secondary { border-radius:8px; padding:11px 15px; border:1px solid #818cda; color:#fff; background:#39469e; }
.outmedia-primary { flex:1.2; color:#13132c; background:linear-gradient(120deg,#ffe078,#eebf42); border-color:#ffe591; }
.outmedia-secondary { flex:1; background:#35418e; }
.outmedia-primary:not(:disabled):hover { filter:brightness(1.07); }
.outmedia-secondary:not(:disabled):hover { background:#4959b9; }
.outmedia-hint { color:#b0b8e0; text-align:center; font-size:12px; font-style:italic; margin:10px 0 0; }
@media(max-width:700px) {
  .outmedia-dialog { padding:15px; }
  .outmedia-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .outmedia-auth-buttons { grid-column:span 2; }
  .outmedia-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:420px) {
  .outmedia-overlay { padding:8px; }
  .outmedia-dialog { padding:12px; }
  .outmedia-browser { padding:10px; }
  .outmedia-form-grid { grid-template-columns:1fr; }
  .outmedia-auth-buttons { grid-column:auto; }
  .outmedia-actions { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .outmedia-dialog button { transition:none; } }