/* ============================================================================
   MAX OS — Windows-95 Design System
   Alle Farben über CSS-Variablen → Farbschemata (Systemsteuerung → Darstellung).
   3D-Ränder als Utility-Klassen. Keine Inline-Styles in den Apps nötig.
   ========================================================================== */
:root{
  --face:#c0c0c0;        /* Standard-Grau (Button/Fenster) */
  --face-light:#dfdfdf;  /* helleres Grau */
  --hilite:#ffffff;      /* Lichtkante */
  --shadow:#808080;      /* Schattenkante */
  --dkshadow:#0a0a0a;    /* tiefe Schattenkante */
  --title:#000080;       /* aktive Titelleiste (links) */
  --title2:#1084d0;      /* aktive Titelleiste (rechts) */
  --title-text:#ffffff;
  --title-inact:#808080;
  --title-inact2:#b5b5b5;
  --title-inact-text:#d8d8d8;
  --menu-hi:#000080;     /* Menü-Markierung */
  --menu-hi-text:#ffffff;
  --window-bg:#c0c0c0;
  --field:#ffffff;       /* Eingabe-Hintergrund */
  --field-text:#000000;
  --desktop:#008080;     /* Desktop-Hintergrund (Klassik-Teal) */
  --disabled:#808080;
  --accent:#000080;
  --font:'Pixelify Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --titlebar-h:20px;
}

/* ---- Farbschemata (Darstellung) ---- */
.scheme-pflaume{ --title:#7e4972; --title2:#9c5a8e; --menu-hi:#7e4972; --accent:#7e4972; }
.scheme-wueste{ --title:#a08153; --title2:#c0a070; --menu-hi:#808000; --accent:#808000; --face:#d6cfa8; --face-light:#e8e2c4; --window-bg:#d6cfa8; }
.scheme-rosen{ --title:#9d3f5e; --title2:#c75c7e; --menu-hi:#9d3f5e; --accent:#9d3f5e; }
.scheme-regenwald{ --title:#0a5a2a; --title2:#138040; --menu-hi:#0a5a2a; --accent:#0a5a2a; }
.scheme-synth{ --title:#3a0ca3; --title2:#7a1ea0; --menu-hi:#c43a7e; --accent:#FF2E97; }
.scheme-hochkontrast{ --face:#000; --face-light:#202020; --hilite:#fff; --shadow:#808080; --dkshadow:#000; --window-bg:#000; --field:#000; --field-text:#0f0; --title:#000; --title2:#000; --title-text:#0f0; --menu-hi:#0f0; --menu-hi-text:#000; --desktop:#000; }

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;
  font-family:var(--font);font-size:15px;color:#000;cursor:default;
  -webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;user-select:none}
::selection{background:var(--title);color:#fff}

/* ---- 3D-Ränder ---- */
.out{ box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
.in{ box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face-light); }
.thin-in{ box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite); }
.thin-out{ box-shadow:inset 1px 1px var(--hilite),inset -1px -1px var(--shadow); }
.field{ background:var(--field);color:var(--field-text);box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face-light); }
.group{ border:none;box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite); padding:12px 10px 10px;margin:0;position:relative; }
.group > legend, .group > .legend{ position:absolute;top:-9px;left:8px;background:var(--window-bg);padding:0 4px;font-size:13px; }

/* ============================== FENSTER ============================== */
.win{ position:absolute;display:flex;flex-direction:column;background:var(--window-bg);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light);
  padding:3px;min-width:120px;min-height:60px; }
.win .titlebar{ display:flex;align-items:center;gap:3px;height:var(--titlebar-h);
  padding:0 2px 0 3px;background:linear-gradient(90deg,var(--title),var(--title2));
  color:var(--title-text);flex:0 0 auto;cursor:move;touch-action:none;user-select:none; }
.win.inactive .titlebar{ background:linear-gradient(90deg,var(--title-inact),var(--title-inact2));color:var(--title-inact-text); }
.win .titlebar .sysicon{ width:16px;height:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:default; }
.win .titlebar .title{ flex:1;font-weight:600;font-size:14px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none; }
.win .titlebar .tbtns{ display:flex;gap:2px;flex:0 0 auto; }
.tbtn{ width:18px;height:16px;font-size:10px;line-height:1;color:#000;
  background:var(--face);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--mono);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
.tbtn:active{ box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilite),inset 2px 2px var(--shadow),inset -2px -2px var(--face-light); }
.tbtn.close{ font-weight:700; }
.tbtn.min{ align-items:flex-end;padding-bottom:3px; }
.win .menubar{ display:flex;gap:0;padding:1px 1px 2px;background:var(--window-bg);flex:0 0 auto;font-size:14px; }
.win .menubar .m{ padding:2px 8px;cursor:pointer; }
.win .menubar .m:hover,.win .menubar .m.open{ background:var(--menu-hi);color:var(--menu-hi-text); }
.win .menubar .m u{ text-decoration:underline; }
.win .body{ flex:1;min-height:0;overflow:auto;position:relative;display:flex;flex-direction:column; }
.win .statusbar{ flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:12px;font-family:var(--mono);
  box-shadow:inset 1px 1px var(--hilite),inset -1px -1px var(--shadow);margin-top:2px; }
.win .statusbar .seg{ box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite);padding:1px 6px; }
.win .resize{ position:absolute;z-index:5; }
.win .resize.n{ top:-2px;left:6px;right:6px;height:5px;cursor:ns-resize }
.win .resize.s{ bottom:-2px;left:6px;right:6px;height:5px;cursor:ns-resize }
.win .resize.e{ right:-2px;top:6px;bottom:6px;width:5px;cursor:ew-resize }
.win .resize.w{ left:-2px;top:6px;bottom:6px;width:5px;cursor:ew-resize }
.win .resize.ne{ top:-2px;right:-2px;width:9px;height:9px;cursor:nesw-resize }
.win .resize.nw{ top:-2px;left:-2px;width:9px;height:9px;cursor:nwse-resize }
.win .resize.se{ bottom:-2px;right:-2px;width:9px;height:9px;cursor:nwse-resize }
.win .resize.sw{ bottom:-2px;left:-2px;width:9px;height:9px;cursor:nesw-resize }
.win.maxed .resize{ display:none }

