#laptop[data-compact=true] .desktop-icons{top:46px;left:16px;gap:12px 8px;grid-template-columns:repeat(2,110px)}
#laptop[data-compact=true] .app-icon{width:54px;height:54px;font-size:32px}
#laptop[data-compact=true] .desktop-icons button,#laptop[data-compact=true] .desktop-icons a{gap:5px;padding:5px;font-size:16px}
#laptop[data-compact=true] .desktop-label{left:290px;top:44%}
#laptop[data-compact=true] .desktop-label h1{font-size:40px;letter-spacing:-1px}
#laptop[data-compact=true] .desktop-label p{font-size:18px}
#laptop[data-tiny=true] .system-bar{height:25px;padding:5px 8px;font-size:11px}
#laptop[data-tiny=true] .desktop-icons{top:30px;left:4px;right:4px;grid-template-columns:repeat(3,1fr);gap:3px}
#laptop[data-tiny=true] .app-icon{width:38px;height:38px;font-size:24px}
#laptop[data-tiny=true] .desktop-icons button,#laptop[data-tiny=true] .desktop-icons a{font-size:12px;padding:2px;gap:3px}
#laptop[data-tiny=true] .desktop-label{display:none}
#laptop[data-tiny=true] .content{padding:15px;font-size:14px}
#laptop[data-tiny=true] .project-grid{grid-template-columns:1fr}
#laptop[data-tiny=true] .browser-note{font-size:11px;padding:4px}
#laptop[data-tiny=true] .tabs button{font-size:12px;padding:5px 10px}
.phone-apps button{font-size:27px}.phone-time{font-size:38px}#phone-home p{font-size:24px}
.kazword-viewport{position:relative;overflow:hidden;background:#f6f7f9}.kazword-viewport iframe{position:absolute;left:var(--game-left,0px);top:0;width:var(--game-width,960px);height:var(--game-height,760px);transform-origin:0 0;transform:scale(var(--game-scale,1))}
#stage{overflow:clip}
:root{background:#f3f0eb}
.desk-photo{mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 95%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 95%,transparent);-webkit-mask-composite:source-in}
.tabs{overflow-x:auto;flex-shrink:0}.tabs button{white-space:nowrap}.tabs [data-close-tab]{margin-left:12px;padding:2px 5px;border-radius:4px}.tabs [data-close-tab]:hover{background:#bbc8d8}
#stage>#phone{border:5px solid #17202a;box-shadow:0 0 0 3px #b8bab9,0 15px 35px #0005}
#stage>#laptop{box-shadow:0 0 0 5px #313940,0 0 0 9px #bac0c3;border-radius:3px}
@media(max-width:649px){
 /* Fade well outside the desk/chair silhouette so the photograph has no band edge. */
 .desk-photo{mask-image:radial-gradient(ellipse 64% 62% at 50% 49%,#000 50%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 49%,#000 50%,transparent 100%);mask-composite:add;-webkit-mask-composite:source-over}
 body[data-panning=true] #laptop{visibility:hidden}
 body[data-panning=false] #stage>#laptop{animation:focus-reveal .18s ease-out}
 #world{will-change:auto}
 .scene-nav{backdrop-filter:none}
 .browser-note{flex-wrap:wrap;gap:4px 10px}.browser-note span{display:none}
 .phone-time{font-size:25px;padding-top:35px}
 .phone-apps{padding:40px 20px 20px;gap:28px 12px}
 .phone-apps button{font-size:20px;gap:12px}
 .phone-apps img{width:80px;height:80px}
 #phone-home p{font-size:17px}
}
@keyframes focus-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#stage>#laptop{animation:none!important}}
@media(max-width:649px){
 .scene-nav,.scene-caption,#stage,#desktop,#phone-home,.window-bar{touch-action:pan-y pinch-zoom}
 .scene-caption::after{content:' Swipe the bar: ← Phone · Laptop →';display:block;font-size:11px;opacity:.72;margin-top:3px}
 .scene-caption{padding-top:6px;padding-bottom:6px}
}
.about-location{font-size:.9em;opacity:.75}