* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #080b09; }
body { overscroll-behavior: none; }
#css, #webgl, #ui { position: fixed; inset: 0; width: 100%; height: 100%; }
#css { z-index: 0; }
#webgl { z-index: 1; pointer-events: none; }
#ui { z-index: 3; pointer-events: none; }
#webgl canvas, #css > div { position: absolute; top: 0; left: 0; }
#webgl canvas { display: block; outline: none; }
#ui-app { width: 100%; height: 100%; position: relative; }
.computer-screen { color-scheme: light; }
.no-script { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; gap: 16px; padding: 24px; color: #eaf4ed; background: #101b16; font: 18px/1.6 monospace; }
.no-script a { color: #a7ddbc; }

:root { --ui-ink:#cccccc; --ui-muted:#9cdcfe; --ui-accent:#4ec9b0; --ui-border:#333; }
#ui { pointer-events:none; }
#ui-app { pointer-events:none; color:var(--ui-ink); font-family:Consolas,"Courier New",monospace; }
#ui-app *, .portfolio-reader * { box-sizing:border-box; }
.loading-screen, .portfolio-reader { pointer-events:auto; }
button, a { -webkit-tap-highlight-color:transparent; }
.loading-screen button, .scene-controls button, .portfolio-reader button { font:inherit; min-height:44px; cursor:pointer; touch-action:manipulation; }
.loading-screen button:focus-visible, .scene-controls button:focus-visible, .portfolio-reader button:focus-visible { outline:2px solid #79dce8; outline-offset:4px; }
.loading-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; z-index:20; color:#24373e; font-family:Tahoma,"Segoe UI",Arial,sans-serif; background-color:#008080; background-image:radial-gradient(ellipse at 50% 42%,#349e981a 15%,#003c4a66),radial-gradient(#ffffff13 .7px,transparent .7px); background-size:auto,4px 4px; opacity:1; transition:opacity 240ms ease; }
.loading-screen:after { content:"ARTURS LAPIŅŠ · INTERACTIVE PORTFOLIO"; position:fixed; bottom:max(23px,env(safe-area-inset-bottom)); left:12px; right:12px; text-align:center; color:#b1d4cf; font:10px/1.5 "Courier New",monospace; letter-spacing:1.6px; pointer-events:none; }
.loading-screen[data-state=leaving] { opacity:0; pointer-events:none; }
.loading-card { width:min(100%,470px); padding:4px; background:#c3c7cb; border:0; border-radius:0; box-shadow:inset 1px 1px #fff,inset -1px -1px #404040,inset 2px 2px #dfdfdf,inset -2px -2px #808080,6px 7px 0 #003d4559,0 22px 80px #002f3b40; transition:transform 240ms cubic-bezier(.22,.8,.22,1); }
.loading-screen[data-state=leaving] .loading-card { transform:translateY(-5px) scale(.985); }
.loading-card__bar { min-height:29px; display:flex; align-items:center; gap:7px; padding:4px 8px; font-size:12px; font-weight:bold; color:white; background:linear-gradient(90deg,#000080,#1457a0 75%,#438cba); }
.loading-card__icon { image-rendering:pixelated; flex:none; }
.loading-card__body { padding:27px 29px 22px; }
.loading-brand { display:flex; align-items:center; gap:22px; min-height:104px; }
.loading-brand>img { width:64px; height:64px; image-rendering:pixelated; flex:none; filter:drop-shadow(2px 3px 0 #9ca8a488); }
.loading-brand__copy { min-width:0; }
.loading-brand__copy small { display:block; font:9px/1.5 "Courier New",monospace; letter-spacing:1.5px; color:#687d82; margin-bottom:6px; }
.loading-card h1 { font:bold 55px/1 Tahoma,"Segoe UI",Arial,sans-serif; color:#203f4a; letter-spacing:-3px; margin:0 0 8px; }
.loading-brand__copy p { font-size:12px; line-height:1.5; color:#4f656b; margin:0; }
.loading-divider { border:0; border-top:1px solid #949f9e; box-shadow:0 1px #fff; margin:22px 0 20px; }
.loading-status { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:#3e525a; font-size:12px; line-height:1.6; }
.loading-status>span:last-child { font-variant-numeric:tabular-nums; white-space:nowrap; }
.loading-progress { display:block; width:100%; height:23px; margin:10px 0 13px; border:0; border-radius:0; padding:3px; appearance:none; background:#dee1df; box-shadow:inset 1px 1px #767d7f,inset -1px -1px #fff,inset 2px 2px #a5afad; color:#000080; accent-color:#000080; }
.loading-progress::-webkit-progress-bar { background:transparent; }
.loading-progress::-webkit-progress-value { background:repeating-linear-gradient(90deg,#000080 0 11px,transparent 11px 14px); }
.loading-progress::-moz-progress-bar { background:repeating-linear-gradient(90deg,#000080 0 11px,transparent 11px 14px); }
.loading-card__actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; margin-top:3px; }
.loading-card__actions button { padding:8px 12px; font-size:11px; line-height:1.45; }
.loading-card__actions button:focus-visible { outline:2px dotted #000080; outline-offset:-4px; }
.primary-action { background:#c3c7cb; border:0; border-radius:0; box-shadow:inset 1px 1px #fff,inset -1px -1px #404040,inset 2px 2px #dfdfdf,inset -2px -2px #808080; color:#172c36; min-width:100px; }
.primary-action:active { box-shadow:inset 1px 1px #404040,inset -1px -1px #fff,inset 2px 2px #808080; }
.primary-action:disabled { opacity:.5; cursor:progress; }
.secondary-action { background:transparent; border:0; color:#526d73; text-decoration:underline; text-underline-offset:3px; }
.secondary-action:hover { color:#000080; }
.loading-card__footnote { font:10px/1.5 "Courier New",monospace; text-align:center; color:#657a7d; margin-top:13px; }
.loading-note { font:12px/1.7 Tahoma,"Segoe UI",Arial,sans-serif; margin:12px 0 14px; color:#534f3f; }
.loading-screen[data-state=failed] .loading-status { color:#793d30; }
.scene-controls { pointer-events:auto; position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); right:max(16px,env(safe-area-inset-right)); display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; max-width:calc(100vw - 24px); }
.scene-controls, .scene-prompt { transition:opacity 180ms ease,transform 260ms ease; }
[data-monitor-busy=true] .scene-controls, [data-monitor-busy=true] .scene-prompt { opacity:0; transform:translateY(8px); pointer-events:none; }
.scene-controls button { border:1px solid #9cdcfe38; border-radius:2px; background:#000a; color:#9baeb8; padding:9px 12px; font-size:10px; white-space:nowrap; }
.scene-controls button:hover { background:#122128; color:#d5ecff; }
.scene-controls button:disabled { opacity:.4; cursor:default; }
.scene-controls button.scene-controls__back { color:#9cdcfe; border-color:#30b9e180; }
.scene-controls__reader { text-decoration:underline; text-underline-offset:3px; }
.scene-prompt { position:fixed; bottom:74px; left:20px; right:20px; text-align:center; color:#30b9e1; font:12px/1.5 Consolas,"Courier New",monospace; text-shadow:0 1px 5px #000; }
.scene-prompt__touch { display:none; }
html[data-input=touch] .scene-prompt__touch { display:inline; }
html[data-input=touch] .scene-prompt__mouse { display:none; }
.scene-error { pointer-events:auto; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px,calc(100% - 40px)); padding:24px; border:1px solid #4ec9b0; border-radius:4px; background:#1e1e1ef2; }
.scene-error p { font:14px/1.8 Consolas,"Courier New",monospace; color:#ccc; margin-bottom:18px; }
.scene-error button { min-height:44px; width:100%; border:1px solid #4ec9b0; background:#0e639c; color:white; font:13px Consolas,"Courier New",monospace; padding:12px; cursor:pointer; }
.scene-error button:focus-visible { outline:3px solid white; outline-offset:4px; }
.portfolio-reader { position:fixed; inset:0; z-index:100; height:100vh; height:100dvh; background:#c0c0c0; display:flex; flex-direction:column; color:#ccc; font-family:Consolas,"Courier New",monospace; }
.portfolio-reader[hidden] { display:none; }
.portfolio-reader__header { flex:none; min-height:56px; padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left)); background:#202020; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.portfolio-reader__title { font-size:12px; }
.portfolio-reader__header button { background:#2d2d30; color:#9cdcfe; border:1px solid #555; padding:8px 12px; display:flex; align-items:center; gap:18px; font-size:11px; }
.portfolio-reader__header button span { font-size:20px; }
.portfolio-reader iframe { border:0; display:block; width:100%; flex:1 1 auto; min-height:0; background:#c0c0c0; padding-bottom:env(safe-area-inset-bottom); }
.portfolio-reader__loading { position:absolute; top:85px; left:24px; color:navy; font-size:14px; }

/* A native-resolution monitor grows out of the real 3D screen. Only transform,
   clipping, and opacity animate; its document never resizes during the morph. */
.mobile-monitor-layer { position:fixed; inset:0; z-index:110; visibility:hidden; pointer-events:none; font-family:Consolas,"Courier New",monospace; }
.mobile-monitor-layer[data-phase=opening], .mobile-monitor-layer[data-phase=active], .mobile-monitor-layer[data-phase=closing] { visibility:visible; pointer-events:auto; }
.mobile-monitor-backdrop { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 38%,#1017151f,#020706bf); opacity:0; }
.mobile-monitor-surface { position:absolute; display:flex; flex-direction:column; padding:7px; box-sizing:border-box; transform-origin:0 0; background:linear-gradient(125deg,#53574b 0,#292d29 25%,#191f1c 70%,#44463b); color:#c7d0c8; border:1px solid #a6ac8a66; border-radius:16px; overflow:hidden; box-shadow:inset 0 2px 1px #cbd2b43b,inset 0 -3px 2px #0009,0 20px 80px #0009,0 0 35px #b3caca12; will-change:transform,clip-path; }
.mobile-monitor-bezel { pointer-events:none; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 2px 0 2px #e1dfb00a,inset -2px 0 2px #0007; z-index:3; }
.mobile-monitor-chrome { position:relative; order:2; flex:none; min-height:50px; min-height:max(50px,calc(env(safe-area-inset-bottom) + 44px)); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 4px env(safe-area-inset-bottom) 8px; font-size:12px; letter-spacing:.3px; }
.mobile-monitor-chrome>span { display:flex; align-items:center; gap:7px; }
.mobile-monitor-chrome small { font-size:8px; color:#91a49a; letter-spacing:1px; }
.mobile-monitor-led { width:4px; height:4px; background:#a4d487; border-radius:50%; box-shadow:0 0 8px #c6f3a480; }
.mobile-monitor-chrome button { flex:none; display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 10px; border:1px solid #a6b4a330; border-radius:7px; background:#11191588; color:#c1d8cd; font:11px Consolas,"Courier New",monospace; cursor:pointer; touch-action:manipulation; }
.mobile-monitor-chrome button span { font-size:20px; color:#a6bcae; }
.mobile-monitor-chrome button:focus-visible { outline:2px solid #9cdcfe; outline-offset:1px; }
.mobile-monitor-chrome button:disabled { cursor:default; }
.mobile-monitor-display { position:relative; order:1; flex:1; min-height:0; border:2px inset #101a17; border-radius:9px 9px 10px 10px; overflow:hidden; background:#c0c0c0; box-shadow:0 0 12px #b7d5cb12; }
.mobile-monitor-display:after { content:""; pointer-events:none; position:absolute; inset:0; z-index:2; border-radius:inherit; box-shadow:inset 0 0 10px #1c302f24; background:linear-gradient(135deg,#fff8b404,transparent 45%); }
.mobile-monitor-display iframe { display:block; width:100%; height:100%; border:0; background:#c0c0c0; }
.mobile-monitor-loading { position:absolute; inset:0; display:grid; place-content:center; color:navy; font:18px 'Courier New',monospace; }
.mobile-monitor-layer[data-phase=opening] .mobile-monitor-chrome { opacity:0; transform:translateY(-5px); }
.mobile-monitor-layer[data-phase=active] .mobile-monitor-chrome { opacity:1; transform:none; transition:opacity 240ms ease,transform 340ms cubic-bezier(.22,.8,.22,1); }
.mobile-monitor-layer[data-phase=closing] .mobile-monitor-chrome { opacity:0; transform:translateY(-4px); transition:opacity 130ms ease,transform 220ms ease; }
.mobile-monitor-layer[data-phase=opening] .mobile-monitor-display { opacity:.82; }
.mobile-monitor-layer[data-phase=active] .mobile-monitor-display { opacity:1; transition:opacity 260ms ease 70ms; }
.mobile-monitor-layer[data-phase=opening] .mobile-monitor-display iframe, .mobile-monitor-layer[data-phase=closing] .mobile-monitor-display iframe { pointer-events:none; }
.mobile-monitor-layer:not([data-phase=active]) .mobile-monitor-surface { user-select:none; }
@media (max-width:340px) { .mobile-monitor-chrome { padding-left:4px; } .mobile-monitor-chrome small { display:none; } }
@media (max-width:600px) {
 .loading-screen { padding:16px; }
 .loading-card__body { padding:24px 20px 19px; }
 .loading-brand { gap:17px; min-height:92px; }
 .loading-card h1 { font-size:46px; letter-spacing:-2.5px; }
 .loading-brand__copy small { font-size:8px; letter-spacing:1px; }
 .loading-brand__copy p { font-size:11px; }
 .loading-status { font-size:11px; }
 .loading-screen:after { font-size:8px; letter-spacing:1.1px; }
 .scene-controls { right:12px; gap:4px; }
 .scene-controls button { font-size:10px; padding:8px; }
 .portfolio-reader__title { max-width:145px; font-size:10px; line-height:1.5; }
}
@media (pointer:coarse) { .scene-prompt__touch { display:inline; } .scene-prompt__mouse { display:none; } }
@media (max-height:500px) and (orientation:landscape) {
 .loading-screen { padding:12px; }
 .loading-card__body { padding:14px 26px 9px; }
 .loading-brand { min-height:67px; }
 .loading-brand>img { width:48px; height:48px; }
 .loading-card h1 { font-size:40px; margin-bottom:4px; }
 .loading-brand__copy small { margin-bottom:3px; }
 .loading-divider { margin:13px 0 11px; }
 .loading-card__footnote { display:none; }
 .loading-progress { margin:7px 0 7px; }
 .loading-screen:after { bottom:12px; font-size:8px; }
 .scene-prompt { bottom:64px; }
}
@media (prefers-reduced-motion:reduce) { .loading-screen, .loading-screen *, .portfolio-reader *, .scene-controls *, .mobile-monitor-layer * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }