/* passport.exe · Windows 98-style travel diary
   Layout idea: a teal CRT desktop; windows open full-screen above the taskbar on
   phones and float on larger screens; everything sits under a scanline + bloom glass. */
@font-face{font-family:"W95FA";src:url(fonts/w95fa.woff2) format("woff2");font-display:block}
@font-face{font-family:"Fixedsys";src:url(fonts/fixedsys.woff2) format("woff2");font-display:block}
:root{
  --teal:#108484;
  --face:#c3c3c3;
  --hi:#ffffff;
  --lt:#dfdfdf;
  --lo:#828282;
  --dk:#000000;
  --navy:#000a7a;
  --blue:#1a62c9;
  --ink:#000000;
  --f-ui:"W95FA",Tahoma,"MS Sans Serif",Geneva,sans-serif;
  --f-mono:"Fixedsys","Courier New",monospace;
  --bar:48px;
  --raise:inset -1px -1px var(--dk),inset 1px 1px var(--lt),inset -2px -2px var(--lo),inset 2px 2px var(--hi);
  --press:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--lt),inset 2px 2px var(--lo);
  --sink:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--lt),inset 2px 2px var(--dk);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#000;color:var(--ink);font:15px/1.3 var(--f-ui);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
button,input{font:inherit;color:inherit}
img{display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:focus-visible{outline:1px dotted #000;outline-offset:-5px}

/* ---------- buttons ---------- */
.btn{background:var(--face);border:0;border-radius:0;padding:5px 16px;min-width:80px;box-shadow:var(--raise);cursor:pointer;color:#000;line-height:1.1}
.btn:active,.btn.down{box-shadow:var(--press);padding:6px 15px 4px 17px}
.btn.default{box-shadow:inset 0 0 0 1px #000,inset -2px -2px var(--dk),inset 2px 2px var(--hi),inset -3px -3px var(--lo),inset 3px 3px var(--lt)}

/* ---------- desktop ---------- */
.desk{position:fixed;inset:0 0 calc(var(--bar) + env(safe-area-inset-bottom,0px)) 0;overflow:hidden;
  background:radial-gradient(ellipse 85% 70% at 50% 46%,#18a0a0 0%,#119090 38%,#0b7272 78%,#075858 100%)}
.icons{list-style:none;margin:0;padding:12px max(6px,env(safe-area-inset-left)) 0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:94px;position:relative;z-index:1}
.icon{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:4px 2px;background:none;border:0;cursor:pointer;color:#f2f2f2;text-align:center}
.icon img{width:48px;height:48px}
.icon{text-decoration:none}
.icon .photo-ico{object-fit:contain;filter:drop-shadow(1px 1px 0 rgb(0 0 0 / .35))}
.icon.sel .photo-ico{filter:brightness(.6) sepia(1) hue-rotate(185deg) saturate(3)}
.icon span{font-size:14px;line-height:1.15;padding:0 3px 1px;color:#e9f2f2;text-shadow:0 1px 1px rgb(0 0 0 / .35)}
.icon.sel img{filter:brightness(.55) sepia(1) hue-rotate(185deg) saturate(5)}
.icon.sel span{background:#000a7a;color:#fff;outline:1px dotted #fff;text-shadow:none}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%{opacity:1}100%{opacity:.35}}

/* ---------- windows ---------- */
.windows{position:absolute;inset:0;z-index:5;pointer-events:none}
.win{position:absolute;display:flex;flex-direction:column;padding:4px;background:var(--face);box-shadow:var(--raise);pointer-events:auto;min-width:260px}
.win[hidden]{display:none!important}
.win.opening{animation:ghost .14s steps(2,jump-none) both}
@keyframes ghost{0%{opacity:.4}100%{opacity:1}}
.win-title{position:relative;display:flex;align-items:center;gap:7px;height:34px;padding:0 3px 0 6px;flex:none;color:#fff;touch-action:none;
  background:linear-gradient(90deg,var(--navy) 0%,#0b2a9a 45%,var(--blue) 100%)}
.win-title::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(255 255 255 / .06) 0 1px,transparent 1px 3px)}
.win:not(.active) .win-title{background:linear-gradient(90deg,#7b7b7b,#adadad);color:#d8d8d8}
.win-title img{width:22px;height:22px;flex:none}
.win-title b{flex:1;font-size:18px;font-weight:400;-webkit-text-stroke:.55px currentColor;paint-order:stroke fill;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 0 rgb(0 0 0 / .35)}
.tb{position:relative;z-index:1;width:30px;height:26px;min-width:0;padding:0;display:grid;place-items:center;font:700 16px/1 var(--f-ui);color:#000}
.tb:active{padding:2px 0 0 2px}
.tb.mn{margin-right:3px}
.tb.mn::before{content:"";width:10px;height:2px;background:#000;translate:-1px 6px}
.menubar{display:flex;gap:4px;padding:5px 4px 6px;flex:none;font-size:15px}
.menubar span{padding:1px 7px}
.menubar u{text-decoration:none;border-bottom:1px solid currentColor;line-height:.95;display:inline-block}
.addr{display:flex;align-items:center;gap:8px;padding:2px 4px 6px;flex:none;font-size:15px}
.addr output{flex:1;display:flex;align-items:center;gap:5px;background:#fff;padding:3px 6px;box-shadow:var(--sink);white-space:nowrap;overflow:hidden;font-size:14px}
.addr output img{width:16px;height:16px;flex:none}
.win-body{flex:1;min-height:0;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.win-body.sunk{box-shadow:var(--sink);padding:2px}
.paper{background:radial-gradient(ellipse 75% 60% at 50% 52%,#ffffff 0%,#f6f6f6 35%,#d9d9d9 75%,#b9b9b9 100%)}
.grey{background:radial-gradient(ellipse 75% 60% at 50% 52%,#f0f0f0 0%,#d6d6d6 40%,#b3b3b3 80%,#9a9a9a 100%)}
.status{display:flex;gap:3px;padding-top:4px;flex:none}
.status span{flex:1;padding:3px 6px;font-size:14px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status span:last-child{flex:0 0 auto;min-width:96px}

/* folder view */
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px 6px;align-content:start;padding:14px 8px 20px;min-height:100%}
.file{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:2px;cursor:pointer;text-align:center;color:#000}
.file .thumb{width:72px;height:96px;display:grid;place-items:end center;overflow:hidden}
.file .thumb img{max-width:72px;max-height:96px;width:auto;height:auto;box-shadow:0 0 0 1px rgb(0 0 0 / .45)}
.file .thumb img.ico{width:48px;height:48px;box-shadow:none;margin-bottom:22px}
.file span{font-size:14px;line-height:1.15;padding:0 2px}
.file:focus-visible{outline:0}
.file:focus-visible span,.file.sel span{background:#000a7a;color:#fff;outline:1px dotted #000}
.file.sel img{filter:brightness(.6) sepia(1) hue-rotate(185deg) saturate(4)}

/* photo viewer (media player style) */
.viewer .screen{flex:1;min-height:0;position:relative;background:#000;box-shadow:var(--sink);overflow:hidden;touch-action:pan-y}
.viewer .screen img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;opacity:1;transition:opacity .18s steps(3)}
.viewer .screen img.loading{opacity:0}
.viewer .wait{position:absolute;left:50%;top:50%;translate:-50% -50%;color:#9a9a9a;font:16px var(--f-mono);display:none}
.viewer.is-loading .wait{display:block}
.controls{display:flex;align-items:center;gap:6px;padding:7px 2px 3px;flex:none}
.controls .btn{min-width:0;width:34px;height:28px;padding:0;display:grid;place-items:center;font:14px/1 var(--f-ui)}
.controls .btn:active{padding:2px 0 0 2px}
.track{flex:1;position:relative;height:12px;margin:0 8px;box-shadow:var(--sink);background:#fff}
.track i{position:absolute;top:50%;width:12px;height:22px;translate:-50% -50%;background:var(--face);box-shadow:var(--raise);transition:left .2s steps(4)}
.controls output{font-size:14px;min-width:46px;text-align:right;font-variant-numeric:tabular-nums}

/* game */
.game .win-body{background:#000;overflow:hidden;display:grid;place-items:center;touch-action:none}
.game-wrap{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.game-cv{display:block;touch-action:none;cursor:pointer}
.game-wrap{position:relative;cursor:pointer;touch-action:none}
.g-hud{position:absolute;inset:0;pointer-events:none;font-family:var(--f-mono);color:#fff;text-align:center}
.g-score{position:absolute;left:0;right:0;top:14px;font-size:44px;font-weight:400;letter-spacing:.06em;text-shadow:3px 3px 0 #000}
.g-ready{display:none}
.g-ready b{position:absolute;left:0;right:0;top:16%;font-size:52px;font-weight:400;letter-spacing:.08em;text-shadow:4px 4px 0 #000}
.g-ready span{position:absolute;left:0;right:0;bottom:24%;font-size:20px;letter-spacing:.06em;text-shadow:2px 2px 0 #000;animation:pulse 1.2s steps(2,jump-none) infinite}
.g-hud[data-mode="ready"] .g-ready{display:block}
.g-over{position:absolute;left:50%;top:30%;translate:-50% 0;width:min(80%,300px);display:none;color:#000;background:var(--face);box-shadow:var(--raise);padding:3px}
.g-over-title{height:26px;display:flex;align-items:center;padding:0 8px;color:#fff;font:400 15px/1 var(--f-ui);-webkit-text-stroke:.45px currentColor;text-align:left;background:linear-gradient(90deg,var(--navy),var(--blue))}
.g-over p{margin:14px 8px;font-family:var(--f-mono);font-size:18px;letter-spacing:.05em}
.g-over .g-again{color:#000a7a;visibility:hidden;animation:pulse 1.2s steps(2,jump-none) infinite}
.g-hud[data-mode="dead"] .g-over{display:block}
.g-hud.can-retry .g-again{visibility:visible}

/* notepad + chat */
.note{margin:0;padding:10px 12px 22px;font:17px/1.45 var(--f-mono);letter-spacing:.07em;white-space:pre-wrap;word-wrap:break-word;color:#000;user-select:text;-webkit-user-select:text}
.note a{color:#0000c8}
.chat .win-body{display:flex;flex-direction:column}
.log{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 12px 6px;font:17px/1.42 var(--f-mono);letter-spacing:.07em;color:#000;user-select:text;-webkit-user-select:text}
.log p{margin:0 0 14px;white-space:pre-wrap;word-wrap:break-word}
.log .rec{color:#8a8a8a;font-style:italic;font-size:15px;margin-bottom:12px}
.log .me{color:#5c5c5c}
.log .me::before{content:"> "}
.log .bot a{color:#0000c8}
.log .typing::after{content:"_"}
.prompt{display:flex;align-items:baseline;gap:0;padding:0 0 30px;font:17px/1.42 var(--f-mono);letter-spacing:.07em;color:#5c5c5c;flex:none}
.prompt label{flex:none;margin-right:.6em}
.prompt input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0;font:17px/1.42 var(--f-mono);letter-spacing:.07em;color:#5c5c5c;caret-color:#000;user-select:text;-webkit-user-select:text;border-radius:0}
.prompt input::placeholder{color:#a3a3a3;font-style:italic}
.prompt input:disabled{opacity:.5}

/* system properties / dialogs */
.props .win-body{padding:12px 14px}
.props-head{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.props-head img{width:48px;height:48px}
.props-head b{font-size:19px;font-weight:400;-webkit-text-stroke:.55px currentColor}
.props dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:16px}
.props dt{color:#2b2b2b}
.props dd{margin:0}
.props .aside{color:#d0573a}
.props .ok,.dialog .ok{display:flex;justify-content:flex-end;gap:8px;padding:14px 0 4px}
.dialog .win-body{padding:16px 16px 8px;font-size:16px}
.dialog p{margin:0 0 12px}
.links .win-body{padding:14px}
.links h2{margin:2px 0 6px;font:26px/1 var(--f-mono);letter-spacing:.04em;color:#000a7a}
.links p{margin:0 0 14px}
.links ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.links a{display:flex;align-items:center;gap:12px;padding:9px 12px;color:#000;text-decoration:none;background:var(--face);box-shadow:var(--raise)}
.links a:active{box-shadow:var(--press)}
.links a img{width:32px;height:32px}
.links a b{color:#0000c8;text-decoration:underline;font-weight:400}
.links small{display:block;color:#3b3b3b;font-size:13px}

/* ---------- taskbar ---------- */
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:5px;height:calc(var(--bar) + env(safe-area-inset-bottom,0px));padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom,0px)) max(5px,env(safe-area-inset-left));background:var(--face);box-shadow:inset 0 1px var(--lt),inset 0 2px var(--hi)}
.start-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 6px;font:400 19px/1 var(--f-ui);-webkit-text-stroke:.6px currentColor;background:var(--face);border:0;box-shadow:var(--raise);cursor:pointer;flex:none}
.start-btn img{width:22px;height:22px}
.start-btn[aria-expanded="true"]{box-shadow:var(--press);padding:2px 9px 0 7px}
.tb-sep{width:2px;height:32px;box-shadow:inset 1px 0 var(--lo),inset -1px 0 var(--hi);flex:none}
.quick{display:grid;place-items:center;width:30px;height:32px;flex:none}
.quick img{width:22px;height:22px}
.quick:active{box-shadow:var(--press)}
.tasks{flex:1;display:flex;gap:4px;min-width:0;overflow:hidden}
.task{flex:0 1 190px;min-width:44px;height:36px;display:flex;align-items:center;gap:6px;padding:0 8px;font:400 15px/1 var(--f-ui);-webkit-text-stroke:.45px currentColor;background:var(--face);border:0;box-shadow:var(--raise);cursor:pointer;white-space:nowrap;overflow:hidden}
.task img{width:20px;height:20px;flex:none}
.task span{overflow:hidden;text-overflow:ellipsis}
.task.on{box-shadow:var(--press);background:repeating-conic-gradient(#c3c3c3 0 25%,#fff 0 50%) 0 0/2px 2px}
.tray{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;font-size:15px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo);flex:none;white-space:nowrap}
.tray-net{display:flex;gap:2px}
.tray-net b{width:8px;height:7px;background:#0b0b0b;box-shadow:inset 1px 1px #5a5a5a}
.tray-net.blink b:first-child{background:#21d321}

/* start menu */
.start-menu{position:fixed;left:3px;bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px) - 3px);z-index:40;display:flex;width:min(310px,calc(100% - 6px));background:var(--face);box-shadow:var(--raise);padding:3px}
.start-menu[hidden]{display:none}
.start-side{width:32px;flex:none;background:linear-gradient(0deg,#000a7a,#1a62c9);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px}
.start-side span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 22px/1 var(--f-ui);color:#c3c3c3;letter-spacing:.02em}
.start-side b{color:#fff;font-weight:400;-webkit-text-stroke:.6px currentColor}
.start-list{list-style:none;margin:0;padding:0;flex:1}
.start-list .sep{height:2px;margin:4px 2px;box-shadow:inset 0 1px var(--lo),inset 0 -1px var(--hi)}
.start-list button,.start-list a{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px 9px 10px;background:none;border:0;text-align:left;color:#000;text-decoration:none;cursor:pointer;font:16px var(--f-ui)}
.start-list button:hover,.start-list a:hover,.start-list button:focus-visible,.start-list a:focus-visible,.start-list .hot{background:#000a7a;color:#fff;outline:0}
.start-list img{width:32px;height:32px;flex:none}

/* ---------- boot ---------- */
.boot{display:none}
.js .boot{position:fixed;inset:0;z-index:150;display:block;background:#000;cursor:pointer}
.boot.done{display:none}
.post{position:absolute;inset:0;padding:max(18px,env(safe-area-inset-top)) 16px 16px;color:#b8b8b8;font:16px/1.35 var(--f-mono);letter-spacing:.04em}
.post pre{margin:0;white-space:pre-wrap;font:inherit}
.post pre b{color:#fff;font-weight:400}
.post pre .ok{color:#5cff5c}
.post-foot{position:absolute;left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));margin:0;color:#8a8a8a}
.post-foot b{color:#fff;font-weight:400}
.splash{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  background:linear-gradient(180deg,#1a3f9a 0%,#2f6bd0 38%,#78aef0 78%,#b9d8fb 100%)}
.boot.splashing .post{display:none}
.boot.splashing .splash{display:flex}
.splash-clouds{position:absolute;inset:0;opacity:.85;
  background:
   radial-gradient(ellipse 22% 7% at 18% 70%,#fff 60%,transparent 62%),
   radial-gradient(ellipse 16% 6% at 30% 66%,#fff 60%,transparent 62%),
   radial-gradient(ellipse 26% 8% at 78% 78%,#fff 60%,transparent 62%),
   radial-gradient(ellipse 14% 5% at 66% 74%,#fff 60%,transparent 62%),
   radial-gradient(ellipse 20% 6% at 50% 90%,#fff 60%,transparent 62%);
  animation:drift 6s linear infinite}
@keyframes drift{to{transform:translateX(-6%)}}
.splash-logo{position:relative;display:flex;align-items:center;gap:14px;margin:0;color:#fff;font:400 clamp(40px,12vw,76px)/1 var(--f-ui);text-shadow:3px 3px 0 rgb(0 0 40 / .45)}
.splash-logo b{font-weight:400;-webkit-text-stroke:1.2px currentColor}
.splash-flag{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:.9em;height:.82em;transform:skewY(-6deg)}
.splash-flag i:nth-child(1){background:#f03c24}.splash-flag i:nth-child(2){background:#4caf2a}.splash-flag i:nth-child(3){background:#1e7fe0}.splash-flag i:nth-child(4){background:#ffc21c}
.splash-sub{position:relative;margin:0;color:#eaf3ff;font:clamp(16px,4.4vw,24px)/1 var(--f-mono);letter-spacing:.2em;text-transform:lowercase;text-shadow:2px 2px 0 rgb(0 0 40 / .4)}
.splash-bar{position:absolute;left:0;right:0;bottom:0;height:14px;background:#000;overflow:hidden;margin-bottom:env(safe-area-inset-bottom)}
.splash-bar i{position:absolute;top:2px;bottom:2px;width:46%;background:repeating-linear-gradient(90deg,#1e7fe0 0 10px,#7fd0ff 10px 14px);animation:slide 1.1s linear infinite}
@keyframes slide{from{left:-46%}to{left:100%}}
.boot.out{animation:bootout .32s steps(4) forwards}
@keyframes bootout{to{opacity:0}}

/* shut down */
.off{position:fixed;inset:0;z-index:95;background:#000;display:grid;place-content:center;text-align:center;color:#ff8a1c;font:clamp(26px,6.4vw,44px)/1.2 var(--f-mono);letter-spacing:.04em;cursor:pointer;padding:24px}
.off[hidden]{display:none}
.off p{margin:0}
.off-sub{margin-top:22px!important;font-size:18px;color:#6d6d6d}

/* ---------- CRT glass ---------- */
.crt{position:fixed;inset:0;z-index:200;pointer-events:none}
.crt::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .13) 0 1px,transparent 1px 3px)}
.crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 80% at 50% 50%,rgb(255 255 255 / .07) 0%,transparent 45%,rgb(0 0 0 / .16) 85%,rgb(0 0 0 / .34) 100%)}

/* ---------- phones: windows fill the screen ---------- */
@media (max-width:760px){
  .win{left:0!important;top:0!important;width:100%!important;height:100%!important}
  .win.dialog{left:6px!important;right:6px;top:auto!important;width:auto!important;height:auto!important;bottom:6px;max-height:calc(100% - 12px)}
  .files{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:761px){
  .icons{grid-template-columns:none;grid-template-rows:repeat(auto-fill,96px);grid-auto-flow:column;grid-auto-columns:96px;height:100%;width:max-content}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}