:root{color-scheme:dark;--ink:#07182a;--brass:#bca37a;--game-width:1100px;font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#d8e7f2;background:var(--ink)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow-x:hidden;background:radial-gradient(ellipse at 50% 45%,#123b57a6,transparent 67%),linear-gradient(90deg,#163d542e 1px,transparent 1px),linear-gradient(#163d542e 1px,transparent 1px),linear-gradient(150deg,#071322,#092339 60%,#061220);background-size:auto,40px 40px,40px 40px,auto}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(0deg,#020b16aa,transparent 25%,transparent 75%,#020b1677)}
.experience{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:28px;padding:24px 24px 0;width:100%}
.console{position:relative;flex:none;width:var(--game-width);max-width:100%;padding:0 13px;background:linear-gradient(120deg,#28475b,#0a1c2e 12%,#0b2033 85%,#27475a);border:1px solid #5b859b;border-radius:20px;box-shadow:0 0 0 4px #071522,0 0 0 5px #315169,0 24px 80px #0009,inset 0 0 0 4px #071522}
.console::before,.console::after{content:"";position:absolute;top:40%;height:66px;width:3px;border-radius:6px;background:#9af0ff;box-shadow:0 0 8px #49d7ff,0 0 20px #38b5ec88;pointer-events:none}.console::before{left:-4px}.console::after{right:-4px}
.corner{position:absolute;width:25px;height:25px;border-color:var(--brass);border-style:solid;border-width:0;pointer-events:none;opacity:.85}.corner-tl{top:6px;left:6px;border-top-width:2px;border-left-width:2px;border-radius:12px 0 0}.corner-tr{top:6px;right:6px;border-top-width:2px;border-right-width:2px;border-radius:0 12px 0 0}.corner-bl{bottom:6px;left:6px;border-bottom-width:2px;border-left-width:2px;border-radius:0 0 0 12px}.corner-br{bottom:6px;right:6px;border-bottom-width:2px;border-right-width:2px;border-radius:0 0 12px}
.toolbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px}.wordmark{font-family:Georgia,"Times New Roman",serif;font-size:27px;letter-spacing:-1.5px;font-weight:bold;color:#edf5fb;white-space:nowrap;text-shadow:0 1px 8px #0006}.wordmark span{color:#75def6}
.toolbar-actions{display:flex;align-items:center;gap:14px}.tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:#d4e5ef;font:500 13px/1.2 "Malgun Gothic",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.tool:hover:not([aria-disabled=true]){color:#baf3ff;background:#5ac6f014;border-color:#76c6e343}.tool:focus-visible{outline:2px solid #91e8ff;outline-offset:3px}.tool[aria-disabled=true]{cursor:default;color:#93adbf}.tool small{font-size:10px;border:1px solid #53708377;border-radius:4px;padding:3px 5px;color:#8da4b4}.toolbar-divider{height:17px;width:1px;background:#42617588}
.screen-rim{padding:3px;border:1px solid #6c9aaf;background:linear-gradient(135deg,#89aebe44,#050d1888,#67ddf933);box-shadow:0 0 0 2px #020c16,inset 0 0 12px #86ddff15;border-radius:10px;overflow:hidden}.game-viewport{position:relative;width:100%;aspect-ratio:1280/780;background:#000;overflow:hidden;border-radius:6px;isolation:isolate}#game-frame{position:absolute;width:1280px;height:780px;border:0;display:block;transform-origin:0 0;background:#000}
.console-bottom{height:18px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:7px;letter-spacing:3px;color:#7393a7}.console-bottom i{height:1px;width:30px;background:linear-gradient(90deg,transparent,#577685,transparent)}
.reflection{flex:0 0 140px;color:#a5c8de;line-height:1.9;font-size:16px;word-break:keep-all}.reflection p{margin:15px 0}.eyebrow{font-size:8px;letter-spacing:2px;color:#587f9b;line-height:1.8;display:block}.reflection-rule{display:block;width:28px;height:1px;background:#a3a48a}.reflection-right .reflection-rule{background:#6cb8d7}
.page-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:18px;padding:24px 14px 28px;color:#9fb8c8;font-size:12px;letter-spacing:1px;text-align:center}.page-footer p{margin:0}.page-footer>span{width:34px;height:1px;background:#50748a}
.orb{position:fixed;width:240px;height:240px;border:1px solid #34728b33;border-radius:50%;pointer-events:none;top:8%;left:-90px;opacity:.65}.orb::before,.orb::after{content:"";position:absolute;border:1px solid #34728b44;border-radius:50%;inset:28px}.orb::after{inset:60px}.orb-right{left:auto;right:-120px;top:auto;bottom:10%;width:320px;height:320px}
.console:fullscreen,.console.is-expanded{width:100vw!important;max-width:none;height:100dvh;border:0;border-radius:0;padding:0 8px;display:flex;flex-direction:column;background:#061220;box-shadow:none}.console.is-expanded{position:fixed;inset:0;z-index:100}.console:fullscreen .toolbar,.console.is-expanded .toolbar{height:48px;flex:none}.console:fullscreen .screen-rim,.console.is-expanded .screen-rim{flex:1;min-height:0;display:flex;padding:0;border:0;border-radius:0}.console:fullscreen .game-viewport,.console.is-expanded .game-viewport{aspect-ratio:auto;flex:1;border-radius:0}.console:fullscreen .console-bottom,.console.is-expanded .console-bottom{height:10px;flex:none}.console:fullscreen .corner,.console.is-expanded .corner{display:none}
@media(max-width:1150px){.reflection{display:none}.experience{padding:22px 18px 0}.page-footer{padding:20px 12px;font-size:11px}}
@media(max-width:600px){.experience{padding:16px 8px 0}.console{padding:0 6px;border-radius:13px}.toolbar{height:52px;padding:0 7px;gap:5px}.wordmark{font-size:22px}.toolbar-actions{gap:3px}.tool{font-size:11px;gap:5px;padding:6px}.tool svg{width:14px;height:14px}.tool small{font-size:9px;padding:2px 3px}.toolbar-divider{display:none}.screen-rim{padding:1px;border-radius:5px}.game-viewport{border-radius:3px}.page-footer{font-size:10px;letter-spacing:0;gap:9px}.page-footer>span{width:15px}.console::before,.console::after{height:32px;width:2px}}
@media(max-height:500px) and (orientation:landscape){.experience{padding-top:8px}.toolbar{height:42px}.page-footer{padding:10px}.console-bottom{height:10px}}