/* client area helpers used by apps */
.client{ flex:1;min-height:0;overflow:auto;background:var(--field);color:var(--field-text);
  box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite);padding:10px; }
.toolbar{ display:flex;align-items:center;gap:3px;padding:3px;background:var(--window-bg);flex:0 0 auto;
  box-shadow:inset 0 1px var(--hilite),inset 0 -1px var(--shadow);flex-wrap:wrap; }
.sep-v{ width:2px;align-self:stretch;margin:2px;box-shadow:inset 1px 0 var(--shadow),inset -1px 0 var(--hilite); }

/* ============================== CONTROLS ============================== */
.btn{ min-width:60px;height:23px;padding:2px 10px;font-family:var(--font);font-size:14px;color:#000;background:var(--face);
  border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
.btn:active,.btn.pressed{ box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilite),inset 2px 2px var(--shadow),inset -2px -2px var(--face-light);padding:3px 9px 1px 11px; }
.btn:focus-visible{ outline:1px dotted #000;outline-offset:-4px; }
.btn[disabled]{ color:var(--disabled);text-shadow:1px 1px var(--hilite);cursor:default; }
.btn[disabled]:active{ box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light);padding:2px 10px; }
.btn.default{ box-shadow:inset 0 0 0 1px #000,inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
.btn.flat{ min-width:0;height:auto;box-shadow:none;padding:3px 6px;background:transparent; }
.btn.flat:hover{ box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilite); }
.btn.tool{ min-width:0;height:26px;padding:2px 7px; }

input[type=text],input[type=password],input[type=number],input[type=search],textarea,select{
  font-family:var(--mono);font-size:14px;padding:3px 5px;background:var(--field);color:var(--field-text);border:0;
  box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face-light); }
input:focus,textarea:focus,select:focus{ outline:0; }
textarea{ resize:none;line-height:1.4; }
select{ font-family:var(--font);padding:2px 4px; }

