body[data-view=pixel] {background:#080b14;overflow:hidden;}
.pw {--pw-accent:#c4f17b;position:fixed;inset:0;background:#080b14;color:#e5f4ec;font-family:monospace;}
.pw-viewport {position:absolute;inset:0;touch-action:none;cursor:grab;background:radial-gradient(ellipse at center,#142537,#070a12);}
.pw-viewport:active {cursor:grabbing;}
.pw-viewport canvas {display:block;width:100%;height:100%;image-rendering:pixelated;}
.pw-viewport::after {content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#00000008 0 1px,transparent 1px 4px);}
.pw button {display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #8195b52b;border-radius:50%;background:#0d1624a6;backdrop-filter:blur(12px);color:#839bb2;font:23px/1 monospace;cursor:pointer;transition:color .2s,border .2s,background .2s;}
.pw button:hover,.pw button[aria-pressed=true] {color:var(--pw-accent);border-color:var(--pw-accent);background:#20312699;}
.pw button:focus-visible,.pw-viewport:focus-visible {outline:2px solid var(--pw-accent);outline-offset:4px;}
.pw button:disabled {opacity:.3;cursor:wait;}
.pw-tools {position:absolute;top:22px;right:22px;display:flex;gap:8px;z-index:5;}
.pw-render-modes {display:flex;gap:8px;margin-right:12px;}
.pw-world-picker {position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:14px;z-index:5;}
.pw-world-picker button {width:50px;height:50px;font-size:27px;}
.pw-world-picker button[aria-pressed=true] {box-shadow:0 0 24px color-mix(in srgb,var(--pw-accent) 18%,transparent);}
.pw-progress {position:absolute;left:0;right:0;bottom:0;height:2px;background:#142030;transition:opacity 1s;}
.pw-progress span {height:100%;display:block;width:0;background:var(--pw-accent);box-shadow:0 0 12px var(--pw-accent);}
.pw[data-build=ready] .pw-progress {opacity:0;}
.pw-loading {position:absolute;inset:0;display:grid;place-content:center;padding:35px;text-align:center;color:var(--pw-accent);font-size:24px;line-height:1.6;}

.pw-labels{position:absolute;inset:0;pointer-events:none;}
.pw .pw-place-label{position:absolute;transform:translate(-50%,0);width:auto;height:auto;white-space:nowrap;padding:8px 11px;border-radius:2px;font:11px/1.2 monospace;letter-spacing:.1em;color:#d5e6d9;background:#0b1424dc;pointer-events:auto;}
.pw-discovery{position:absolute;right:24px;bottom:100px;width:min(365px,calc(100% - 48px));max-height:64vh;overflow:auto;padding:22px;background:#0a1322f2;border:1px solid #66808660;border-top:2px solid var(--pw-accent);box-shadow:0 12px 60px #0008;scrollbar-width:thin;}
.pw-discovery[hidden],.pw-place-label[hidden]{display:none;}
.pw-discovery small{font-size:10px;letter-spacing:.12em;color:var(--pw-accent);}
.pw-discovery h2{font:500 19px/1.3 monospace;margin:12px 25px 8px 0;}
.pw-discovery p{font:12px/1.6 monospace;color:#9eafbf;margin:8px 0 15px;}
.pw .pw-close{position:absolute;right:10px;top:8px;width:28px;height:28px;border:0;background:none;font-size:22px;}
.pw-discovery a{color:var(--pw-accent);text-decoration:none;}
.pw-discovery a:focus-visible{outline:2px solid var(--pw-accent);outline-offset:4px;}
.pw-enter{display:inline-block;font-size:12px;margin-bottom:18px;border-bottom:1px solid;padding-bottom:5px;}
.pw-demo-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px;}
.pw-demo-links article:only-child{grid-column:1/-1;}
.pw-demo-watch{display:block;}
.pw-demo-watch img{width:100%;aspect-ratio:16/9;object-fit:cover;image-rendering:pixelated;filter:saturate(.65);border:1px solid #839eab50;}
.pw-demo-watch:hover img{filter:none;border-color:var(--pw-accent);}
.pw-demo-watch span{display:block;font-size:11px;line-height:1.5;margin-top:5px;}
.pw-demo-links p{font-size:11px;margin:7px 0;}
.pw-demo-try{display:block;font-size:10px;line-height:1.5;margin-top:9px;}
.pw .pw-deeper{width:100%;height:auto;border-radius:2px;padding:11px;margin-top:18px;font-size:11px;}
@media(max-width:600px){.pw-discovery{right:12px;bottom:88px;width:calc(100% - 24px);max-height:43vh;padding:16px;}.pw .pw-place-label{font-size:9px;padding:6px;}}

.pw-world-picker button{position:relative;}.pw-dock-label{position:absolute;top:calc(100% + 7px);font:9px/1 monospace;color:#a7b7c6;white-space:nowrap;}

.pw-intro{position:absolute;inset:0;z-index:30;background:radial-gradient(ellipse at center,transparent,#080b1440);color:#dfeccc;}
.pw-intro[hidden]{display:none;}
.pw-intro-name{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:min(640px,85%);font:400 clamp(22px,3.2vw,40px)/1.5 monospace;letter-spacing:-.035em;text-align:center;transition:opacity .6s,filter .6s;}
.pw-intro-name em{font-style:normal;color:var(--pw-accent);}
.pw-intro:not([data-stage="-1"]):not([data-stage=static]) .pw-intro-name{opacity:0;filter:blur(6px);}
.pw-intro-copy{position:absolute;top:55%;left:50%;transform:translateX(-50%);width:min(540px,82%);font:400 clamp(16px,2vw,23px)/1.6 monospace;text-align:center;color:#c5d2df;}
.pw .pw-intro-skip{position:absolute;bottom:45px;left:50%;transform:translateX(-50%);width:auto;height:auto;padding:12px 18px;font:11px/1 monospace;letter-spacing:.06em;border-radius:2px;background:#101a28;}
.pw-intro-track{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:90px;height:2px;background:#253142;}
.pw-intro-track span{display:block;height:100%;width:0;background:var(--pw-accent);box-shadow:0 0 12px #c4f17b55;}
.pw[data-intro=true] .pw-tools,.pw[data-intro=true] .pw-world-picker,.pw[data-intro=true] .pw-labels,.pw[data-intro=true] .pw-discovery,.pw[data-intro=true] .pw-progress{visibility:hidden;}
.pw-intro[data-stage=static] .pw-intro-name{top:19%;font-size:clamp(16px,2vw,24px);}
.pw-intro[data-stage=static] .pw-intro-copy{top:54%;font-size:clamp(13px,1.5vw,17px);}
.pw-intro[data-stage=static] .pw-intro-copy p{margin:0 0 10px;}
@media(max-width:600px){.pw-intro-copy{top:57%;}.pw-intro-name{top:41%;}.pw-intro[data-stage=static] .pw-intro-copy{top:51%;}}