/* Refine the existing desktop; keep its windows, controls and proportions. */
html,body.experience-boot,#journey-stage,#crt-canvas,.compact-boot { background:var(--brand-background); }
.desktop,.portfolio-layer,.portfolio-layer .desktop,#login-layer { background:var(--brand-background); }
.window > .titlebar,.window.active > .titlebar,.login-window > .titlebar { background:var(--brand-primary) !important; color:var(--brand-paper); }
.window:not(.active) > .titlebar { background:var(--brand-secondary) !important; color:var(--brand-paper); }
.titlebar h1,.titlebar h2 { font-family:var(--font-body); font-weight:500; }
.explorer-sidebar,.notepad-body,.project-description,.welcome-toast { background:var(--brand-paper); color:var(--brand-text); }
.sidebar-rule,.wallpaper-rule,.login-rule { background:var(--brand-border); }
.start-banner { background:var(--brand-primary); color:var(--brand-paper); }
.start-logo { width:16px; height:16px; padding:0; background:transparent; transform:none; text-shadow:none; }
.start-logo img { display:block; width:16px; height:16px; image-rendering:pixelated; }
.task-button.active { background:var(--brand-paper); }
.desktop-icon img,.desktop-icon:hover img { filter:none; }
.desktop-icon > span:not(.shortcut-arrow) { text-shadow:none; color:var(--brand-paper); }
.desktop-icon:hover > span:not(.shortcut-arrow),.desktop-icon.selected > span:not(.shortcut-arrow),.desktop-icon:focus-visible > span:not(.shortcut-arrow) { background:var(--brand-graphite); }
.desktop-hint,.portfolio-layer .wallpaper p,.login-back { color:var(--brand-paper); }
.portfolio-layer .wallpaper { right:64px; bottom:64px; text-align:left; }
.portfolio-layer .wordmark { font-size:0; line-height:1; }
#desktop-brand { display:block; width:384px; height:384px; image-rendering:pixelated; }
.portfolio-layer .wallpaper p { margin-top:var(--space-3); font:11px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--brand-graphite); }
.scene-brand,.scene-footer,.scene-status > span,.scene-index,.scene-skip,.scene-restart,.scroll-instruction { font-family:var(--font-mono); color:var(--brand-paper); }
.journey-meter { background:var(--brand-graphite); }
.journey-meter > i { background:var(--brand-red); }
.system-led { background:var(--brand-red); box-shadow:none; border-radius:50%; }
.compact-progress > i { background:var(--brand-red); }
.compact-boot-window { color:var(--brand-paper); }
.compact-boot-window h1,.login-identity h2,.explorer-sidebar h2,.notepad-body h2,.experiment-body > h2,.secure-body h3 { font-family:var(--font-display); font-weight:600; letter-spacing:var(--display-tracking); text-transform:uppercase; }
.login-identity h2 { font-size:26px; }
.notepad-body h2 { font-size:40px; }
.notepad-body p,.dialog-content p,.project-description p { font-family:var(--font-body); }
.note-meta,.note-signature,.statusbar,.address-field,.login-system { font-family:var(--font-mono); }
.login-content,.login-field,.login-machine,.login-version { font-family:var(--font-body); }
.login-content,.login-identity p,.login-note,#login-status { color:var(--brand-text); }
.login-version { color:var(--brand-paper); }
input:focus-visible { outline:2px solid var(--brand-text); outline-offset:2px; }
.desktop-icon:focus-visible,.scene-skip:focus-visible,.scene-restart:focus-visible,.login-back:focus-visible { outline:2px dotted var(--brand-paper); outline-offset:2px; }
.window.dragging { will-change:transform; }
.desktop-selection { width:1px; height:1px; transform-origin:top left; background:color-mix(in srgb,var(--brand-paper) 15%,transparent); border:0; outline:1px dotted var(--brand-paper); }
.secure-window { left:200px; top:70px; width:520px; height:530px; min-width:320px; }
.secure-body { display:flex; flex-direction:column; min-height:0; flex:1; overflow:auto; }
.secure-login { padding:var(--space-3); display:grid; gap:8px; font-size:14px; }
.secure-heading { display:flex; align-items:center; gap:var(--space-3); margin-bottom:8px; }
.secure-heading img,.secure-empty img { image-rendering:pixelated; flex-shrink:0; }
.secure-body h3 { font-size:26px; line-height:1.1; margin:0 0 8px; }
.secure-body p { margin:0; line-height:1.6; }
.secure-login input { width:100%; border:0; border-radius:0; min-height:36px; padding:8px; box-shadow:var(--inset); background:var(--brand-paper); }
.secure-login .secure-status { min-height:42px; font:12px/1.5 var(--font-mono); color:var(--brand-text); padding-top:8px; }
.secure-status[role=alert] { font-weight:500; white-space:pre-line; }
.secure-actions { display:flex; justify-content:flex-end; gap:var(--space-1); }
.secure-actions button { min-width:88px; }
.secure-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px; flex-shrink:0; }
.secure-authenticated { font:11px/1.4 var(--font-mono); }
.secure-files { background:var(--brand-paper); padding:var(--space-3); flex:1; min-height:0; overflow:auto; }
.secure-empty { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; height:100%; gap:16px; max-width:34em; }
.secure-empty h3 { margin:0; }
.secure-files dl { display:grid; grid-template-columns:1fr 2fr; gap:8px; }
.secure-files dd { margin:0; }
.secure-media { aspect-ratio:4/3; background:var(--brand-ink); margin:16px 0; display:grid; place-items:center; }
.secure-media img,.secure-media video { width:100%; height:100%; max-height:450px; object-fit:contain; }
.secure-gallery-controls { display:flex; align-items:center; justify-content:space-between; }
.secure-file .file-preview .secure-folder { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; }
@media (min-width:901px) and (max-height:780px) {
  .portfolio-layer .desktop-icons { display:grid; grid-template-columns:repeat(2,84px); gap:8px; align-content:start; width:176px; }
  .portfolio-layer .desktop-icons .desktop-icon { width:84px; }
  .portfolio-layer .recycle-icon { margin:0; }
  #desktop-brand { width:288px; height:288px; }
}
@media (max-width:900px) {
  .portfolio-layer .desktop-icons { display:flex; flex-direction:row; align-items:flex-start; overflow-x:auto; gap:4px; padding:4px; top:12px; scrollbar-width:thin; }
  .portfolio-layer .desktop-icon { flex:0 0 76px; min-height:76px; }
  .portfolio-layer .desktop-icon.recycle-icon { display:flex; margin:0; }
  .mobile-app { top:104px !important; height:calc(100dvh - 166px) !important; }
  .portfolio-layer .wallpaper { right:24px; bottom:64px; }
  #desktop-brand { width:192px; height:192px; }
  .window-controls button { width:36px; height:36px; line-height:32px; }
  .window .titlebar { min-height:44px; height:44px; }
  .classic-button,.menubar button,.folders button,.popup-menu button,.popup-menu a,.clock-button { min-height:44px; }
  .secure-login { padding:16px; }
  .secure-login input { min-height:44px; font-size:16px; }
  .secure-files { padding:16px; }
  .taskbar { height:54px; }
  .task-button,.start-button { min-height:44px; height:44px; }
  .desktop { height:calc(100dvh - 54px); }
  body.experience-desktop .sound-toggle { min-width:44px; min-height:44px; height:44px; bottom:5px; }
  .login-window { max-height:calc(100dvh - 88px); }
}
@media (max-width:480px) {
  .explorer-sidebar { width:100px; padding:12px 8px; }
  .explorer-sidebar > p { display:none; }
  .secure-heading { gap:16px; }
  .secure-authenticated { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .window.dragging { will-change:auto; } }

/* Web projects occupy the existing Secure window without leaving the portfolio. */
.secure-web-view .secure-body { overflow:hidden; }
.secure-page-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:12px var(--font-body); }
.secure-page-host { position:relative; flex:1; min-height:0; overflow:hidden; background:var(--brand-ink); }
.secure-page-frame { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:#07090e; }

/* Each portfolio file opens as a complete, scrollable project website. */
.project-site-window { width:min(1000px,calc(100vw - 160px)); height:min(780px,calc(100dvh - 110px)); min-width:320px; container-type:inline-size; }
.project-page-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding:8px; border-bottom:1px solid var(--brand-border); }
.project-page-toolbar > span { font:12px var(--font-mono); padding-right:8px; }
.project-page { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; background:var(--brand-paper); color:var(--brand-ink); outline:none; }
.project-page:focus-visible { outline:2px solid var(--brand-red); outline-offset:-2px; }
.project-page-intro { padding:clamp(24px,6cqw,64px); }
.project-page-category { margin:0 0 20px; font:12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.project-page-intro h1 { margin:0 0 24px; max-width:15ch; font:600 clamp(36px,7cqw,76px)/.98 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; overflow-wrap:anywhere; }
.project-page-summary { max-width:42em; margin:0 0 32px; font:16px/1.7 var(--font-body); }
.project-page-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:16px; border-top:1px solid var(--brand-graphite); font:12px/1.6 var(--font-mono); }
.project-page-gallery figure { margin:0; }
.project-page-gallery img { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
.project-page-gallery img[hidden] { display:none; }
.project-page-gallery figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 24px 28px; font:12px/1.5 var(--font-mono); }
.project-page-gallery figcaption > span:last-child { white-space:nowrap; }
.project-page-image-error { padding:32px; }
.project-page-footer { padding:clamp(24px,6cqw,64px); background:var(--brand-ink); color:var(--brand-paper); display:grid; gap:24px; }
.project-page-footer > span { font:12px var(--font-mono); text-transform:uppercase; }
.project-page-footer > button[data-next-project] { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0; text-align:left; background:transparent; color:inherit; font:600 clamp(28px,5cqw,48px)/1.15 var(--font-display); }
.project-page-footer > .classic-button { justify-self:start; }
.project-page-footer > button[data-next-project]:hover { text-decoration:underline; text-underline-offset:5px; }