label.ck,label.rd{ display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer; }
label.ck input,label.rd input{ position:absolute;opacity:0;width:0;height:0; }
label.ck .box,label.rd .box{ width:13px;height:13px;flex:0 0 auto;background:var(--field);
  box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face-light);
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:#000; }
label.rd .box{ border-radius:50%; }
label.ck input:checked + .box::after{ content:'✔';font-size:10px; }
label.rd input:checked + .box::after{ content:'';width:5px;height:5px;border-radius:50%;background:#000; }
label.ck input:disabled + .box,label.rd input:disabled + .box{ color:var(--disabled); }

.listbox{ background:var(--field);color:var(--field-text);overflow:auto;
  box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face-light); }
.listbox .item{ padding:1px 6px;font-size:14px;cursor:default;white-space:nowrap;display:flex;align-items:center;gap:6px; }
.listbox .item.sel{ background:var(--menu-hi);color:var(--menu-hi-text); }

.progress{ height:18px;background:var(--field);box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face-light);padding:2px; }
.progress > i{ display:block;height:100%;background:repeating-linear-gradient(90deg,var(--title) 0 10px,transparent 10px 12px); }

/* Karteireiter (Tabs) */
.tabs{ display:flex;flex-direction:column;flex:1;min-height:0; }
.tabs .strip{ display:flex;gap:1px;padding:0 0 0 2px;position:relative;z-index:2;flex:0 0 auto; }
.tabs .tab{ padding:3px 11px 4px;font-size:14px;background:var(--face);cursor:pointer;border-radius:3px 3px 0 0;
  box-shadow:inset 1px 1px var(--hilite),inset -1px 0 var(--shadow);margin-bottom:-2px; }
.tabs .tab.active{ padding:5px 13px 4px;margin-bottom:-2px;position:relative;z-index:3; }
.tabs .panel{ flex:1;min-height:0;overflow:auto;background:var(--window-bg);padding:12px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }

/* ============================== SCROLLBARS ============================== */
*{ scrollbar-width:auto; }
::-webkit-scrollbar{ width:17px;height:17px; }
::-webkit-scrollbar-track{ background:repeating-conic-gradient(var(--face) 0% 25%,var(--face-light) 0% 50%) 50%/2px 2px; }
::-webkit-scrollbar-thumb{ background:var(--face);box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
::-webkit-scrollbar-button:single-button{ background:var(--face);display:block;height:17px;width:17px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light);
  background-repeat:no-repeat;background-position:center; }
::-webkit-scrollbar-button:vertical:decrement{ background-image:linear-gradient(45deg,transparent 45%,#000 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#000 45% 55%,transparent 55%);background-size:7px 4px;background-position:center 6px,center 6px; }
::-webkit-scrollbar-corner{ background:var(--face); }

/* ============================== MENÜS ============================== */
.menu{ position:fixed;z-index:9660;min-width:140px;background:var(--face);padding:2px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light),2px 2px 0 rgba(0,0,0,.4); }
.menu .mi{ display:flex;align-items:center;height:24px;padding:0 22px 0 8px;font-size:14px;cursor:default;white-space:nowrap;position:relative;gap:8px; }
.menu .mi .ico{ width:16px;flex:0 0 auto;text-align:center;font-size:13px; }
.menu .mi .lbl{ flex:1; }
.menu .mi .lbl u{ text-decoration:underline; }
.menu .mi .arr{ position:absolute;right:6px;font-size:11px; }
.menu .mi .acc{ color:var(--shadow);margin-left:18px;font-size:12px; }
.menu .mi:not(.disabled):hover,.menu .mi.hot{ background:var(--menu-hi);color:var(--menu-hi-text); }
.menu .mi:not(.disabled):hover .acc{ color:var(--menu-hi-text); }
.menu .mi.disabled{ color:var(--disabled);text-shadow:1px 1px var(--hilite); }
.menu .mi.check .ico::before{ content:'✔'; }
.menu .mi.dot .ico::before{ content:'●';font-size:9px; }
.menu .sep{ height:2px;margin:3px 2px;box-shadow:inset 0 1px var(--shadow),inset 0 -1px var(--hilite); }

/* ============================== TASKLEISTE ============================== */
#taskbar{ position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;gap:4px;padding:2px 3px;
  background:var(--face);box-shadow:inset 0 2px var(--hilite),inset 0 1px var(--face-light);z-index:8000; }
