body{min-height:100svh;isolation:isolate}
.pixel-landscape{position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('landscape.svg') center center/100% 100% no-repeat}
header,main{position:relative}
.intro p{font-size:12px;color:#aab6bd;letter-spacing:2px}
.intro>span{font-size:15px;line-height:1.8;color:#bac3c8}
.card-top>span{font-size:11px;letter-spacing:1px;color:#c4bcaa}
.en{font-size:12px;letter-spacing:2px;color:#c4bcaa}
.card-bottom{font:14px/1.6 system-ui,sans-serif;color:#bbc5c7}
footer{font:14px/1.8 system-ui,sans-serif;color:#aebbc1;max-width:1250px;margin:0 auto;padding:28px 0}
.motion-control{font-size:14px;color:#d3c19d}
@media(min-width:1600px){main{max-width:1880px}.cards,footer{max-width:1450px}.card .art{height:clamp(400px,44svh,530px)}.intro{padding:36px 0 30px}header nav{font-size:16px}}
@media(max-width:1000px){.card-top>span{font-size:10px;letter-spacing:0}.en{font-size:11px}.intro>span{font-size:14px}}
@media(max-width:650px){.pixel-landscape{opacity:.6;background-size:auto 100%}.intro p{font-size:10px}.intro>span{font-size:12px}.card-top>span{font-size:9px}.en{font-size:10px}.card-bottom{font-size:12px}footer{font-size:12px;flex-wrap:wrap;gap:8px}.motion-control{font-size:12px}}


body{background:#080c1c;min-height:100svh}#city,.city-shade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2}#city{image-rendering:pixelated}.city-shade{z-index:-1;background:radial-gradient(ellipse at 50% 43%,#060b1899 0%,#060b1855 38%,transparent 75%),linear-gradient(#05091540,transparent 35%,#05091520)}
header{border-color:#72809b45}.card{background:#0b101bef;border-color:#979181}.card:hover,.card:focus-visible{border-color:#f1d39e}.intro>span,.intro p,footer{color:#c1c9d6;text-shadow:0 2px 3px #070b18}.motion-control{background:#0c1420d9;border-color:#657088}@media(max-width:650px){footer{padding-bottom:16px}.intro>span{display:block}}

/* Purple card surfaces only; artwork receives no tint or filter. */
.card{background:linear-gradient(155deg,#272139 0%,#191627 48%,#231b34 100%);border-color:#8e809f;box-shadow:inset 0 1px 0 #c2a4e01a,0 8px 24px #05071430}
.card:hover,.card:focus-visible{border-color:#c6acd9;box-shadow:inset 0 1px 0 #dec0ff33,0 8px 24px #10092150}
.card-top>span,.card .en{color:#c5b5d4}.card-bottom{color:#cec3dc}.card-bottom>span{color:#e3c99f}

/* Near-black violet panels with a two-step pixel-cut outline. */
.card{--pixel-edge:#776982;border:0;background:var(--pixel-edge);padding:13px;isolation:isolate;box-shadow:none;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px)}
.card::before{content:"";position:absolute;inset:2px;z-index:-1;pointer-events:none;background:linear-gradient(145deg,#13101c,#0c0b12 55%,#14101d);clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px)}
.card:hover,.card:focus-visible{--pixel-edge:#b59bcb;background:var(--pixel-edge);box-shadow:none}
.card:focus-visible{--pixel-edge:#f1d29c;outline:none}
@media(max-width:1000px){.card{padding:9px}}

/* Approved black panels with restrained violet accents. */
.card::before{background:#090b10}.card{--pixel-edge:#6e6578}.card-top>span,.card .en{color:#c8c4cf}
.intro{padding:16px 0}.intro h1{margin:10px 0}.card .art{height:clamp(200px,31svh,380px)}.card h2{margin:14px 0 8px}.card-bottom{margin-top:14px}footer{padding:18px 0}
body{background:#080c1e url('/images/window-cards/neon-city.png') center/cover fixed no-repeat}
@media(max-width:650px){.card .art{height:22svh}.intro>span{font-size:12px}}

/* Full-screen weather sits behind all interactive content. */
#lens-glass{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;image-rendering:pixelated}header,main{position:relative;z-index:1}