/* MADRiD OS: macOS on a computer, iOS on a phone. Only the chrome lives here; the rooms keep
   their own styles. online.css (loaded first) supplies the rooms' fonts, the phone frame, the
   toast and dialog. The system font stack renders SF Pro on Apple devices and Inter elsewhere. */
:root{
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mac-text:#1d1d1f;--mac-text-2:rgba(60,60,67,.62);--mac-text-3:rgba(60,60,67,.3);--mac-sep:rgba(0,0,0,.1);
  --mac-accent:#007aff;--mac-select:#0a60ff;--mac-select-soft:rgba(0,0,0,.07);
  --mac-window:#ffffff;--mac-window-2:#f6f6f6;--mac-sidebar:rgba(243,243,245,.9);--mac-toolbar:rgba(247,247,247,.95);
  --mac-menubar:rgba(246,246,246,.72);--mac-menu:rgba(246,246,246,.82);--mac-dock:rgba(245,245,245,.5);--mac-dock-border:rgba(255,255,255,.55);
  --mac-shadow:0 24px 70px rgba(0,0,0,.38),0 0 0 .5px rgba(0,0,0,.28);--mac-shadow-soft:0 8px 30px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.2);
  --tl-red:#ff5f57;--tl-yellow:#febc2e;--tl-green:#28c840;--tl-idle:#d8d8d8;--tl-ring:rgba(0,0,0,.14);
  --field:#fff;--field-border:rgba(0,0,0,.14);
  --wallpaper:radial-gradient(120% 90% at 10% 10%,#ffb38a 0%,rgba(255,179,138,0) 55%),radial-gradient(90% 80% at 90% 20%,#ff4f00 0%,rgba(255,79,0,0) 60%),linear-gradient(160deg,#ff8a5b 0%,#e23c8d 45%,#5a2fb8 100%);
  background:#000;
}
#os[data-theme=dark],#os[data-theme=auto].dark-pref{
  --mac-text:#f5f5f7;--mac-text-2:rgba(235,235,245,.6);--mac-text-3:rgba(235,235,245,.3);--mac-sep:rgba(255,255,255,.12);
  --mac-accent:#0a84ff;--mac-select:#0a60ff;--mac-select-soft:rgba(255,255,255,.1);
  --mac-window:#1e1e20;--mac-window-2:#262628;--mac-sidebar:rgba(38,38,40,.9);--mac-toolbar:rgba(44,44,46,.96);
  --mac-menubar:rgba(28,28,30,.66);--mac-menu:rgba(44,44,46,.86);--mac-dock:rgba(40,40,42,.5);--mac-dock-border:rgba(255,255,255,.18);
  --tl-idle:#4b4b4e;--tl-ring:rgba(255,255,255,.1);--field:#2c2c2e;--field-border:rgba(255,255,255,.16);
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;overflow:hidden;font-family:var(--sf);color:var(--mac-text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
#os{position:fixed;inset:0;display:flex;flex-direction:column;font-family:var(--sf);color:var(--mac-text)}
.wallpaper{position:absolute;inset:0;background:var(--wallpaper);background-size:cover;background-position:center;z-index:0}
.wallpaper.has-image{background-image:var(--wallpaper-image),var(--wallpaper)}
.glass{backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}
.app-icon{display:inline-block;width:52px;height:52px;border-radius:22.4%;overflow:hidden;flex-shrink:0;box-shadow:0 .5px 1.5px rgba(0,0,0,.25);background:#fff;vertical-align:middle}
.app-icon svg,.app-icon > img{display:block;width:100%;height:100%}
.app-icon.icon-tv{background:#000}
button{font-family:inherit}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- macOS: menu bar ---------- */
.menubar{position:relative;z-index:900;flex:0 0 25px;height:25px;display:flex;align-items:center;gap:0;padding:0 10px 0 8px;font:400 13px/1 var(--sf);color:var(--mac-text);background:var(--mac-menubar);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-bottom:.5px solid var(--mac-sep);user-select:none;-webkit-user-select:none}
.mb-madrid{height:25px;display:flex;align-items:center;padding:0 9px;border:0;background:none;border-radius:5px;cursor:default;color:inherit}
.mb-madrid img{height:12px;width:auto;filter:none}
#os[data-theme=dark] .mb-madrid img,#os.dark-pref[data-theme=auto] .mb-madrid img{filter:invert(1)}
.mb-menus{display:flex;align-items:center;height:25px}
.mb-item{height:22px;padding:0 10px;border:0;background:none;border-radius:5px;font:400 13px/22px var(--sf);color:inherit;cursor:default;white-space:nowrap}
.mb-item.mb-app{font-weight:700;padding:0 10px 0 9px}
.mb-item.open,.mb-madrid.open{background:var(--mac-select-soft)}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:8px;height:25px}
.mb-status{font:500 11px/1 var(--sf);color:var(--mac-text-2);padding:3px 7px;border-radius:5px;background:var(--mac-select-soft);letter-spacing:.02em;max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mb-status[data-mode=archive]{color:var(--mac-text)}
.mb-icon{height:22px;width:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:5px;color:inherit;cursor:default;padding:0}
.mb-icon svg{width:16px;height:16px}
.mb-icon.open{background:var(--mac-select-soft)}
.mb-clock{font:400 13px/1 var(--sf);padding:0 4px;white-space:nowrap}
.menu-dropdown{position:absolute;z-index:950;top:26px;left:0;min-width:230px;padding:5px;border-radius:7px;background:var(--mac-menu);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);box-shadow:0 10px 36px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.18);font:400 13px/1.2 var(--sf)}
.menu-dropdown[hidden]{display:none}
.menu-dropdown .mi{display:flex;align-items:center;gap:8px;width:100%;padding:4px 10px 4px 22px;border:0;background:none;border-radius:5px;color:var(--mac-text);text-align:left;cursor:default;position:relative;text-decoration:none;font:inherit}
.menu-dropdown .mi .app-icon{width:16px;height:16px;border-radius:4px;box-shadow:none}
.menu-dropdown .mi .mi-key{margin-left:auto;color:var(--mac-text-2);font-size:12px;letter-spacing:.06em}
.menu-dropdown .mi.checked::before{content:"✓";position:absolute;left:7px;font-size:12px}
.menu-dropdown .mi.minimized::before{content:"◇";position:absolute;left:7px;font-size:11px}
.menu-dropdown .mi:not([disabled]):hover,.menu-dropdown .mi:not([disabled]):focus-visible{background:var(--mac-select);color:#fff;outline:0}
.menu-dropdown .mi:not([disabled]):hover .mi-key{color:rgba(255,255,255,.8)}
.menu-dropdown .mi[disabled]{color:var(--mac-text-3)}
.menu-dropdown .mi[disabled] .mi-key{color:var(--mac-text-3)}
.menu-dropdown .msep{height:.5px;background:var(--mac-sep);margin:5px 10px}

/* ---------- macOS: desktop and windows ---------- */
.desktop{position:relative;flex:1;min-height:0;overflow:hidden;z-index:1}
.desktop:focus{outline:0}
.window{position:absolute;display:flex;flex-direction:column;background:var(--mac-window);border-radius:10px;box-shadow:var(--mac-shadow-soft);overflow:hidden;min-width:320px;min-height:200px;color:var(--mac-text);transform-origin:center;transition:opacity .18s ease,transform .18s ease}
.window.focused{box-shadow:var(--mac-shadow)}
.window.opening{animation:winOpen .18s ease-out}
.window.minimizing{opacity:0;transform:scale(.12) translateY(140%)}
.window[hidden]{display:none}
@keyframes winOpen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.window-title{flex:0 0 28px;height:28px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--mac-window-2);border-bottom:.5px solid var(--mac-sep);font:600 13px/1 var(--sf);color:var(--mac-text-2);cursor:default;user-select:none;-webkit-user-select:none;touch-action:none;padding:0 76px}
.window.focused .window-title{color:var(--mac-text)}
.window.phone-window .window-title,.window.finder-window .window-title{background:var(--mac-toolbar)}
.traffic{position:absolute;left:8px;top:8px;display:flex;gap:8px}
.traffic button{width:12px;height:12px;border-radius:50%;border:.5px solid var(--tl-ring);padding:0;cursor:default;background:var(--tl-idle);color:transparent;font:800 9px/1 var(--sf);display:grid;place-items:center}
.window.focused .traffic .close{background:var(--tl-red)}
.window.focused .traffic .min{background:var(--tl-yellow)}
.window.focused .traffic .zoom{background:var(--tl-green)}
.window.focused .traffic:hover button{color:rgba(0,0,0,.55)}
.window-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.window-body{flex:1;min-height:0;overflow:auto;position:relative;background:var(--mac-window);container-type:inline-size}
.rs{position:absolute;z-index:5;touch-action:none}
.rs-n,.rs-s{left:10px;right:10px;height:6px;cursor:ns-resize}.rs-n{top:-3px}.rs-s{bottom:-3px}
.rs-e,.rs-w{top:10px;bottom:10px;width:6px;cursor:ew-resize}.rs-e{right:-3px}.rs-w{left:-3px}
.rs-ne,.rs-nw,.rs-se,.rs-sw{width:14px;height:14px}
.rs-ne{top:-4px;right:-4px;cursor:nesw-resize}.rs-nw{top:-4px;left:-4px;cursor:nwse-resize}.rs-se{bottom:-4px;right:-4px;cursor:nwse-resize}.rs-sw{bottom:-4px;left:-4px;cursor:nesw-resize}
.window.zoomed{border-radius:0}
.window.phone-window .window-body{overflow:hidden;display:flex;justify-content:center;background:#2c2c2e}
.window.phone-window .phone{width:390px;flex:0 0 390px;height:100%;border:0;border-radius:0;box-shadow:none}
.window-body .desktop-app-window{height:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.window-body .module-mount{flex:1;min-height:0;display:flex;flex-direction:column}
.window-body .studio-app,.window-body .ai-app,.window-body .apple-app{height:100%;min-height:0;flex:1;border-radius:0}

/* ---------- macOS: dock ---------- */
.dock{position:relative;z-index:800;flex:0 0 auto;display:flex;justify-content:center;padding:0 10px 6px;pointer-events:none}
.dock-tray{pointer-events:auto;display:flex;align-items:flex-end;gap:5px;padding:5px 6px;border-radius:19px;background:var(--mac-dock);border:.5px solid var(--mac-dock-border);box-shadow:0 10px 30px rgba(0,0,0,.25);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);max-width:100vw;overflow-x:auto;scrollbar-width:none}
.dock-app{position:relative;width:54px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border:0;background:none;padding:0 0 2px;cursor:default;transition:transform .12s ease}
.dock-app .app-icon{width:50px;height:50px;transition:transform .12s ease}
.dock-app:hover .app-icon{transform:translateY(-6px) scale(1.12)}
.dock-app .dot{width:4px;height:4px;border-radius:50%;background:var(--mac-text);opacity:0}
.dock-app.running .dot{opacity:.75}
.dock-app .dock-label{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:6px;background:var(--mac-menu);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 4px 14px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.15);color:var(--mac-text);font:500 13px/1 var(--sf);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .1s}
.dock-app:hover .dock-label,.dock-app:focus-visible .dock-label{opacity:1}
.dock-sep{width:.5px;align-self:stretch;margin:4px 6px;background:var(--mac-sep)}
@media(max-width:1180px){.dock-app{width:46px;height:54px}.dock-app .app-icon{width:42px;height:42px}}

/* ---------- macOS: Finder ---------- */
.finder{display:flex;height:100%;min-height:0;font:400 13px var(--sf);color:var(--mac-text)}
.finder-side{flex:0 0 190px;border-right:.5px solid var(--mac-sep);overflow:auto;padding:8px 8px 12px;background:var(--mac-sidebar);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.finder-heading{font:700 11px/1 var(--sf);color:var(--mac-text-2);margin:10px 8px 6px;letter-spacing:.01em}
.finder-group{font:700 11px/1 var(--sf);color:var(--mac-text-2);margin:14px 8px 6px}
.finder-room{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:5px;color:inherit;text-decoration:none;font-size:13px;line-height:18px}
.finder-room .app-icon{width:18px;height:18px;border-radius:4px;box-shadow:none}
.finder-room .icon{width:16px;height:16px;color:var(--mac-accent)}
.finder-room.selected{background:var(--mac-select-soft)}
.finder-badge{margin-left:auto;font:400 11px var(--sf);color:var(--mac-text-2)}
.finder-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--mac-window)}
.finder-toolbar{flex:0 0 44px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:.5px solid var(--mac-sep);background:var(--mac-toolbar)}
.ft-nav{display:flex;gap:2px}
.ft-btn{height:26px;min-width:28px;padding:0 7px;border:0;border-radius:6px;background:none;color:var(--mac-text-2);font:400 15px/1 var(--sf);cursor:default;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.ft-btn:not([disabled]){color:var(--mac-text)}
.ft-btn:not([disabled]):hover{background:var(--mac-select-soft)}
.ft-btn svg{width:16px;height:16px}
.ft-title{font:600 15px/1 var(--sf);margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-seg{display:inline-flex;border-radius:6px;background:var(--mac-select-soft);padding:2px}
.ft-seg .ft-btn{height:22px;min-width:30px}
.ft-seg .ft-btn.on{background:var(--mac-window);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.ft-search{margin-left:auto;display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:7px;background:var(--field);border:.5px solid var(--field-border);min-width:140px;max-width:220px;flex:1}
.ft-search svg{width:13px;height:13px;color:var(--mac-text-2)}
.ft-search input{border:0;background:none;outline:0;font:400 13px var(--sf);color:inherit;width:100%;min-width:0}
.finder-list{flex:1;min-height:0;overflow:auto}
.finder-table{width:100%;border-collapse:collapse;font-size:13px}
.finder-table th{position:sticky;top:0;z-index:1;text-align:left;font:400 11px/1 var(--sf);color:var(--mac-text-2);padding:5px 10px;background:var(--mac-window);border-bottom:.5px solid var(--mac-sep);cursor:default;white-space:nowrap}
.finder-table th.sorted{color:var(--mac-text)}
.finder-table td{padding:3px 10px;height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.finder-table td.finder-name{max-width:none;width:55%}
.finder-table tbody tr:nth-child(even){background:rgba(0,0,0,.028)}
#os[data-theme=dark] .finder-table tbody tr:nth-child(even),#os.dark-pref[data-theme=auto] .finder-table tbody tr:nth-child(even){background:rgba(255,255,255,.035)}
.finder-table tbody tr{cursor:default}
.finder-table tbody tr.selected td{background:var(--mac-select);color:#fff}
.finder-name{display:flex;align-items:center;gap:7px}
.finder-name .icon{width:15px;height:15px;flex-shrink:0;color:var(--mac-text-2)}
.finder-table tr.selected .finder-name .icon{color:#fff}
.finder-actions{text-align:right}
.finder-actions a{color:var(--mac-accent);text-decoration:none;margin-left:12px;font-size:12px}
.finder-table tr.selected .finder-actions a{color:#fff}
.finder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 8px;padding:14px}
.finder-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px;border-radius:6px;text-align:center;font-size:12px;line-height:1.25;color:inherit;cursor:default}
.finder-item .icon{width:40px;height:40px;color:var(--mac-text-2)}
.finder-item span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%}
.finder-item.selected{background:var(--mac-select-soft)}
.finder-note{padding:18px 16px 0;font-size:13px;line-height:1.5;max-width:520px;color:var(--mac-text-2)}
.finder-note .bevel{display:inline-block;margin-top:8px}
.finder-foot{flex:0 0 22px;display:flex;align-items:center;justify-content:center;gap:12px;font:400 11px var(--sf);color:var(--mac-text-2);border-top:.5px solid var(--mac-sep);background:var(--mac-window-2)}
.finder-foot .plain-link{font:inherit;color:var(--mac-accent);border:0;background:none;margin:0}
@container (max-width:620px){.finder-side{flex-basis:140px}.finder-table th:nth-child(3),.finder-table td:nth-child(3){display:none}.ft-title{display:none}}

/* ---------- macOS: Read Me, About, Membership (System Settings look) ---------- */
.readme{padding:28px 36px 30px;max-width:640px;font:400 15px/1.5 var(--sf);color:var(--mac-text)}
.readme h1{font:700 30px/1.15 var(--sf);margin:0 0 16px;letter-spacing:-.01em}
.readme p{margin:0 0 14px}
.readme-note{font-size:13px;color:var(--mac-text-2);border-top:.5px solid var(--mac-sep);padding-top:14px}
.about{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 28px 24px;gap:6px;font:400 13px/1.4 var(--sf)}
.about img{width:150px;height:auto;margin-bottom:8px}
.about h1{font:700 22px/1.2 var(--sf);margin:0}
.about .about-version{color:var(--mac-text-2);margin-bottom:14px}
.about dl{display:grid;grid-template-columns:auto auto;gap:4px 12px;margin:0;text-align:left}
.about dt{font-weight:600;text-align:right;color:var(--mac-text)}
.about dd{margin:0;color:var(--mac-text-2)}
.about p{color:var(--mac-text-2);margin:16px 0 0;font-size:12px}
.window-body .membership-pane{padding:24px 28px;max-width:none;font-family:var(--sf);color:var(--mac-text);background:var(--mac-window-2);min-height:100%}
.window-body .membership-pane>img{width:170px;margin:4px 0 18px}
.window-body .membership-pane h1{font:700 26px/1.15 var(--sf);margin:0 0 10px;white-space:pre-line}
.window-body .membership-pane .mini-label{font:600 11px/1 var(--sf);color:var(--mac-text-2);letter-spacing:.02em;text-transform:uppercase}
.window-body .membership-intro{font:400 15px/1.5 var(--sf)}
.window-body .membership-columns{border:0;padding:0;margin:18px 0;gap:18px}
.window-body .membership-columns>div,.window-body .membership-card{background:var(--mac-window);border:.5px solid var(--mac-sep);border-radius:10px;padding:16px 18px}
.window-body .membership-columns h2{font:600 15px/1.3 var(--sf);margin:0 0 6px}
.window-body .membership-columns ul{font:400 13px/1.7 var(--sf);padding-left:18px;margin:0}
.window-body .membership-card strong{font:600 22px/1.2 var(--sf)}
.window-body .membership-card p,.window-body .membership-card small,.window-body .membership-pane .small,.window-body .signon-form label{font:400 13px/1.4 var(--sf);color:var(--mac-text-2)}
.window-body .membership-notice{font:400 13px var(--sf);padding:10px 12px;border-radius:8px;background:var(--mac-select-soft)}
.window-body .plain-link{font:400 12px var(--sf);color:var(--mac-accent);border:0;background:none;padding:0;margin-top:12px;cursor:default}
.window-body .membership-pane a:not(.bevel){color:var(--mac-accent);font:400 13px var(--sf)}
@container (max-width:720px){.window-body .membership-columns{grid-template-columns:1fr}}
.bevel{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 14px;border-radius:7px;border:.5px solid rgba(0,0,0,.12);background:var(--mac-window);color:var(--mac-text);font:500 13px/1 var(--sf);box-shadow:0 1px 1px rgba(0,0,0,.06);cursor:default;text-decoration:none}
.bevel:active{background:var(--mac-select-soft);border-color:rgba(0,0,0,.12)}
.bevel[type=submit],.signon-form .bevel{background:var(--mac-accent);color:#fff;border-color:transparent}
.signon-form input{height:30px;border-radius:7px;border:.5px solid var(--field-border);background:var(--field);padding:0 10px;font:400 14px var(--sf);color:var(--mac-text);width:100%;box-sizing:border-box;margin-top:4px}
.signon-form label{display:block;margin-bottom:10px}
.signon-form input:focus{outline:3px solid rgba(0,122,255,.35);outline-offset:0;border-color:var(--mac-accent)}

/* ---------- macOS: Spotlight ---------- */
.spotlight{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding-top:18vh;background:transparent}
.spotlight-box{width:min(680px,92vw);max-height:62vh;display:flex;flex-direction:column;border-radius:12px;background:var(--mac-menu);backdrop-filter:blur(50px) saturate(180%);-webkit-backdrop-filter:blur(50px) saturate(180%);box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 .5px rgba(0,0,0,.2);overflow:hidden;animation:winOpen .14s ease-out}
.spot-field{display:flex;align-items:center;gap:12px;padding:0 16px;height:52px}
.spot-field svg{width:22px;height:22px;color:var(--mac-text-2);flex-shrink:0}
.spotlight input{flex:1;min-width:0;border:0;background:none;outline:0;font:300 24px/1 var(--sf);color:var(--mac-text);-webkit-appearance:none}
.spotlight input::placeholder{color:var(--mac-text-3)}
.spotlight-results{overflow:auto;border-top:.5px solid var(--mac-sep);padding:6px}
.spotlight-results:empty{display:none}
.spot-group h3{font:600 11px/1 var(--sf);color:var(--mac-text-2);margin:8px 12px 4px;text-transform:uppercase;letter-spacing:.03em}
.spot-hit{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:7px;font:400 13px/1.2 var(--sf);color:var(--mac-text);text-decoration:none}
.spot-hit .app-icon{width:28px;height:28px;border-radius:7px;box-shadow:none}
.spot-hit>.icon{width:20px;height:20px;color:var(--mac-text-2)}
.spot-hit>span:not(.app-icon){flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.spot-hit small{font-size:11px;color:var(--mac-text-2);white-space:nowrap}
.spot-hit.selected,.spot-hit:hover{background:var(--mac-select);color:#fff}
.spot-hit.selected small,.spot-hit:hover small,.spot-hit.selected>.icon,.spot-hit:hover>.icon{color:rgba(255,255,255,.85)}
.spot-note,.spot-more{padding:8px 12px;font:400 12px/1.5 var(--sf);color:var(--mac-text-2);margin:0}

/* ---------- lock screen (macOS) ---------- */
.lockscreen{position:fixed;inset:0;z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;background:var(--wallpaper);background-size:cover;text-align:center;font-family:var(--sf)}
.lockscreen::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px)}
.lockscreen>*{position:relative;z-index:1}
.lock-graph{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.lock-graph-caption{position:absolute;left:0;right:0;bottom:104px;margin:0;font:400 13px/1.3 var(--sf);color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}
#os.ios .lock-graph-caption{display:none}
.lockscreen[hidden]{display:none}
.lock-avatar{width:110px;height:110px;border-radius:50%;background:#f0ece4;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.lock-avatar img{width:78%;height:auto}
.lock-name{font:600 22px/1.2 var(--sf);text-shadow:0 1px 8px rgba(0,0,0,.4);margin-top:8px}
.lockscreen .signon-form{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;width:240px}
.lockscreen .signon-form label{width:100%;font-size:0;margin:0}
.lockscreen .signon-form input{height:34px;border-radius:999px;background:rgba(255,255,255,.26);border:0;color:#fff;text-align:center;font:400 14px var(--sf);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin:0}
.lockscreen .signon-form input::placeholder{color:rgba(255,255,255,.7)}
.lockscreen .signon-form input:focus{outline:2px solid rgba(255,255,255,.6)}
.lockscreen .signon-form .bevel{height:34px;border-radius:999px;background:rgba(255,255,255,.26);color:#fff;border:0;width:100%;font-weight:600;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.lockscreen .signon-form .plain-link{color:rgba(255,255,255,.85);font:400 12px var(--sf);border:0;background:none;margin-top:2px}
.lockscreen .signon-error{color:#ffd1cc;font:400 12px var(--sf);margin:0;min-height:14px}
.lock-cancel{position:absolute;bottom:34px;color:rgba(255,255,255,.85);font:400 13px var(--sf);border:0;background:none;text-decoration:none}
.lock-cancel:hover{text-decoration:underline}
.lock-time{font:200 72px/1 var(--sf);letter-spacing:-.02em;text-shadow:0 2px 16px rgba(0,0,0,.35);margin-bottom:4px}
.lock-date{font:500 17px/1.2 var(--sf);opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* ---------- iOS ---------- */
#os.ios{background:var(--wallpaper);background-size:cover}
#os.ios .wallpaper{z-index:0}
.ios-status{position:relative;z-index:40;flex:0 0 calc(44px + env(safe-area-inset-top));height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 24px 0 28px;display:flex;align-items:center;justify-content:space-between;color:#fff;font:600 17px/1 var(--sf);text-shadow:0 1px 2px rgba(0,0,0,.15);transition:color .2s;pointer-events:none}
.ios-status .ios-right{display:flex;align-items:center;gap:6px}
.ios-status svg{height:12px;width:auto;display:block}
#os.ios.app-open .ios-status{color:#000;text-shadow:none;background:#fff}
body.standalone .ios-status{visibility:hidden;height:env(safe-area-inset-top);flex-basis:env(safe-area-inset-top)}
.ios-status .mb-status{pointer-events:auto;font:600 10px/1 var(--sf);padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.22);color:#fff;letter-spacing:.04em;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:none}
#os.ios.app-open .ios-status .mb-status{background:rgba(0,0,0,.08);color:#000}
.springboard{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;color:#fff}
.springboard[hidden]{display:none}
.springboard:focus{outline:0}
.ios-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 12px;padding:10px 20px 10px;align-content:start;justify-items:center}
.ios-widget{grid-column:1/-1;justify-self:stretch;min-height:150px;border-radius:22px;padding:16px 18px;background:rgba(255,255,255,.78);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);color:#1d1d1f;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.ios-widget h1{font:700 22px/1.15 var(--sf);margin:0 0 8px;letter-spacing:-.01em;white-space:pre-line}
.ios-widget p{font:400 13px/1.4 var(--sf);margin:0;color:rgba(60,60,67,.7)}
.ios-widget .ios-widget-meta{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--sf);color:rgba(60,60,67,.7);margin-top:10px}
.ios-widget .ios-widget-meta img{height:12px;width:auto}
.ios-app{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;width:100%;max-width:84px;cursor:default;color:#fff;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.ios-app:active{transform:scale(.93)}
/* Label rules name the label (>span:not(.app-icon)): the icon is a span too, and a bare `span` gave it
   the label's padding, radius, selection colour and flex:1. */
.ios-app>span:not(.app-icon){font:400 11px/1.2 var(--sf);text-shadow:0 1px 3px rgba(0,0,0,.45);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.ios-app .app-icon{width:60px;height:60px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* Equal columns; a long name may run half the gap past its cell (never into the next one), then ellipsis. */
.ios-grid .ios-app>span:not(.app-icon){max-width:calc(100% + 12px)}
.ios-pager{display:flex;justify-content:center;gap:9px;padding:8px 0 4px}
.ios-pager i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.ios-pager i.on{background:#fff}
.ios-search{align-self:center;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.28);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font:500 12px/1 var(--sf);margin:2px 0 8px}
.ios-search svg{width:12px;height:12px}
.ios-dock{flex:0 0 auto;display:flex;justify-content:space-evenly;align-items:center;margin:0 12px calc(10px + env(safe-area-inset-bottom));height:94px;border-radius:34px;background:rgba(255,255,255,.3);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%)}
.ios-dock .ios-app>span:not(.app-icon){display:none}
.app-screen{position:absolute;top:calc(44px + env(safe-area-inset-top));left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;background:#fff;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
body.standalone .app-screen{top:env(safe-area-inset-top)}
.app-screen[hidden]{display:none}
.app-screen.opening{animation:appOpen .36s cubic-bezier(.2,.8,.2,1)}
@keyframes appOpen{from{transform:scale(.12);opacity:0;border-radius:40px}to{transform:scale(1);opacity:1;border-radius:0}}
.app-screen.closing{transform:scale(.1);opacity:0}
.app-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.app-body .phone{width:100%;height:100%;flex:1;min-height:0;border:0;border-radius:0;box-shadow:none}
.app-body .desktop-app-window{border:0;border-radius:0;box-shadow:none}
.app-body .membership-pane{padding:20px;font-family:var(--sf);color:var(--mac-text)}
.app-body .membership-pane h1{font:700 26px/1.15 var(--sf);white-space:pre-line}
.app-body .membership-columns{grid-template-columns:1fr;border:0;padding:0;margin:14px 0;gap:14px}
.app-body .membership-columns>div,.app-body .membership-card{background:#f2f2f7;border-radius:12px;padding:14px 16px}
.app-body .membership-columns h2{font:600 15px/1.3 var(--sf);margin:0 0 6px}
.app-body .membership-columns ul{font:400 14px/1.6 var(--sf);padding-left:18px;margin:0}
.app-body .membership-card strong{font:600 22px/1.2 var(--sf)}
.app-body .membership-pane .mini-label{font:600 11px/1 var(--sf);color:var(--mac-text-2);text-transform:uppercase}
.app-body .membership-pane p,.app-body .membership-pane small{font:400 13px/1.4 var(--sf);color:var(--mac-text-2)}
.app-body .readme{padding:22px 20px}
.app-body .readme h1{font-size:28px}
.app-body .about{padding-top:40px}
.home-indicator{flex:0 0 calc(24px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:flex-start;padding-top:8px;background:transparent;touch-action:none}
.home-indicator button{width:134px;height:5px;border:0;border-radius:3px;background:#000;padding:0;opacity:.9}
#os.ios .lockscreen{justify-content:flex-start;padding-top:calc(60px + env(safe-area-inset-top))}
#os.ios .lockscreen .lock-time{font-size:86px;font-weight:200}
#os.ios .lock-form{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 28px}
#os.ios .lockscreen .signon-form{width:100%;max-width:340px}
#os.ios .lockscreen .signon-form input{height:46px;font-size:16px;text-align:left;padding:0 16px;border-radius:14px}
#os.ios .lockscreen .signon-form .bevel{height:46px;border-radius:14px;font-size:16px}
#os.ios .lock-cancel{bottom:calc(12px + env(safe-area-inset-bottom))}
/* Spotlight is appended to <body> after #os (os.js renderSpotlight), so it is reached as a sibling. */
#os.ios~.spotlight{align-items:stretch;padding:calc(8px + env(safe-area-inset-top)) 12px 0;background:rgba(0,0,0,.22);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
#os.ios~.spotlight .spotlight-box{width:100%;max-height:none;background:transparent;box-shadow:none;border-radius:0;animation:none}
#os.ios~.spotlight .spot-field{height:40px;padding:0;gap:8px}
#os.ios~.spotlight .spot-field-inner{flex:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.9);color:#1d1d1f}
#os.ios~.spotlight input{font:400 17px/1 var(--sf);color:#1d1d1f}
#os.ios~.spotlight .spot-field svg{width:17px;height:17px;color:rgba(60,60,67,.6)}
#os.ios~.spotlight .spot-cancel{border:0;background:none;color:#fff;font:400 17px var(--sf);padding:0 4px}
#os.ios~.spotlight .spotlight-results{border:0;padding:12px 0;color:#fff}
#os.ios~.spotlight .spot-group{background:rgba(255,255,255,.9);border-radius:12px;margin:0 0 12px;padding:6px;color:#1d1d1f}
#os.ios~.spotlight .spot-group h3{color:rgba(60,60,67,.6)}
#os.ios~.spotlight .spot-hit{color:#1d1d1f;font-size:15px;padding:8px 10px}
#os.ios~.spotlight .spot-hit .app-icon{width:34px;height:34px;border-radius:9px}
#os.ios~.spotlight .spot-note{color:rgba(255,255,255,.85)}
#os.ios~.spotlight .spot-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;padding:4px 6px 8px}
#os.ios~.spotlight .spot-apps .ios-app{width:auto;max-width:none;padding:6px 2px}
#os.ios~.spotlight .spot-apps .ios-app>span:not(.app-icon){text-shadow:none;color:#1d1d1f}

/* ---------- boot, power, dimmer ---------- */
.boot{position:fixed;inset:0;z-index:3000;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;transition:opacity .5s}
.boot.done{opacity:0;pointer-events:none}
.boot img{width:min(260px,40vw);filter:invert(1)}
.boot-bar{width:min(220px,50vw);height:6px;border-radius:3px;background:#2c2c2e;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:#f5f5f7;border-radius:3px;animation:bootFill 2.2s ease-in-out forwards}
@keyframes bootFill{from{width:0}60%{width:55%}to{width:100%}}
.power{position:fixed;inset:0;z-index:2900;background:#000;display:flex;align-items:center;justify-content:center;animation:fadeIn .4s}
.power.sleep{cursor:default}
.power-btn{width:64px;height:64px;border-radius:50%;border:1px solid #3a3a3c;background:#111;color:#f5f5f7;display:grid;place-items:center;cursor:pointer}
.power-btn svg{width:28px;height:28px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.dimmer{position:fixed;inset:0;z-index:2800;background:#000;opacity:0;pointer-events:none;transition:opacity .2s}

/* ---------- login window ---------- */
.lock-bottom{position:absolute;bottom:36px;left:0;right:0;display:flex;justify-content:center}
.lock-guest{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;color:rgba(255,255,255,.85);font:400 12px var(--sf);cursor:default}
.lock-guest-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center}
.lock-guest-avatar .icon{width:20px;height:20px}
.lock-notices{display:flex;flex-direction:column;gap:8px;width:min(360px,88vw);margin:12px 0}
.lock-notice{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.22);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);text-align:left;font:400 13px/1.3 var(--sf)}
.lock-notice .app-icon{width:30px;height:30px;border-radius:8px}
.lock-notice strong{display:block;font-weight:600}

/* ---------- desktop icons ---------- */
.desktop-icons{position:absolute;inset:0;pointer-events:none}
.dicon{position:absolute;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:4px 2px;cursor:default;pointer-events:auto;color:#fff;touch-action:none;border-radius:6px}
.dicon .app-icon{width:56px;height:56px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.dicon>span:not(.app-icon){font:400 12px/1.2 var(--sf);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.6);padding:1px 5px;border-radius:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dicon.selected .app-icon{outline:3px solid rgba(255,255,255,.35);outline-offset:2px}
.dicon.selected>span:not(.app-icon){background:var(--mac-select);text-shadow:none}
#os.no-desktop-icons .desktop-icons{display:none}

/* ---------- context menu, zoom menu ---------- */
.menu-dropdown.context{min-width:200px}
.zoom-menu{position:absolute;top:26px;left:8px;z-index:50;min-width:260px;padding:5px;border-radius:7px;background:var(--mac-menu);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);box-shadow:0 10px 36px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.18);display:flex;flex-direction:column}
.zoom-menu[hidden]{display:none}
.zoom-menu button{text-align:left;border:0;background:none;padding:5px 10px;border-radius:5px;font:400 13px var(--sf);color:var(--mac-text);cursor:default}
.zoom-menu button:hover{background:var(--mac-select);color:#fff}

/* ---------- Control Center ---------- */
.cc-popover{position:absolute;top:30px;right:10px;z-index:940;width:330px;padding:10px;border-radius:14px;background:var(--mac-menu);box-shadow:0 14px 44px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.18);color:var(--mac-text);font:400 12px var(--sf)}
.cc-popover[hidden]{display:none}
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-group{grid-column:1/-1;display:grid;gap:6px;padding:8px;border-radius:12px;background:rgba(127,127,127,.12)}
.cc-tile{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:0;background:rgba(127,127,127,.14);color:inherit;text-align:left;cursor:default;min-height:52px}
.cc-group .cc-tile{background:transparent;min-height:40px;padding:4px 6px}
.cc-tile .cc-glyph{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(127,127,127,.3);flex-shrink:0}
.cc-tile .cc-glyph svg{width:16px;height:16px}
.cc-tile.on .cc-glyph{background:var(--mac-accent);color:#fff}
.cc-text{display:flex;flex-direction:column;line-height:1.2}
.cc-text strong{font-weight:600;font-size:12px}
.cc-text small{font-size:11px;color:var(--mac-text-2)}
.cc-wide{grid-column:1/-1}
.cc-slider{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:rgba(127,127,127,.14)}
.cc-slider>span:first-child{font-weight:600}
.cc-range{display:flex;align-items:center;gap:8px}
.cc-range svg{width:16px;height:16px;flex-shrink:0;color:var(--mac-text-2)}
.cc-range input{flex:1;accent-color:#fff;height:22px}
#os.ios .cc-popover{position:fixed;inset:0;top:0;right:0;width:auto;border-radius:0;padding:calc(54px + env(safe-area-inset-top)) 16px 20px;background:rgba(0,0,0,.28);backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);color:#fff;z-index:1300}
#os.ios .cc-grid{max-width:420px;margin:auto;grid-template-columns:1fr 1fr;gap:12px}
#os.ios .cc-group{background:rgba(255,255,255,.18);border-radius:22px;grid-template-columns:1fr 1fr;grid-column:1/-1}
#os.ios .cc-tile{background:rgba(255,255,255,.18);border-radius:22px;min-height:76px}
#os.ios .cc-group .cc-tile{background:transparent}
#os.ios .cc-text small{color:rgba(255,255,255,.75)}
#os.ios .cc-slider{background:rgba(255,255,255,.18);border-radius:22px}
#os.ios .cc-range svg{color:#fff}

/* ---------- Notification Center, banners ---------- */
.nc-panel{position:absolute;top:26px;right:0;bottom:0;z-index:930;width:340px;padding:12px 14px 20px;overflow:auto;background:var(--mac-menu);box-shadow:-10px 0 40px rgba(0,0,0,.18);color:var(--mac-text);font:400 13px var(--sf);animation:ncIn .22s ease-out}
.nc-panel[hidden]{display:none}
@keyframes ncIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.nc-head{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 12px}
.nc-head strong{font:700 22px var(--sf)}
.nc-head span{color:var(--mac-text-2)}
.nc-widget{border-radius:14px;background:rgba(127,127,127,.14);padding:12px 14px;margin-bottom:10px}
.nc-widget h3{font:600 13px var(--sf);margin:0 0 8px;color:var(--mac-text-2)}
.nc-cal{display:flex;flex-direction:column}
.nc-cal-day{font:700 11px var(--sf);color:#ff3b30;letter-spacing:.04em}
.nc-cal-num{font:300 42px/1 var(--sf);margin:2px 0 6px}
.nc-cal-note{font-size:12px;color:var(--mac-text-2)}
.nc-rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nc-rooms li{display:flex;align-items:center;gap:8px}
.nc-rooms .app-icon{width:20px;height:20px;border-radius:5px;box-shadow:none}
.nc-rooms li>span:not(.app-icon){flex:1}
.nc-rooms b{font-weight:600}
.nc-list-head{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 6px}
.nc-list-head h3{font:600 13px var(--sf);margin:0;color:var(--mac-text-2)}
.nc-clear{border:0;background:rgba(127,127,127,.2);border-radius:999px;padding:3px 10px;font:500 11px var(--sf);color:inherit;cursor:default}
.nc-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(127,127,127,.14);margin-bottom:8px;line-height:1.3}
.nc-item .app-icon{width:28px;height:28px;border-radius:7px;flex-shrink:0}
.nc-item div{flex:1;min-width:0}
.nc-item strong{display:block;font-weight:600}
.nc-item span{font-size:12px;color:var(--mac-text-2)}
.nc-item small{font-size:11px;color:var(--mac-text-2);white-space:nowrap}
.nc-empty{text-align:center;color:var(--mac-text-2);padding:20px}
.banners{position:fixed;top:34px;right:12px;z-index:2000;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 24px));pointer-events:none}
#os.ios~.banners,body[data-os-mode=phone] .banners{top:calc(8px + env(safe-area-inset-top));right:12px;left:12px;width:auto}
.banner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--mac-menu);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.15);color:var(--mac-text);font:400 13px/1.3 var(--sf);animation:bannerIn .25s ease-out;pointer-events:auto}
.banner.out{opacity:0;transform:translateY(-10px);transition:all .35s}
@keyframes bannerIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.banner .app-icon{width:34px;height:34px;border-radius:8px;flex-shrink:0}
.banner div{flex:1;min-width:0}
.banner strong{display:block;font-weight:600}
.banner span{color:var(--mac-text-2);font-size:12px}
.banner small{font-size:11px;color:var(--mac-text-2)}

/* ---------- Launchpad, Mission Control ---------- */
.launchpad{position:absolute;inset:0;z-index:850;display:flex;flex-direction:column;align-items:center;padding:28px 40px;background:rgba(0,0,0,.35);backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);color:#fff;animation:fadeIn .2s}
.launchpad[hidden]{display:none}
.lp-search{margin-bottom:28px}
.lp-field{display:flex;align-items:center;gap:8px;width:280px;height:30px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.2);border:.5px solid rgba(255,255,255,.3)}
.lp-field svg{width:14px;height:14px}
.lp-field input{border:0;background:none;color:#fff;outline:0;font:400 14px var(--sf);width:100%}
.lp-field input::placeholder{color:rgba(255,255,255,.7)}
.lp-grid{flex:1;width:min(1100px,100%);display:grid;grid-template-columns:repeat(7,1fr);gap:34px 20px;align-content:start;overflow:auto}
.lp-app{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;color:#fff;font:400 13px var(--sf);text-shadow:0 1px 3px rgba(0,0,0,.5);cursor:default}
.lp-app .app-icon{width:82px;height:82px;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .1s}
.lp-app:hover .app-icon{transform:scale(1.06)}
.lp-empty{grid-column:1/-1;text-align:center;color:rgba(255,255,255,.75)}
@media(max-width:1100px){.lp-grid{grid-template-columns:repeat(5,1fr)}}
#os.mission .desktop{background:rgba(0,0,0,.12)}
#os.mission .window{transition:transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:auto;cursor:pointer}
#os.mission .window:hover{outline:4px solid rgba(255,255,255,.6)}
#os.mission .window .window-body{pointer-events:none}
#os.mission .desktop-icons{display:none}

/* ---------- Quick Look, Get Info ---------- */
.quicklook{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);animation:fadeIn .15s}
.ql-box{width:min(900px,92vw);max-height:88vh;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--mac-window);box-shadow:var(--mac-shadow);color:var(--mac-text)}
.ql-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px 0 8px;background:var(--mac-window-2);border-bottom:.5px solid var(--mac-sep);font:600 13px var(--sf)}
.ql-btn{width:22px;height:22px;border-radius:50%;border:0;background:var(--mac-select-soft);color:var(--mac-text);font:400 16px/1 var(--sf);cursor:default}
.ql-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.ql-count{font-weight:400;color:var(--mac-text-2);font-size:12px}
.ql-open{font:500 12px var(--sf);color:var(--mac-accent);text-decoration:none;padding:4px 10px;border-radius:6px;background:var(--mac-select-soft)}
.ql-body{flex:1;min-height:200px;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;background:var(--mac-window-2)}
.ql-body img,.ql-body video{max-width:100%;max-height:70vh;border-radius:6px;object-fit:contain}
.ql-body audio{width:min(480px,90%)}
.ql-text{font:400 15px/1.5 var(--sf);max-width:640px;white-space:pre-wrap;margin:0;align-self:stretch;text-align:left}
.ql-muted{color:var(--mac-text-2);text-align:center}
.info{padding:14px 16px 20px;font:400 12px/1.4 var(--sf);color:var(--mac-text)}
.info-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:.5px solid var(--mac-sep);margin-bottom:10px}
.info-head img,.info-head video,.info-head .app-icon{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0}
.info-glyph{width:56px;height:56px;display:grid;place-items:center;color:var(--mac-text-2)}
.info-glyph .icon{width:34px;height:34px}
.info-head strong{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.info-head span{color:var(--mac-text-2)}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 10px}
.info dt{color:var(--mac-text-2);text-align:right;white-space:nowrap}
.info dd{margin:0;overflow-wrap:anywhere}
.info h4{font:600 12px var(--sf);margin:12px 0 6px;color:var(--mac-text-2);border-top:.5px solid var(--mac-sep);padding-top:10px}
.info p{margin:0 0 8px;white-space:pre-wrap}
.info-open{margin-top:12px}

/* ---------- Finder columns ---------- */
.finder-columns{display:flex;height:100%;min-height:0}
.fc-col{flex:1;min-width:0;overflow:auto;border-right:.5px solid var(--mac-sep);padding:6px}
.fc-rooms{flex:0 0 190px}
.fc-items{flex:0 0 300px}
.fc-preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center}
.fc-preview .ql-body{background:transparent;min-height:0;padding:0}
.fc-preview .ql-body img,.fc-preview .ql-body video{max-height:40vh}
.fc-preview .ql-text{text-align:left;font-size:13px;max-height:30vh;overflow:auto}
.fc-meta{display:grid;grid-template-columns:auto auto;gap:4px 10px;font-size:12px;margin:0}
.fc-meta dt{color:var(--mac-text-2);text-align:right}
.fc-meta dd{margin:0;text-align:left}
.fc-item{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:5px;font-size:13px;color:inherit;text-decoration:none;cursor:default}
.fc-item .icon{width:15px;height:15px;color:var(--mac-text-2);flex-shrink:0}
.fc-item span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fc-item i{font-style:normal;color:var(--mac-text-3)}
.fc-item.selected{background:var(--mac-select);color:#fff}
.fc-item.selected .icon,.fc-item.selected i{color:#fff}
.finder-item img{width:64px;height:64px;object-fit:cover;border-radius:6px}

/* ---------- System Settings ---------- */
.settings{display:flex;height:100%;min-height:0;font:400 13px var(--sf);color:var(--mac-text)}
.st-side{flex:0 0 200px;border-right:.5px solid var(--mac-sep);overflow:auto;padding:10px 8px;background:var(--mac-sidebar)}
.st-search{margin-bottom:10px}
.st-search .ft-search{min-width:0;max-width:none;margin:0}
.st-item{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:6px;color:inherit;text-decoration:none;line-height:18px}
.st-item.selected{background:var(--mac-select);color:#fff}
.st-glyph{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#8e8e93;color:#fff;flex-shrink:0}
.st-glyph svg,.st-glyph .icon{width:13px;height:13px}
.st-appearance{background:#1c1c1e}.st-wallpaper{background:#30b0c7}.st-dock{background:#1d1d1f}.st-notifications{background:#ff3b30}.st-sound{background:#ff2d55}.st-membership{background:#007aff}.st-account{background:#5856d6}.st-about{background:#8e8e93}
.st-pane{flex:1;min-width:0;overflow:auto;padding:18px 24px 28px;background:var(--mac-window-2)}
.st-pane h2{font:700 20px var(--sf);margin:0 0 14px}
.st-pane h3{font:600 13px var(--sf);margin:0 0 8px;color:var(--mac-text-2)}
.st-group{background:var(--mac-window);border:.5px solid var(--mac-sep);border-radius:10px;padding:4px 14px;margin-bottom:16px}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:.5px solid var(--mac-sep)}
.st-row:last-child{border-bottom:0}
.st-row.st-col{flex-direction:column;align-items:flex-start}
.st-row strong{font-weight:500;display:block}
.st-row small{display:block;color:var(--mac-text-2);font-size:11px;margin-top:2px}
.st-row input[type=range]{width:200px;accent-color:var(--mac-accent)}
.st-switch{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:11px;background:#c7c7cc;position:relative;cursor:default;flex-shrink:0;transition:background .15s}
.st-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.st-switch:checked{background:#34c759}
.st-switch:checked::after{left:18px}
.st-tiles{display:flex;gap:14px;margin-top:8px}
.st-tile{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;font:400 12px var(--sf);color:inherit;cursor:default}
.st-tile i{display:block;width:72px;height:50px;border-radius:8px;border:2px solid transparent;background:linear-gradient(135deg,#fff 50%,#1e1e20 50%)}
.st-tile.st-theme-light i{background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.st-tile.st-theme-dark i{background:#1e1e20}
.st-tile.on i{border-color:var(--mac-accent)}
.st-swatches{display:flex;gap:8px}
.st-swatch{width:18px;height:18px;border-radius:50%;border:2px solid transparent;background:var(--sw);cursor:default;padding:0}
.st-swatch.on{border-color:var(--mac-text)}
.st-wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:10px 0}
.st-wall{height:76px;border-radius:8px;border:2px solid transparent;position:relative;cursor:default;padding:0;overflow:hidden}
.st-wall span{position:absolute;left:6px;bottom:4px;color:#fff;font:500 11px var(--sf);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.st-wall.on{border-color:var(--mac-accent)}
.st-actions{display:flex;gap:8px}
.st-note{font-size:12px;color:var(--mac-text-2);padding:8px 0 10px;margin:0}
.st-about{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.st-about img{width:180px;height:auto}
.st-about dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.st-about dt{color:var(--mac-text-2)}
.st-about dd{margin:0}
.password-form label{display:block;margin:8px 0;font-size:12px;color:var(--mac-text-2)}
.password-form input{display:block;width:260px;max-width:100%;height:28px;margin-top:4px;border-radius:6px;border:.5px solid var(--field-border);background:var(--field);padding:0 8px;font:400 13px var(--sf);color:var(--mac-text)}
.password-form .bevel{margin:8px 0}
.st-pane .membership-pane{padding:0;background:transparent;min-height:0}
.st-pane .membership-pane>img{width:140px;margin:0 0 12px}
.st-pane .membership-pane h1{font-size:20px}
.ios-settings{display:block;height:auto;font:400 16px var(--sf);color:#1d1d1f;background:#f2f2f7;min-height:100%;padding:0 16px 24px;color-scheme:light;--mac-window:#fff;--mac-window-2:#f2f2f7;--mac-text:#1d1d1f;--mac-text-2:rgba(60,60,67,.6);--mac-sep:rgba(60,60,67,.2);--field:#fff;--field-border:rgba(60,60,67,.2)}
.ios-settings h1{font:700 32px var(--sf);margin:0;padding:18px 0 12px}
.st-list{background:#fff;border-radius:12px;overflow:hidden}
.st-list .st-item{padding:10px 14px;border-bottom:.5px solid rgba(60,60,67,.2);border-radius:0;gap:12px}
.st-list .st-item:last-child{border-bottom:0}
.st-list .st-glyph{width:28px;height:28px;border-radius:7px}
.st-chev{margin-left:auto;color:rgba(60,60,67,.3);font-style:normal}
.st-nav{display:flex;align-items:center;gap:10px;padding:12px 0 6px}
.st-back{display:flex;align-items:center;color:var(--mac-accent);text-decoration:none;font-size:16px}
.st-back svg{width:14px;height:14px}
.st-nav strong{flex:1;text-align:center;font-weight:600;margin-right:70px}
.ios-settings .st-pane{padding:8px 0 0;background:transparent}
.ios-settings .st-pane h2{display:none}
.ios-settings .st-group{border:0;border-radius:12px;padding:0 14px}
.ios-settings .st-row{padding:11px 0}

/* ---------- iOS pages and App Library ---------- */
.ios-pages{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ios-pages::-webkit-scrollbar{display:none}
.ios-page{flex:0 0 100%;width:100%;scroll-snap-align:start;overflow:auto;display:flex;flex-direction:column}
.ios-page .ios-grid{flex:0 0 auto}
.app-library{padding:4px 16px 16px}
.al-search{padding:4px 0 14px}
.al-search .ft-search{min-width:0;max-width:none;height:36px;border-radius:10px;background:rgba(255,255,255,.3);border:0;color:#fff}
.al-search .ft-search input{color:#fff;font-size:16px}
.al-search .ft-search input::placeholder{color:rgba(255,255,255,.8)}
.al-search .ft-search svg{color:#fff}
.al-folders{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.al-folder{display:flex;flex-direction:column;align-items:center;gap:6px}
.al-folder span{font:400 12px var(--sf);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.al-grid{width:100%;aspect-ratio:1;max-width:160px;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-radius:24px;background:rgba(255,255,255,.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.al-mini{border:0;background:none;padding:0;cursor:default}
.al-mini .app-icon{width:100%;height:auto;aspect-ratio:1;box-shadow:none}
.al-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 10px;justify-items:center}

/* ---------- the Brain: the node graph of everything (brain.js) ---------- */
.window.brain-window .window-title{background:#141418;color:rgba(245,245,247,.6);border-bottom-color:rgba(255,255,255,.08)}
.window.brain-window.focused .window-title{color:#f5f5f7}
.window.brain-window .window-body{background:#0c0c12}
.brain{display:grid;grid-template-columns:1fr 0;grid-template-rows:auto 1fr auto;height:100%;min-height:0;background:#0c0c12;color:#f5f5f7;font:400 13px var(--sf);--brain-sep:rgba(255,255,255,.1)}
.brain.has-side{grid-template-columns:1fr 290px}
.brain-bar{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:.5px solid var(--brain-sep);background:#141418}
.brain-search{flex:1;min-width:0;display:flex}
.brain-search-field{flex:1;display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.12)}
.brain-search-field svg{width:14px;height:14px;color:rgba(255,255,255,.55);flex-shrink:0}
.brain-search-field input{flex:1;min-width:0;border:0;background:none;outline:0;color:#f5f5f7;font:400 14px var(--sf);-webkit-appearance:none}
.brain-search-field input::placeholder{color:rgba(255,255,255,.4)}
.brain-clear{border:0;background:rgba(255,255,255,.14);color:#f5f5f7;border-radius:6px;font:500 11px var(--sf);padding:3px 8px;cursor:default}
.brain-dims,.brain-span{display:inline-flex;border-radius:7px;background:rgba(255,255,255,.08);padding:2px;flex-shrink:0}
.brain-dims button,.brain-span button{height:24px;padding:0 10px;border:0;border-radius:5px;background:none;color:rgba(255,255,255,.7);font:500 12px var(--sf);cursor:default}
.brain-dims button.on,.brain-span button.on{background:rgba(255,255,255,.18);color:#fff}
.brain-stage{position:relative;min-height:0;min-width:0;overflow:hidden}
.brain-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.brain-note{position:absolute;left:12px;right:12px;top:10px;margin:0;font:400 12px/1.4 var(--sf);color:rgba(255,255,255,.72);text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.brain-note[hidden]{display:none}
.brain-note[data-kind=error]{color:#ffb4ab}
.brain-side{min-height:0;overflow:auto;border-left:.5px solid var(--brain-sep);background:#141418;padding:14px 14px 20px;position:relative}
.brain:not(.has-side) .brain-side{display:none}
.bs-about{margin:0 0 12px;font:400 13px/1.5 var(--sf);color:rgba(255,255,255,.7)}
.bs-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:600 14px/1 var(--sf);cursor:default;display:grid;place-items:center}
.bs-head{display:flex;align-items:center;gap:12px;padding:6px 26px 12px 0;border-bottom:.5px solid var(--brain-sep);margin-bottom:10px}
.bs-head img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#222}
.bs-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.bs-head strong{display:block;font:600 14px/1.3 var(--sf);overflow-wrap:anywhere}
.bs-head span{display:block;font:400 11px var(--sf);color:rgba(255,255,255,.55);margin-top:2px}
.bs-text{margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;font:400 13px/1.5 var(--sf);max-height:38vh;overflow:auto}
.bs-muted{color:rgba(255,255,255,.5)}
.brain-side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0 0 12px;font-size:12px}
.brain-side dt{color:rgba(255,255,255,.5);white-space:nowrap}
.brain-side dd{margin:0;display:flex;flex-wrap:wrap;gap:4px;overflow-wrap:anywhere}
.bs-chip{border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:400 11px var(--sf);padding:3px 8px;cursor:default}
.bs-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.brain-side .bevel{height:26px;padding:0 10px;border-radius:7px;border:.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;font:500 12px var(--sf);text-decoration:none;box-shadow:none}
.bs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bs-link{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:#f5f5f7;font:400 12px/1.3 var(--sf);text-align:left;padding:4px 6px;border-radius:5px;cursor:default}
.bs-link:hover{background:rgba(255,255,255,.08)}
.bs-link i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.brain-foot{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:6px 12px;border-top:.5px solid var(--brain-sep);background:#141418;font:400 11px var(--sf);color:rgba(255,255,255,.6)}
.brain-time{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.brain-time input{flex:1;min-width:80px;accent-color:#ff8a5b}
.brain-time-label{min-width:64px;color:#f5f5f7;font-weight:500;white-space:nowrap}
.brain-caption{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
@container (max-width:760px){
  .brain.has-side{grid-template-columns:1fr}
  .brain.has-side .brain-side{position:absolute;left:0;right:0;bottom:0;max-height:62%;border-left:0;border-top:.5px solid var(--brain-sep);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.4);z-index:3}
  .brain{position:relative}
  .brain-bar{flex-wrap:wrap}
  .brain-caption{display:none}
}
.brain-ios{position:relative;grid-template-columns:1fr}
.brain-ios .brain-bar{padding-top:10px;flex-wrap:wrap}
.brain-ios .brain-search{flex-basis:100%}
.brain-ios.has-side .brain-side{position:absolute;left:0;right:0;bottom:0;max-height:62%;border-left:0;border-top:.5px solid var(--brain-sep);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.4);z-index:3}
.brain-ios .brain-caption{display:none}
.brain-ios .brain-search-field{height:36px;border-radius:10px}
.brain-ios .brain-search-field input{font-size:16px}
.brain-ios .brain-dims button,.brain-ios .brain-span button{height:28px}
.brain-ios .brain-foot{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.app-body .brain{height:100%;flex:1;min-height:0}

/* ---------- Terminal ---------- */
.window[data-app="terminal"] .window-body{overflow:hidden;background:#1e1e1e;padding:0}
.window[data-app="terminal"] .window-title{background:#2a2a2c;color:#c7c7cc;border-bottom-color:#000}
.window[data-app="terminal"].focused .window-title{background:#3a3a3c;color:#f5f5f7}
.terminal-mount{height:100%;position:relative;padding:6px 4px 4px 8px;box-sizing:border-box}
.term-host{height:100%;width:100%}
.term-host .xterm{height:100%}
.term-unlock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:28px 32px;background:#1e1e1e;color:#f5f5f7;font:400 13px var(--sf)}
.term-unlock p{margin:0;max-width:460px;color:#c7c7cc}
.term-unlock input{width:280px;height:32px;border-radius:7px;border:.5px solid rgba(255,255,255,.2);background:#2c2c2e;color:#fff;padding:0 10px;font:400 14px var(--sf)}
.term-unlock button{height:30px;padding:0 14px;border-radius:7px;border:0;background:var(--mac-accent);color:#fff;font:500 13px var(--sf);cursor:default}
.term-unlock button[data-term-archive]{background:rgba(255,255,255,.14)}
.term-error{color:#ff8a80;min-height:16px}
.app-body .terminal-mount{min-height:60vh}

/* ---- Preview: the visitor's own computer (workspace.js). Home is a Finder window; TextEdit a plain-text editor. */
.home-mount,.textedit-mount{height:100%;display:flex;flex-direction:column;min-height:0}
.home-window{display:flex;flex-direction:column;height:100%;min-height:0;outline:none;background:var(--mac-window);color:var(--mac-text)}
.home-window.is-drop{box-shadow:inset 0 0 0 3px var(--mac-accent)}
.home-toolbar{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.home-actions{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.home-btn{width:auto;padding:0 8px;font-size:12px}
.home-btn[disabled]{opacity:.4}
.home-body{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr) 230px;min-height:0}
.home-side{overflow:auto;flex:none}
.home-list{overflow:auto;min-width:0;border-left:1px solid var(--mac-sep);border-right:1px solid var(--mac-sep)}
.home-head,.home-row{display:grid;grid-template-columns:22px minmax(0,1fr) 150px 70px 90px;gap:8px;align-items:center;padding:3px 10px;font-size:12px;text-align:left}
.home-head{position:sticky;top:0;background:var(--mac-window);color:var(--mac-text-3);border-bottom:1px solid var(--mac-sep);font-weight:500}
.home-row{width:100%;border:0;background:none;color:inherit;font:inherit;font-size:12px;cursor:default}
.home-row:nth-of-type(even){background:rgba(127,127,127,.06)}
.home-row.selected{background:var(--mac-accent);color:#fff}
.home-row:focus-visible{outline:2px solid var(--mac-accent);outline-offset:-2px}
.home-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-date,.home-size,.home-kind{color:var(--mac-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-row.selected .home-date,.home-row.selected .home-size,.home-row.selected .home-kind{color:rgba(255,255,255,.85)}
.home-empty{padding:24px;text-align:center}
.home-preview{padding:12px;overflow:auto;font-size:12px;display:flex;flex-direction:column;gap:8px}
.home-preview img{max-width:100%;max-height:200px;object-fit:contain;border-radius:6px;background:rgba(127,127,127,.12)}
.home-preview .bevel{margin:0 6px 6px 0}
.home-text{margin:0;max-height:200px;overflow:auto;white-space:pre-wrap;font:11px/1.45 ui-monospace,Menlo,monospace;background:rgba(127,127,127,.08);padding:8px;border-radius:6px}
.home-status{padding:4px 10px;font-size:11px;color:var(--mac-text-3);border-top:1px solid var(--mac-sep)}
.textedit-window{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--mac-window);color:var(--mac-text)}
.te-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--mac-sep)}
.te-bar .ft-btn{width:auto;padding:0 8px;font-size:12px}
.te-title{margin-left:8px;font-size:12px;font-weight:600}
.te-status{font-size:11px;color:var(--mac-text-3)}
.te-area{flex:1;min-height:0;resize:none;border:0;outline:none;padding:18px 22px;background:var(--mac-window);color:inherit;font:13px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif}
.te-foot{padding:3px 10px;font-size:11px;color:var(--mac-text-3);border-top:1px solid var(--mac-sep)}
@media (max-width:760px){
  .home-body{grid-template-columns:minmax(0,1fr)}
  .home-side{display:none}
  .home-list{border:0}
  .home-head,.home-row{grid-template-columns:22px minmax(0,1fr) 70px;padding:10px 12px;font-size:14px}
  .home-head span:nth-child(3),.home-head span:nth-child(5),.home-row .home-date,.home-row .home-kind{display:none}
  .home-preview{border-top:1px solid var(--mac-sep);max-height:45%}
  .home-btn,.te-bar .ft-btn{min-height:36px}
}

/* marlins_memories is named exactly; on the phone home screen the whole name has to fit its tile
   rather than end in an ellipsis like other long names. */
#os.ios .ios-app[data-dock="marlins-memories"] > span:last-child{font-size:10px;letter-spacing:-.035em;text-overflow:clip}

/* marlins_memories: SIMULA's own face (assets/simula/, copied unchanged) in SIMULA's colours for the
   Info header, and MADRiD's traced drawing as the icon, its drawn frame as the edge (no squircle). */
@font-face{font-family:"SimulaVision";src:url("assets/simula/Px437_IBM_PS-55_re.ttf") format("truetype");font-display:swap}
/* MADRiD's traced drawing (marlins_memories): no tile, no squircle, the drawing is the edge.
   Specific enough to stay put if a container's label rule ever reaches spans inside icons again. */
span.app-icon.icon-marlins-memories{position:relative;background:transparent;box-shadow:none;overflow:visible;border-radius:0;flex:none}
.app-icon.icon-marlins-memories > .drawing{position:absolute;inset:0;padding:0;border-radius:0;background:center/contain no-repeat;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.app-icon.icon-marlins-memories > .drawing{background-image:url("assets/marlins-memories/icon.svg")}
.info-head[data-app="marlins-memories"] strong{font:400 15px/1.1 "SimulaVision",ui-monospace,Menlo,monospace;color:#FF4D00;letter-spacing:.02em}
.info-head[data-app="marlins-memories"] span{font:400 11px/1.2 "SimulaVision",ui-monospace,Menlo,monospace;color:#FFC270;letter-spacing:.04em}
.info-head[data-app="marlins-memories"]{background:#070503;border-radius:10px;padding:10px;border-bottom:0}

/* Released files stay loose: arbitrary coordinates and overlap, with no tidy/grid action. */
.desktop-files{position:absolute;inset:0;z-index:1;pointer-events:none}
.loose-file{position:absolute;width:118px;min-height:96px;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;border-radius:5px;padding:4px;color:white;pointer-events:auto;touch-action:none;user-select:none;cursor:default}
.loose-file>svg{width:48px;height:58px;fill:#f6f2e9;stroke:#555;filter:drop-shadow(1px 3px 3px #0005)}
.loose-file>span{max-width:100%;overflow-wrap:anywhere;font:12px/1.2 var(--sf);text-shadow:0 1px 3px #000,0 1px 2px #000;text-align:center;border-radius:3px;padding:2px}
.loose-file.selected>span{background:var(--mac-select)}
.loose-file:focus-visible{outline:2px solid white;outline-offset:1px;background:#ffffff25}
.desktop-files-help{position:absolute;left:12px;bottom:77px;font:11px/1.3 var(--sf);color:white;text-shadow:0 1px 3px black;pointer-events:none;max-width:45ch}
.web-browser{height:100%;display:flex;flex-direction:column;background:var(--mac-window)}
.browser-bar{display:flex;gap:8px;padding:8px;background:var(--mac-toolbar);align-items:center;border-bottom:1px solid var(--mac-sep)}
.browser-bar input{min-width:0;flex:1;border:1px solid var(--mac-sep);background:var(--field);color:var(--mac-text);border-radius:6px;padding:5px 8px;font:12px var(--sf)}
.browser-bar button{border:0;background:transparent;color:var(--mac-text);min-width:30px;min-height:30px;font-size:20px}
.web-browser iframe{border:0;flex:1;width:100%;min-height:0;background:#111}
.desktop-file-view{padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;box-sizing:border-box;overflow:auto}
.desktop-file-view h1{font:500 15px var(--sf);overflow-wrap:anywhere;max-width:100%;margin:0}
.desktop-file-view img,.desktop-file-view video{max-width:100%;max-height:calc(100% - 80px);object-fit:contain;min-height:0}
.desktop-file-view audio{max-width:100%;flex-shrink:0}
.desktop-file-view a{color:var(--mac-accent)}
@media(max-width:700px){.mb-menus .mb-item:not(.mb-app){display:none}.mb-status-slot,.mb-right>.mb-icon{display:none}.mb-clock{font-size:10px}.dock{max-width:100vw}.dock-tray{overflow-x:auto;justify-content:flex-start;max-width:96vw}.dock-app{flex-shrink:0}.desktop-files-help{max-width:55vw;font-size:10px}.loose-file>span{font-size:11px}.window-title{touch-action:none}.window .traffic button{min-width:20px;min-height:20px}}

.shell-mode-toggle{pointer-events:auto;border:1px solid var(--mac-sep);border-radius:5px;background:var(--mac-window-2);color:var(--mac-text);padding:3px 8px;font:600 11px var(--sf);cursor:pointer;min-width:44px;white-space:nowrap}
.shell-mode-toggle:focus-visible{outline:2px solid var(--mac-accent);outline-offset:1px}
.ios-status .shell-mode-toggle{margin-left:auto;position:relative;z-index:10;min-height:32px}
@media(max-width:700px){.menubar{height:44px;flex-basis:44px}.menubar .shell-mode-toggle{min-height:44px;min-width:48px;border-radius:0}.mb-right{gap:3px}.mb-madrid{padding:0 5px}.mb-item.mb-app{padding:0 6px;font-size:12px}.ios-status{min-height:44px}.ios-status .shell-mode-toggle{min-height:44px}}
body.standalone #os.ios .ios-status{visibility:visible;height:calc(44px + env(safe-area-inset-top));flex-basis:calc(44px + env(safe-area-inset-top))}
@media(pointer:coarse){.menubar{height:44px;flex-basis:44px}.menubar .shell-mode-toggle{min-height:44px;min-width:48px}}
@media(max-width:1100px){.menubar{height:44px;flex-basis:44px}.menubar .shell-mode-toggle{min-height:44px;min-width:48px}}