#startbtn{ display:flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 5px;font-family:var(--font);font-size:15px;font-weight:700;color:#000;background:var(--face);border:0;cursor:pointer;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
#startbtn.on{ box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilite),inset 2px 2px var(--shadow),inset -2px -2px var(--face-light); }
#startbtn .flag{ width:20px;height:18px;flex:0 0 auto; }
#tasks{ flex:1;display:flex;align-items:center;gap:3px;overflow:hidden; }
.taskbtn{ display:flex;align-items:center;gap:5px;height:24px;min-width:120px;max-width:168px;padding:0 7px;font-family:var(--font);font-size:13px;color:#000;background:var(--face);border:0;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light); }
.taskbtn .ti{ flex:0 0 auto;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:12px; }
.taskbtn .tt{ flex:1;overflow:hidden;text-overflow:ellipsis;text-align:left; }
.taskbtn.active{ font-weight:600;background:repeating-conic-gradient(var(--face) 0 25%,var(--face-light) 0 50%) 50%/3px 3px;
  box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilite),inset 2px 2px var(--shadow),inset -2px -2px var(--face-light); }
#tray{ display:flex;align-items:center;gap:7px;height:24px;padding:0 7px;flex:0 0 auto;box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilite); }
#tray .tico{ width:18px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
#clock{ font-size:14px;font-family:var(--mono);min-width:42px;text-align:center; }

/* ============================== STARTMENÜ ============================== */
#startmenu{ position:absolute;left:3px;bottom:34px;z-index:8500;display:flex;background:var(--face);padding:3px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light),3px 3px 0 rgba(0,0,0,.4); }
#startmenu .banner{ width:28px;background:linear-gradient(0deg,var(--title),var(--title2));display:flex;align-items:flex-end;justify-content:center;padding:8px 0;flex:0 0 auto; }
#startmenu .banner span{ writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-weight:700;font-size:17px;letter-spacing:2px;font-family:'VT323',var(--mono); }
#startmenu .banner b{ color:#ffe34d; }
#startmenu .col{ width:220px;display:flex;flex-direction:column;padding:1px; }
.smi{ display:flex;align-items:center;gap:10px;height:30px;padding:0 18px 0 6px;font-size:15px;cursor:default;position:relative; }
.smi .ico{ width:24px;flex:0 0 auto;text-align:center;font-size:18px; }
.smi .arr{ position:absolute;right:6px; }
.smi:hover,.smi.hot{ background:var(--menu-hi);color:var(--menu-hi-text); }

/* ============================== DIALOG ============================== */
#modal-layer{ position:absolute;inset:0;z-index:9500;display:none;align-items:center;justify-content:center; }
#modal-layer.on{ display:flex; }
.dialog{ min-width:300px;max-width:min(460px,92vw);background:var(--window-bg);padding:3px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light),3px 3px 0 rgba(0,0,0,.45); }
.dialog .titlebar{ display:flex;align-items:center;height:var(--titlebar-h);padding:0 2px 0 4px;background:linear-gradient(90deg,var(--title),var(--title2));color:var(--title-text); }
.dialog .titlebar .title{ flex:1;font-weight:600;font-size:14px; }
.dialog .dbody{ display:flex;gap:14px;align-items:flex-start;padding:18px 16px 10px; }
.dialog .dicon{ flex:0 0 34px;height:34px;font-size:30px;display:flex;align-items:center;justify-content:center; }
.dialog .dtext{ flex:1;font-size:14px;line-height:1.5;padding-top:2px;white-space:pre-line; }
#tray-net{ position:relative; }
#tray-net .dot{ position:absolute;top:-1px;right:-1px;width:6px;height:6px;border-radius:50%;background:#33d04a;box-shadow:0 0 4px #33d04a; }
.dialog .dbtns{ display:flex;justify-content:center;gap:8px;padding:6px 16px 14px;flex-wrap:wrap; }

/* ============================== TOOLTIP ============================== */
#tooltip{ position:absolute;z-index:9999;background:#ffffe1;color:#000;border:1px solid #000;padding:1px 4px;font-size:12px;pointer-events:none;display:none;max-width:260px; }