/* Wide native hit areas on all eight sides, using the existing pixel cursors. */
.window { min-height:200px; }
.work-window { min-width:320px; container-type:inline-size; }
.window > .resize-handle { position:absolute; z-index:6; touch-action:none; user-select:none; padding:0; }
.window > .resize-handle[data-resize="n"] { left:16px; right:16px; top:0; height:6px; }
.window > .resize-handle[data-resize="s"] { left:16px; right:20px; bottom:0; height:6px; }
.window > .resize-handle[data-resize="w"] { left:0; top:16px; bottom:16px; width:6px; }
.window > .resize-handle[data-resize="e"] { right:0; top:16px; bottom:20px; width:6px; }
.window > .resize-handle:is([data-resize="nw"],[data-resize="ne"],[data-resize="sw"],[data-resize="se"]) { width:18px; height:18px; }
.window > [data-resize="nw"] { left:0; top:0; }
.window > [data-resize="ne"] { right:0; top:0; }
.window > [data-resize="sw"] { left:0; bottom:0; }
.window > .resize-handle[data-resize="se"] { right:0; bottom:0; clip-path:none; background:linear-gradient(135deg,transparent 55%,var(--brand-graphite) 55% 61%,transparent 61% 70%,var(--brand-graphite) 70% 76%,transparent 76%); box-shadow:none; }
.window.resizing { user-select:none; }
.window.resizing iframe { pointer-events:none; }
.window.maximized > .resize-handle,.window.mobile-app > .resize-handle { display:none; }
.window.mobile-app { min-height:0; }
.statusbar .resize-grip { visibility:hidden; }
@container (max-width:540px) {
  .explorer-sidebar { display:none; }
  .work-window .toolbar { flex-wrap:wrap; }
  .work-window .file-grid:not(.list-view) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-page-meta { flex-direction:column; }
}
.secure-page-loading { position:absolute; inset:0; display:grid; place-items:center; color:var(--brand-paper); font:12px var(--font-mono); }
.secure-web-view.dragging .secure-page-frame { pointer-events:none; }
@media(max-width:600px) { .secure-page-name { display:none; } }