html,body{margin:0;background:#f0ede5}#perspetiva{min-height:100svh;color:#202e46;font:14px/1.6 'DM Sans',Arial,sans-serif;position:relative}#perspetiva *{box-sizing:border-box}#perspetiva [hidden]{display:none!important}#perspetiva a{color:inherit;text-decoration:none}#perspetiva button{font:inherit;cursor:pointer;touch-action:manipulation}#perspetiva :is(a,button,input):focus-visible{outline:3px solid #527ce7;outline-offset:4px}#perspetiva header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4.5%;min-height:84px}#perspetiva header>a:first-child{font-size:20px;letter-spacing:.08em;font-weight:300}#perspetiva header strong{font-weight:800}#perspetiva header small{display:block;font-size:8px;letter-spacing:.2em;color:#667994}#perspetiva header>a:last-child{font-size:12px}#perspetiva main{width:min(1440px,91%);margin:15px auto 20px;display:grid;grid-template-columns:minmax(280px,370px) minmax(0,1fr);grid-template-areas:'intro stage' 'controls stage' 'gesture stage';column-gap:40px;row-gap:18px;align-items:start}#perspetiva .intro{grid-area:intro;padding-top:24px}#perspetiva .eyebrow{font-size:9px;letter-spacing:.16em;color:#536e9c;margin:0 0 22px}#perspetiva h1{font:500 clamp(40px,4vw,62px)/1.04 'Space Grotesk',Arial,sans-serif;letter-spacing:-.055em;margin:0 0 23px}#perspetiva .mobile-title{display:none}#perspetiva em{font-style:normal;color:#2e59d9}#perspetiva #copy{font-size:14px;color:#596e8d;line-height:1.8;margin:0}#perspetiva .game-stage{grid-area:stage;position:relative;height:min(700px,calc(100svh - 125px));min-height:500px;overflow:hidden;border:1px solid #cbd2df70;border-radius:22px;background:#f0ede5;isolation:isolate}#world{position:relative;display:block;width:100%;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}#world:active{cursor:grabbing}#perspetiva .level{position:absolute;z-index:2;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.12em;color:#56708e;pointer-events:none;background:#f0ede5d9;padding:6px 9px;border-radius:8px}#perspetiva .controls{grid-area:controls;background:#faf9f4;border:1px solid #c7d0de;border-radius:18px;padding:18px;min-width:0}#perspetiva .status{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.5;color:#536b88;min-height:32px}#perspetiva .dot{width:7px;height:7px;border-radius:50%;background:#91a3be;flex-shrink:0}#perspetiva[data-aligned=true] .dot{background:#1c9b79;box-shadow:0 0 0 4px #1c9b7918}#perspetiva[data-aligned=true] .status{color:#24765e}#perspetiva .rotate{display:flex;gap:12px;align-items:center;margin:12px 0}#perspetiva .rotate button{width:44px;height:44px;flex-shrink:0;background:transparent;border:1px solid #bfcbdd;border-radius:50%;color:#3f5e8b;font-size:19px}#perspetiva label{display:block;min-width:0;flex:1;font-size:10px;letter-spacing:.07em;color:#617796;text-align:center;line-height:1.5}#perspetiva input[type=range]{display:block;width:100%;min-width:0;margin:2px 0 0;min-height:40px;accent-color:#305bdc;touch-action:pan-y}#perspetiva #cross{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;border:0;background:#254fcd;color:white;padding:13px;border-radius:10px;font-size:13px;line-height:1.5}#perspetiva #cross:disabled{background:#e0e5ed;color:#5f7290;cursor:default}#perspetiva .small-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;margin-top:10px}#perspetiva .small-actions button{background:transparent;border:0;color:#516c96;font-size:11px;min-height:40px;padding:7px 4px}#perspetiva .small-actions button:disabled{opacity:.45;cursor:default}#perspetiva .travel-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;border-top:1px solid #d4dce7;padding-top:14px}#perspetiva .travel-controls button{border:1px solid #bccce4;background:#edf2fc;color:#294b83;border-radius:8px;padding:9px;font-size:11px;min-height:44px;line-height:1.5}#perspetiva .travel-controls label{grid-column:1/-1;text-align:left;margin-top:2px}#perspetiva .gesture{grid-area:gesture;font-size:11px;line-height:1.7;color:#647b99;margin:0}#perspetiva footer{font-size:9px;letter-spacing:.14em;color:#75869e;padding:15px 4.5% 22px;text-align:center}#perspetiva #success,#perspetiva #fallback{position:fixed;inset:0;z-index:20;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:#f2f0e8f5;backdrop-filter:blur(16px)}#perspetiva h2{font:500 clamp(38px,5.7vw,78px)/1.04 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;margin:15px 0 25px}#perspetiva #success p:not(.eyebrow){color:#586e90;line-height:1.8}#perspetiva #play-again{min-height:48px;border:0;background:#2e59d9;color:white;padding:14px 22px;border-radius:100px;font-size:13px;margin-top:18px}#perspetiva #success a{font-size:12px;max-width:350px;margin-top:24px;color:#3d5e99}@media(max-width:1000px) and (min-width:801px){#perspetiva main{column-gap:20px;grid-template-columns:300px minmax(0,1fr)}#perspetiva h1{font-size:43px}#perspetiva .game-stage{min-height:620px}}@media(max-width:800px){#perspetiva header{padding:15px 20px;min-height:67px}#perspetiva header>a:first-child{font-size:17px}#perspetiva header small{font-size:7px}#perspetiva header>a:last-child{font-size:11px}#perspetiva main{width:calc(100% - 32px);max-width:580px;margin:8px auto 10px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'stage' 'controls' 'gesture';gap:14px}#perspetiva .intro{padding:0 4px}#perspetiva .intro .eyebrow{display:none}#perspetiva .desktop-title{display:none}#perspetiva .mobile-title{display:block}#perspetiva h1{font-size:clamp(27px,7.2vw,38px);line-height:1.08;letter-spacing:-.05em;margin-bottom:10px}#perspetiva #copy{font-size:13px;line-height:1.6}#perspetiva .game-stage{width:100%;height:clamp(285px,43svh,420px);min-height:0;border-radius:16px}#perspetiva .level{top:9px;left:9px;right:9px;font-size:9px;letter-spacing:.08em;padding:5px 7px}#perspetiva .controls{padding:14px;border-radius:16px}#perspetiva .rotate{margin:8px 0}#perspetiva .small-actions{margin-top:5px}#perspetiva .gesture{padding:0 4px;font-size:11px}#perspetiva footer{font-size:8px;line-height:1.7;padding:12px 20px 20px}}@media(prefers-reduced-motion:reduce){#perspetiva *{scroll-behavior:auto!important}}
@media(max-width:800px){#perspetiva[data-review=true] .rotate{display:none}#perspetiva[data-review=true] #cross{margin-top:9px}#perspetiva[data-review=true] .travel-controls{margin-top:10px;padding-top:10px;gap:7px}#perspetiva[data-review=true] .small-actions button#hint{display:none}#perspetiva[data-review=true] .small-actions{justify-content:space-between}}
