html {
  background: #080a0c;
  scroll-behavior: auto;
}
body.experience-boot {
  overflow-x: hidden;
  overflow-y: auto;
  background: #080a0c;
}
body.experience-login,
body.experience-desktop {
  overflow: hidden;
}
#journey-spacer {
  height: 200dvh;
}
#journey-stage {
  position: fixed;
  inset: 0;
  z-index: 200001;
  background: #080a0c;
  color: #d5d9cf;
}
#crt-canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}
.scene-brand {
  position: absolute;
  left: 38px;
  top: 31px;
  font:
    12px/1.6 "Courier New",
    monospace;
  letter-spacing: 0.11em;
  color: #9a9e97;
  margin: 0;
}
.scene-brand strong {
  display: block;
  color: #d2d6cd;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.scene-footer {
  position: absolute;
  bottom: 27px;
  left: 36px;
  right: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  font:
    12px/1.6 "Courier New",
    monospace;
  color: #91988f;
}
.scene-status > span {
  display: block;
  color: #d2d8cb;
  margin-bottom: 7px;
}
.journey-meter {
  width: 126px;
  height: 4px;
  background: #2c342d;
  position: relative;
}
.journey-meter > i {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: #b5cab0;
}
.scroll-instruction {
  position: absolute;
  bottom: 88px;
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 18px;
  border: 2px solid var(--brand-paper, #f4f1ea);
  background: #121212;
  box-shadow: 4px 4px 0 #000;
  color: var(--brand-paper, #f4f1ea);
  font: 700 16px/1.4 var(--font-mono);
  letter-spacing: .06em;
  pointer-events: auto;
  cursor: pointer;
}
.scroll-instruction:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 5px; }
.scroll-arrow {
  display: block;
  color: var(--brand-red, #e8402a);
  animation: scroll-cue-nudge 1.6s steps(3, end) 5;
}
.scroll-instruction .journey-meter { grid-column: 2; width: 100%; height: 3px; }
@keyframes scroll-cue-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-arrow { animation: none; }
}
.scene-restart {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #91988f;
  font:
    12px "Courier New",
    monospace;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.scene-index {
  color: #a3ab9f;
  font-size: 12px;
  text-align: right;
}
.scene-status {
  min-width: 150px;
}
.scene-error {
  max-width: 290px;
  font:
    14px/1.6 var(--font-body);
  color: #c7cebf;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.scene-error .classic-button {
  margin-top: 14px;
}
.boot-caption {
  display: none;
}
/* The very same login element is projected onto the glass, then becomes interactive. */
#login-layer { position:fixed; inset:0; z-index:200003; display:grid; place-items:center; padding:20px; color:var(--brand-text); background:var(--brand-background); transform-origin:0 0; isolation:isolate; }
#login-layer.screen-projected { background:transparent; pointer-events:none; will-change:transform; }
.login-window { position:relative; inset:auto !important; transform:none !important; width:420px; max-width:100%; min-width:0; max-height:calc(100dvh - 80px); box-shadow:var(--bevel),5px 6px #003a3a50; }
.login-window > .titlebar { background:var(--brand-primary) !important; cursor:default; height:25px; }
.login-window .titlebar h1 { font-size:12px; }
.login-version { font:10px var(--font-mono); margin-right:6px; color:#bbbfe9; }
.login-content { padding:23px 25px 0; overflow:auto; font:12px/1.4 var(--font-body); }
.login-identity { display:flex; align-items:center; gap:17px; margin-bottom:20px; }
.login-avatar { width:58px; height:58px; display:grid; place-items:center; box-shadow:var(--inset); background:#a7b3ac; }
.login-avatar img { width:38px; height:38px; image-rendering:pixelated; }
.login-identity h2 { font:bold 19px/1.2 var(--font-body); letter-spacing:-.035em; margin:0 0 5px; }
.login-identity p { margin:0 0 8px; color:#444; font-size:12px; }
.login-machine { font:9px var(--font-mono); letter-spacing:.04em; color:var(--brand-muted); }
.login-rule { height:2px; background:var(--brand-border); border-bottom:1px solid var(--brand-paper); }
.login-welcome { margin:17px 0 14px; }
.login-field { display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px; align-items:center; margin:10px 0; font:12px/1.4 var(--font-body); }
.login-field input { width:100%; height:28px; border:0; border-radius:0; background:white; box-shadow:var(--inset); padding:5px 7px; color:var(--brand-text); font:13px var(--font-body); }
.login-field input[readonly] { background:#d2d2d2; }
.login-field input:focus-visible { outline:1px dotted var(--brand-primary); outline-offset:-4px; }
.login-actions { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:12px; }
.login-actions button { min-width:75px; font-size:12px; height:29px; }
#login-status { font-size:11px; color:#444; }
.system-led { display:inline-block; width:6px; height:6px; margin-right:5px; background:#467b43; box-shadow:1px 1px var(--brand-paper); }
.login-note { margin:16px 0 19px; color:var(--brand-muted); font-size:11px; }
.login-system { display:flex; justify-content:space-between; gap:10px; margin:0 -22px; padding:6px 8px; box-shadow:var(--inset); font:9px var(--font-mono); color:var(--brand-muted); }
.login-footer { position:absolute; bottom:21px; left:0; right:0; text-align:center; }
.login-back { background:transparent; color:#afd4c9; font:11px var(--font-body); padding:8px; text-decoration:underline; text-underline-offset:4px; }
.screen-projected .login-footer { visibility:hidden; }
body.experience-login,body.experience-desktop,body.experience-logout { overflow:hidden; }
body.experience-logout .scene-brand,body.experience-logout .scene-footer,body.experience-logout #scroll-instruction { visibility:hidden; }
.sound-toggle { position:fixed; z-index:210000; right:30px; bottom:80px; display:flex; align-items:center; gap:6px; min-height:29px; font-size:11px; padding:5px 9px; }
body.experience-boot .sound-toggle,body.experience-logout .sound-toggle { color:#bdc7bb; background:#151b17; box-shadow:none; border:1px solid #434d43; }
body.experience-desktop .sound-toggle { right:112px; bottom:7px; height:28px; }
body.experience-desktop .taskbar { padding-right:96px; }
body.experience-desktop .taskbar .tray { position:absolute; right:5px; }
body.experience-desktop .replay-button { display:none; }
.menu-detail { margin-left:auto; font-size:10px; color:#646464; }
.start-options button:hover .menu-detail { color:#ddd; }
.start-menu { max-height:calc(100dvh - 58px); overflow:auto; }
#start-menu:not([hidden]) { animation:start-open 140ms ease-out; transform-origin:bottom left; }
@keyframes start-open { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.system-form { padding:20px; display:grid; gap:12px; font-size:12px; }
.system-form label { display:grid; gap:6px; }
.system-form input,.system-form select { width:100%; min-height:30px; padding:5px 8px; border:0; border-radius:0; box-shadow:var(--inset); background:var(--brand-paper); }
.system-form .classic-button { justify-self:end; min-width:80px; }
.find-results { display:grid; gap:2px; max-height:240px; overflow:auto; }
.find-results button { text-align:left; padding:8px; background:var(--brand-paper); color:var(--brand-text); }
.find-results button:hover { background:var(--brand-primary); color:white; }
.welcome-toast { position:absolute; right:14px; bottom:15px; padding:12px 17px; background:var(--brand-paper); border:1px solid var(--brand-text); box-shadow:3px 3px #004f4f50; font-size:12px; z-index:10000; }
.welcome-toast small { display:block; margin-top:5px; color:var(--brand-muted); }
.portfolio-layer.leaving { pointer-events:none; animation:session-out 240ms ease-in forwards; }
@keyframes session-out { to { opacity:0; } }
@media(max-width:760px) { .login-content { padding:19px 20px 0; } .login-field input { font-size:16px; height:34px; } .login-system { margin:0 -17px; font-size:8px; } .login-machine { font-size:8px; } .sound-toggle { right:14px; bottom:64px; } body.experience-desktop .sound-toggle { right:89px; bottom:7px; padding:4px 7px; } body.experience-desktop .sound-toggle [data-sound-label] { display:none; } body.experience-desktop .taskbar { padding-right:36px; } }
@media(prefers-reduced-motion:reduce) { #start-menu:not([hidden]),.portfolio-layer.leaving { animation:none; } }
.portfolio-layer {
  position: fixed;
  inset: 0;
  background: var(--brand-background);
  z-index: 200004;
}
.portfolio-layer.entering {
  animation: desktop-in 0.25s linear;
}
@keyframes desktop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.compact-boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #101614;
}
.compact-boot-window {
  width: 320px;
  max-width: calc(100vw - 40px);
  color: #babfaf;
  font:
    14px/1.6 "Courier New",
    monospace;
}
.compact-boot-window img {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  margin-bottom: 24px;
}
.compact-boot-window h1 {
  font-size: 18px;
  margin: 0 0 19px;
}
.compact-boot-window p {
  font-size: 13px;
  line-height: 1.7;
}
.compact-progress {
  height: 15px;
  border: 1px solid #5a6f58;
  padding: 2px;
  margin-top: 25px;
}
.compact-progress > i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #a0b49a 0 12px,
    transparent 12px 15px
  );
  transform-origin: left;
  transform: scaleX(0);
}
/* Inside the computer: keep the operating system proportions, not a hero layout. */
.portfolio-layer .wallpaper {
  transform: none;
  top: auto;
  bottom: 72px;
  right: 34px;
  width: auto;
  color: #5ca59b;
  text-align: right;
}
.portfolio-layer .wordmark {
  font:
    700 30px/1 var(--font-body);
  letter-spacing: -0.05em;
  text-shadow: 1px 1px #004c4a;
}
.portfolio-layer .wordmark span {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  margin-left: 7px;
}
.portfolio-layer .wallpaper p {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0;
}
.portfolio-layer .wallpaper-rule,
.portfolio-layer .wallpaper > span,
.portfolio-layer .desktop-caption {
  display: none;
}
.portfolio-layer .desktop {
  background: var(--brand-background);
}
.portfolio-layer .depth-button {
  display: none;
}
.portfolio-layer .desktop-icons {
  top: 24px;
}
.experiment-body {
  overflow: auto;
  background: var(--brand-paper);
  padding: 20px;
}
.experiment-body > p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 550px;
}
.experiment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.experiment-window {
  left: 180px;
  top: 88px;
  width: 650px;
  height: min(600px, calc(100dvh - 145px));
}
.experiment-grid .file-preview {
  aspect-ratio: 1.35;
}
.portfolio-layer .about-window {
  top: 120px;
}
.portfolio-layer .work-window {
  top: 64px;
}
.replay-button {
  height: 33px;
  font:
    12px var(--font-body);
  white-space: nowrap;
  padding: 5px 9px;
}
@media (max-width: 760px) {
  #journey-spacer {
    height: 200dvh;
  }
  .scene-brand {
    left: 20px;
    top: 20px;
  }
  .scene-footer {
    left: 20px;
    right: 20px;
    bottom: 24px;
  }
  .scroll-instruction { bottom: 92px; font-size: 14px; gap: 8px 12px; padding: 10px 14px; }
  .scene-index {
    display: none;
  }
  .login-content {
    padding: 24px 20px;
  }
  .login-identity {
    gap: 15px;
  }
  .login-identity h2 {
    font-size: 18px;
  }
  .login-field {
    grid-template-columns: 75px minmax(0, 1fr);
  }
  .login-footer {
    font-size: 12px;
    bottom: 14px;
  }
  .portfolio-layer .desktop-icons {
    top: 37px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .portfolio-layer .desktop-icons .external-icon {
    display: none;
  }
  .portfolio-layer .work-window {
    top: 128px;
  }
  .experiment-window {
    left: 8px;
    top: 128px;
    width: calc(100vw - 16px);
    height: calc(100dvh - 203px);
  }
  .experiment-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-layer .wallpaper {
    right: 24px;
    bottom: 60px;
  }
  .portfolio-layer .wordmark {
    font-size: 27px;
  }
  .replay-button {
    padding: 5px 7px;
  }
  .tray {
    padding: 0 7px;
  }
  .login-identity img {
    width: 36px;
    height: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-layer.entering {
    animation: none;
  }
  #login-layer {
    scroll-behavior: auto;
  }
}
.portfolio-layer .desktop-icons {
  gap: 12px;
}
.desktop-icon.selected > span:not(.shortcut-arrow) {
  background: var(--brand-primary);
  outline: 1px dotted #eee;
}
.project-file.selected .file-name {
  background: var(--brand-primary);
  color: var(--brand-paper);
}
.project-file.selected .file-preview {
  outline: 1px dotted var(--brand-primary);
  outline-offset: 3px;
}
.desktop-icon:hover img {
  filter: brightness(1.05) drop-shadow(2px 3px 0 #006969);
}
.project-window .project-source {
  margin-left: auto;
  font-size: 12px;
}
.project-window [data-role="counter"] {
  min-width: 47px;
  text-align: center;
  font-size: 12px;
}
.project-window [data-role="artwork"] {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.project-window .actual-size [data-role="artwork"] {
  max-width: none;
  max-height: none;
}
.image-error {
  color: white;
  max-width: 290px;
  padding: 20px;
  line-height: 1.6;
}
.portfolio-layer .window {
  animation: none;
  transform-origin: top left;
}
.desktop-selection {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: #00008025;
  border: 1px dotted #d4e6de;
}
.clock-button {
  background: transparent;
  padding: 3px 0;
  font-size: 12px;
  color: var(--brand-text);
}
.system-properties dl {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 10px 15px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  margin: 20px 0 25px;
}
.system-properties dt {
  color: var(--brand-muted);
}
.system-properties dd {
  margin: 0;
}
.portfolio-layer .recycle-icon {
  margin-top: 12px;
}
.portfolio-layer .window.active {
  box-shadow:
    var(--bevel),
    6px 7px #003d3d50;
}
.portfolio-layer .window:not(.active) {
  box-shadow:
    var(--bevel),
    3px 4px #003d3d40;
}
.task-buttons .task-button {
  min-width: 105px;
  flex-shrink: 0;
  width: 165px;
}
.portfolio-layer .desktop {
  overscroll-behavior: none;
}
.files-area,
.viewer-canvas,
.dialog-content,
.experiment-body,
.notepad-body {
  overscroll-behavior: contain;
}
.experiment-body {
  min-height: 0;
  flex: 1;
}
.window.maximized .dialog-content {
  flex: 1;
}
.window.maximized .notepad-body {
  flex: 1;
}
.viewer-canvas {
  overflow: auto;
}
.viewer-toolbar {
  flex-shrink: 0;
}
.project-window .viewer-canvas {
  flex-basis: 0;
}
.window .titlebar {
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .portfolio-layer .desktop-icons {
    left: 8px;
    right: 8px;
    top: 25px;
    width: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
  .portfolio-layer .desktop-icon {
    width: auto;
    font-size: 12px;
  }
  .portfolio-layer .desktop-icon img {
    width: 30px;
    height: 30px;
  }
  .portfolio-layer .desktop-icon.external-icon,
  .portfolio-layer .desktop-icon.recycle-icon {
    display: none;
  }
  .mobile-app {
    left: 6px !important;
    top: 108px !important;
    right: auto !important;
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 162px) !important;
    max-height: none !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
  }
  .mobile-app .titlebar {
    cursor: default;
  }
  .mobile-app [data-window-action="maximize"] {
    display: none;
  }
  .task-buttons .task-button {
    min-width: 80px;
    width: 115px;
  }
  .portfolio-layer .tray-icon,
  .portfolio-layer .taskbar-divider,
  .portfolio-layer .quick-desktop {
    display: none;
  }
  .project-window .viewer-toolbar {
    gap: 4px;
  }
  .project-window .viewer-toolbar .classic-button {
    font-size: 12px;
  }
  .project-window .project-source {
    font-size: 12px;
  }
  .project-window .toolbar-divider {
    display: none;
  }
  .experiment-grid {
    grid-template-columns: 1fr;
  }
  .desktop-hint {
    left: 18px;
  }
  .window .titlebar h1,
  .window .titlebar h2 {
    font-size: 13px;
  }
  .portfolio-layer .wallpaper {
    right: 25px;
    bottom: 42px;
  }
  .scene-brand {
    font-size: 12px;
  }
  .scene-status > span {
    font-size: 12px;
  }
}
#login-layer.logging-in::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #d5eadc;
  animation: login-pulse 180ms ease-out;
  z-index: 5;
}
#login-layer.logging-in,
#login-layer.logging-in * {
  cursor: wait !important;
}
@keyframes login-pulse {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.09;
  }
  65% {
    opacity: 0.025;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #login-layer.logging-in::before {
    display: none;
  }
}
.window.mobile-app .dialog-content {
  min-height: 0;
}
.portfolio-layer .desktop-icons .desktop-icon {
  user-select: none;
}
.portfolio-layer .desktop-icons .desktop-icon img {
  pointer-events: none;
}
.window button {
  touch-action: manipulation;
}
.window input {
  cursor: text;
}
.mobile-app .notepad-body {
  flex: 1;
}
.project-window .project-description {
  max-height: 110px;
}
.project-file:hover .file-preview {
  transform: none;
  box-shadow: 2px 2px #d2d2d2;
}
.project-file:hover .file-name {
  background: transparent;
  color: var(--brand-primary);
  text-decoration: underline;
}
.project-file.selected .file-name,
.project-file.selected:hover .file-name {
  background: var(--brand-primary);
  color: var(--brand-paper);
  text-decoration: none;
}
/* Removing the journey never changes the screen's CSS-pixel dimensions. */
html { scrollbar-width:none; }
html::-webkit-scrollbar { width:0; height:0; }
.resize-grip { position:absolute; right:4px; bottom:4px; width:14px; height:14px; padding:0; cursor:nwse-resize; background:repeating-linear-gradient(135deg,transparent 0 3px,var(--brand-border) 3px 4px,var(--brand-paper) 4px 5px); clip-path:polygon(100% 0,100% 100%,0 100%); }
.window.maximized .resize-grip,.window.mobile-app .resize-grip { display:none; }
.window .resize-grip:focus-visible { outline:2px solid var(--brand-primary); }
body.experience-desktop .taskbar { padding-right:213px; }
@media(max-width:760px) { body.experience-desktop .taskbar { padding-right:128px; } }

/* Origin Dot: the supplied square lockup, kept at its original proportions. */
.origin-logo { display:block; object-fit:contain; image-rendering:auto; }
.scene-brand .origin-logo { width:96px; height:96px; margin-bottom:24px; }
.portfolio-layer .wordmark .origin-logo { width:144px; height:144px; margin:0 0 24px auto; }
.portfolio-layer .wordmark { text-shadow:none; }
.login-avatar { width:96px; height:96px; flex:0 0 96px; background:var(--brand-ink); box-shadow:none; }
.login-identity .login-avatar .origin-logo { width:96px; height:96px; image-rendering:auto; }
.login-identity { gap:24px; }
.compact-boot-window img.origin-logo { width:96px; height:96px; margin:0 auto 24px; image-rendering:auto; }
.note-signature .origin-logo { width:96px; height:96px; margin:24px 0; }
.start-banner { background:var(--brand-ink); color:var(--brand-paper); }
@media (max-width:480px) {
  .login-identity { gap:16px; }
  .portfolio-layer .wordmark .origin-logo { width:96px; height:96px; }
}

/* Landing stays dark in either desktop theme. All labels remain native HTML. */
body.experience-boot,#journey-stage,#crt-canvas,.compact-boot { background:var(--brand-ink); }
#journey-stage:focus { outline:none; }
.scene-brand,.scene-footer { pointer-events:none; }
.scene-brand,.scene-footer,.scroll-instruction { z-index:2; }
.scene-status > span { color:#c4c3b9; }
.compact-boot { pointer-events:none; z-index:1; }
.compact-boot-window { text-align:center; }
@media(max-width:760px) {
  .scene-brand .origin-logo { width:64px; height:64px; margin-bottom:16px; }
  .scene-brand { font-size:10px; }
  .scene-footer { bottom:22px; }
  .scene-status > span { font-size:11px; }
  body.experience-boot .sound-toggle { bottom:26px; }
}
@media(max-height:550px) {
  .scene-brand { top:18px; left:20px; font-size:10px; }
  .scene-brand .origin-logo { width:48px; height:48px; margin-bottom:8px; }
  .scroll-instruction { bottom:48px; padding:8px 12px; font-size:13px; gap:6px 10px; }
  .scene-footer { bottom:10px; }
  body.experience-boot .sound-toggle { bottom:12px; }
}

body.experience-returning{overflow:hidden;}
body.experience-returning .theme-landing{visibility:hidden;pointer-events:none;}