@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,450,70,1&display=swap');
:root{--paper:#f5f0e7;--ink:#2a2a24;--orange:#e77c40;--sage:#879481;--line:#d9d1c6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.xp-wrap{max-width:1220px;width:calc(100% - 72px);margin:auto}.xp-nav{height:90px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.xp-logo{width:96px;height:62px;display:flex;align-items:center}.xp-logo img{width:100%;height:100%;object-fit:contain}.xp-links{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700}.xp-links a:hover{color:#c36937}.xp-pill,.xp-control{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 19px;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:999px;font-weight:700;font-size:13px;transition:transform .2s}.xp-pill:hover,.xp-control:hover{transform:translateY(-2px)}.xp-control{background:transparent;color:var(--ink);border-color:#b9b0a3}.xp-mini{font-size:11px;text-transform:uppercase;letter-spacing:.17em;font-weight:700;color:#79766a}.xp-hero{padding:65px 0 46px;display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}.xp-hero h1{font-size:clamp(52px,7vw,96px);letter-spacing:-.08em;line-height:1;margin:18px 0 25px}.xp-hero em,h2 em{font:italic 450 1.05 'Fraunces',Georgia,serif;color:#85917d}.xp-hero p{font-size:18px;line-height:1.75;max-width:550px;color:#626258}.xp-hero-image{height:360px;background:#e8ded1;border-radius:190px 190px 18px 18px;overflow:hidden;position:relative}.xp-hero-image img{width:100%;height:100%;object-fit:cover}.xp-tag{position:absolute;bottom:14px;left:14px;background:#f5f1e8e6;padding:6px 10px;border-radius:30px;font-size:10px}.xp-main{padding:28px 0 100px}.xp-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);gap:27px}.xp-device-zone{background:#ddd6c9;border-radius:22px;min-height:570px;display:grid;place-items:center;padding:40px 16px}.xp-device{width:265px;max-width:100%;background:linear-gradient(110deg,#e9e0d1,#d7caba);padding:17px;border:2px solid #bfb2a3;border-radius:28px;box-shadow:14px 22px 22px #6e655337}.xp-display{height:335px;background:#f6f4eb;border:13px solid #292d28;border-radius:15px;overflow:hidden;padding:13px;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace}.xp-status{display:flex;justify-content:space-between;border-bottom:2px solid #31332e;padding-bottom:8px;font-size:10px}.xp-screen-body{height:265px;overflow:auto;padding-top:13px}.xp-dial{margin:14px auto 0;width:77px;height:77px;border:7px solid #ede4d7;outline:3px solid #e48444;box-shadow:0 2px 3px #0004;display:grid;place-items:center;border-radius:50%;background:#d1c5b6;color:#252722;font-size:25px;user-select:none}.xp-panel{padding:32px;background:#f9f5ed;border:1px solid var(--line);border-radius:18px}.xp-panel h2{font-size:clamp(31px,3vw,45px);line-height:1.1;letter-spacing:-.05em;margin:12px 0 18px}.xp-panel p{color:#616256}.xp-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.xp-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}.xp-tab{background:transparent;padding:9px 12px;border:1px solid #bdb5a6;border-radius:9px;color:#242720;font-weight:700}.xp-tab.active{background:#282d27;color:#fff}.xp-field{width:100%;border:1px solid #bdb3a3;background:#fffdf8;padding:14px;border-radius:8px;margin:8px 0 16px}.xp-note{background:#e9e5da;border-left:3px solid var(--orange);padding:13px 16px;font-size:13px;color:#4d5049}.xp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.xp-tile{background:#e8e1d6;border-radius:15px;padding:25px}.xp-tile h3{margin:7px 0}.xp-tile p{font-size:13px;color:#686458}.xp-footer{background:#30352d;color:#f6f2e9;padding:30px 0;margin-top:40px}.xp-footer .xp-wrap{display:flex;gap:20px;justify-content:space-between;align-items:center}.xp-footer a{font-size:12px}.xp-game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.xp-cell{aspect-ratio:1;border:1px solid #60635c;background:#ece9dd;display:grid;place-items:center;font-size:21px;font-weight:800;cursor:pointer}.xp-cell.v2{background:#cccfc4}.xp-cell.v4{background:#9baca0}.xp-cell.v8{background:#757e73;color:#fff}.xp-cell.v16,.xp-cell.v32,.xp-cell.v64{background:#343833;color:#fff}.xp-keys{display:grid;grid-template-columns:repeat(3,40px);justify-content:center;gap:7px}.xp-keys button{height:37px;background:#2c302b;color:#fff;border:0;border-radius:6px}.xp-pixel{image-rendering:pixelated;width:100%;max-width:350px;background:#fff;display:block;border:12px solid #262925}.xp-gallery{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.xp-gallery a{font-size:12px;border-bottom:1px solid}.xp-cta{padding:35px;background:#dfe5d9;border-radius:15px;margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.xp-cta h2{font-size:33px;margin:0;line-height:1.2}.xp-cta p{font-size:13px;max-width:650px}.xp-meter{width:100%;height:5px;background:#ddd7ca;margin-top:12px}.xp-meter span{display:block;background:#30332e;height:100%;width:35%}.xp-input-row{display:flex;gap:7px;flex-wrap:wrap}.xp-input-row input{flex:1;min-width:140px}.xp-mark{width:68px;height:68px;object-fit:contain}.xp-small{font-size:11px;color:#797467}.xp-survey{display:grid;gap:13px}#xp-log{min-height:38px;font-size:13px;color:#4e6551}.xp-tic{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.xp-tic button{aspect-ratio:1;background:#eeeadd;border:1px solid #444;font:bold 33px monospace}.xp-tic button:disabled{opacity:1}.xp-voice{font-size:11px;color:#756d60}.xp-photo-preview{display:flex;gap:10px;flex-wrap:wrap;align-items:start}.xp-photo-preview img{max-width:140px;max-height:160px;object-fit:contain}.xp-sep{border-top:1px solid var(--line);margin:23px 0}.xp-message{border:1px solid #888b80;padding:14px;margin:10px 0;background:#f5f3eb;font:13px monospace}.xp-message.reply{text-align:right;background:#d9ded2}.xp-feature{display:none}.xp-feature.active{display:block}@media(max-width:800px){.xp-wrap{width:calc(100% - 32px)}.xp-links{gap:9px;flex-wrap:wrap;justify-content:end}.xp-links a{font-size:11px}.xp-nav{height:auto;min-height:84px;padding:9px 0}.xp-hero,.xp-workspace{grid-template-columns:1fr}.xp-hero{padding:45px 0}.xp-hero-image{height:300px}.xp-device-zone{min-height:480px}.xp-device{transform:scale(.88)}.xp-grid{grid-template-columns:1fr}.xp-footer .xp-wrap,.xp-cta{flex-direction:column;align-items:start}}

.xp-hero-image{background:#e5e7dc;border-radius:220px 220px 20px 20px;display:grid;place-items:center}.xp-hero-image img.xp-hero-mark{height:73%;width:65%;object-fit:contain}.xp-hero-image:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#786d5a26 .6px,transparent .8px);background-size:6px 6px}.xp-nav .xp-logo img{width:100%;height:100%;object-fit:contain}.xp-cta{background:#e6e7db}
.xp-logo img[src="/assets/logo-lockup-v3.png"]{width:auto;height:58px;max-width:none}
@media (max-width:640px){.xp-logo img[src="/assets/logo-lockup-v3.png"]{height:46px}}

/* v3 polish */
.announcement{color:#3a3a33!important;opacity:1!important}
.announcement *{color:#3a3a33!important}
.screen-view{display:flex;flex-direction:column}
.screen-view .pixel-hero.dith{filter:none;object-fit:cover;width:100%;height:170px;image-rendering:pixelated;border:1px solid #2b2b26}
.ink-sudoku{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid #222;width:100%;max-width:240px;aspect-ratio:1;margin:8px 0 6px}
.ink-sudoku span{display:grid;place-items:center;font-size:26px;border-right:1px solid #bdb8aa;border-bottom:1px solid #bdb8aa}
.ink-sudoku span:nth-child(4n){border-right:0}.ink-sudoku span:nth-child(n+13){border-bottom:0}
.ink-sudoku span:nth-child(4n+2){border-right:2px solid #222}.ink-sudoku span:nth-child(n+5):nth-child(-n+8){border-bottom:2px solid #222}
.ink-meta{font-size:10px!important;letter-spacing:.14em;color:#6b6a60;margin:0 0 4px}
.ink-replies{list-style:none;padding:0;margin:4px 0 0;font-size:13px}
.ink-replies li{padding:7px 10px;border-bottom:1px solid #dcd7c9}.ink-replies li.on{background:#222;color:#f5f1e9}
.xp-hero-image{display:grid!important;place-items:center!important}
.xp-hero-image img.xp-hero-mark{width:auto!important;height:auto!important;max-height:82%!important;max-width:58%!important;object-fit:contain!important;position:relative;z-index:1}
.hero-star{width:120px!important;height:115px!important}
.postcard-top img{width:58px;height:58px;object-fit:contain}
.xp-hero-image img.xp-hero-mark{height:235px!important;max-height:none!important;width:auto!important;max-width:70%!important;margin-top:-28px}
@media(max-width:740px){.xp-hero-image img.xp-hero-mark{height:180px!important}}
.xp-logo img[src="/assets/logo-lockup-v3.png"]{height:78px!important;width:auto!important}
@media(max-width:640px){.xp-logo img[src="/assets/logo-lockup-v3.png"]{height:58px!important}}
/* ---- per-page hero variants (Play = original) ---- */
/* 02 Wallpaper lab: mirrored layout, dark square "print" card */
.pg-02 .xp-hero{direction:rtl}.pg-02 .xp-hero>*{direction:ltr}
.pg-02 .xp-hero-image{border-radius:28px!important;background:#24241f!important;transform:rotate(-2deg);box-shadow:14px 16px 0 #d9d2c3}
.pg-02 .xp-hero-image:after{background-image:radial-gradient(#ffffff1f .6px,transparent .8px)!important}
.pg-02 .xp-hero-image img.xp-hero-mark{filter:invert(1) sepia(.25) brightness(1.05);margin-top:-10px}
.pg-02 .xp-hero h1 em{color:#c86a33}
/* 03 ink circle: round porthole, warm orange wash */
.pg-03 .xp-hero-image{border-radius:50%!important;aspect-ratio:1/1;height:auto!important;max-width:440px;width:100%;justify-self:center;background:#f3dccb!important;border:2px dashed #e07a3f}
.pg-03 .xp-hero-image img.xp-hero-mark{height:200px!important;margin-top:-6px}
.pg-03 .xp-tag{left:50%!important;transform:translateX(-50%);white-space:nowrap}
.pg-03 .xp-hero h1 em{color:#e07a3f}
/* 04 Join: dark inverted hero band */
.pg-04 .xp-hero{background:#23231f;color:#f3eee3;border-radius:36px;padding:56px 52px!important;margin-top:24px}
.pg-04 .xp-hero h1{color:#f3eee3}.pg-04 .xp-hero h1 em{color:#e9874c}
.pg-04 .xp-hero p,.pg-04 .xp-mini{color:#cfc8b8!important}
.pg-04 .xp-pill{background:#f3eee3!important;color:#23231f!important}
.pg-04 .xp-hero-image{background:#f3eee3!important;border-radius:24px 24px 220px 220px!important}
@media(max-width:740px){.pg-04 .xp-hero{padding:34px 22px!important;border-radius:24px}.pg-02 .xp-hero-image{transform:none}}
/* image crops: show whole image, no letterboxing */
.design-main img,.design-tile img,.nostalgia-photo img{width:100%!important;height:auto!important;object-fit:contain!important;display:block;background:transparent!important}
.design-main,.design-tile{background:#ece9e3}
.nostalgia-photo{background:transparent!important}
.pg-02 .xp-hero-image img.xp-hero-mark{filter:invert(1) hue-rotate(180deg) brightness(1.05)!important}
.pg-03 .xp-tag{bottom:13%!important;font-size:9px}
.pg-04 .xp-tag{background:#23231f!important;color:#f3eee3!important}
.xp-hero{padding-top:34px!important}
.xp-tag{left:50%!important;transform:translateX(-50%);white-space:nowrap;bottom:16px!important}
.pg-04 .xp-hero-image{overflow:hidden}
.pg-04 .xp-tag{bottom:22%!important}
.pg-03 .xp-tag{bottom:13%!important}
.xp-hero-image{max-width:100%}
.pg-04 .xp-tag{display:none!important}