/* ============================== DESKTOP ============================== */
#desktop{ position:absolute;left:0;right:0;top:0;bottom:34px;overflow:hidden;background:var(--desktop);background-size:cover;background-position:center; }
.dicon{ position:absolute;width:80px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default;text-align:center;border:1px dotted transparent;touch-action:none; }
.dicon .art{ width:34px;height:34px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6)); }
.dicon .art img{ image-rendering:pixelated; }
.dicon .lbl{ color:#fff;font-size:13px;line-height:1.15;text-shadow:1px 1px 0 #000,0 0 2px #000;padding:0 2px;max-width:78px;
  overflow-wrap:anywhere;word-break:break-word;hyphens:auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; }
.dicon.sel .lbl{ background:var(--title);box-shadow:0 0 0 1px var(--title); }
.dicon.sel{ border:1px dotted #fff; }
.dicon .ren{ font-size:12px;font-family:var(--font);text-align:center;width:74px; }
#marquee{ position:absolute;border:1px dotted #fff;background:rgba(255,255,255,.12);z-index:10;display:none; }

/* ============================== BOOT / SPLASH / SHUTDOWN ============================== */
.fullscreen{ position:absolute;inset:0;z-index:9900;display:flex;flex-direction:column; }
#bios{ background:#000;color:#cfcfcf;font-family:var(--mono);font-size:15px;padding:26px 30px;line-height:1.55; }
#bios .ln{ opacity:0;animation:bootln .25s both; }
#splash{ background:linear-gradient(135deg,#0a1e6e,#1084d0 60%,#06103a);align-items:center;justify-content:center;color:#fff; }
#shutdown-screen{ background:#000;color:#cfcfcf;align-items:center;justify-content:center;text-align:center;font-family:var(--mono); }
#offscreen{ background:#3a1d00;color:#ffae3a;align-items:center;justify-content:center;text-align:center;font-family:var(--font); }
@keyframes bootln{from{opacity:0}to{opacity:1}}
@keyframes barfill{from{width:0}to{width:100%}}
@keyframes larrpop{0%{transform:translateY(14px) scale(.9);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes blink{50%{opacity:0}}
/* ---- Synthwave / Retrowave Hintergrund ---- */
@keyframes gridflow{from{background-position:0 0,0 0}to{background-position:0 0,0 46px}}
@keyframes sunglow{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.13) saturate(1.12)}}
@keyframes twinkleA{0%,100%{opacity:.22}45%{opacity:.95}}
@keyframes twinkleB{0%,100%{opacity:.8}50%{opacity:.18}}
@keyframes streakdrift{from{transform:translateX(-30%);opacity:0}10%{opacity:.7}90%{opacity:.7}to{transform:translateX(160%);opacity:0}}
@keyframes vhsflick{0%{opacity:.04}30%{opacity:.09}50%{opacity:.03}70%{opacity:.1}100%{opacity:.05}}
@keyframes scanroll{from{transform:translateY(-30%)}to{transform:translateY(130%)}}
#synthbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#desktop > .dicon{z-index:1}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}

/* larrAI mascot */
#mascot{ position:absolute;right:16px;bottom:44px;z-index:9000;display:flex;align-items:flex-end;gap:8px;max-width:min(340px,82vw);animation:larrpop .35s ease both; }
#mascot .bubble{ background:#ffffe1;color:#000;padding:11px 13px;font-size:14px;line-height:1.4;position:relative;flex:1;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilite),inset -2px -2px var(--shadow),inset 2px 2px var(--face-light),3px 3px 0 rgba(0,0,0,.35); }
#mascot .bubble .x{ position:absolute;top:3px;right:3px; }
#mascot .duck{ width:62px;height:62px;flex:0 0 auto;cursor:pointer;filter:drop-shadow(0 0 10px rgba(0,240,255,.5)); }

.divider{ height:2px;margin:3px 4px;box-shadow:inset 0 1px var(--shadow),inset 0 -1px var(--hilite); }
.muted{ color:var(--shadow); }
.mono{ font-family:var(--mono); }
.navy{ color:var(--accent); }