:root { font-family: 'Avenir Next', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #393348; background: #efedf7; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 45% 30%, #fbfaff 0, #f0edf8 65%, #e8e5f3 100%); }
.workspace { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4.5vw, 76px); min-height: 100dvh; padding: 24px; }
.notes { width: 256px; }
.eyebrow { font-size: 9px; letter-spacing: 2.6px; font-weight: 600; color: #a398b5; }
.eyebrow span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #a9c48f; margin-right: 7px; }
h1 { margin: 27px 0 20px; font-size: 43px; letter-spacing: -2px; line-height: 1.4; font-weight: 650; }
.intro { font-size: 12px; color: #94869f; line-height: 1.95; margin-bottom: 37px; }
.rule { display: flex; align-items: flex-start; gap: 14px; margin: 18px 0; }
.rule > span { font-size: 9px; color: #ac9cbf; padding-top: 4px; }
.rule p { margin: 0; font-size: 12px; color: #75647f; }
.rule small { display: block; margin-top: 6px; font-size: 10px; color: #aaa0b3; }
.shortcuts { font-size: 10px; color: #a195ad; line-height: 2.8; margin-top: 29px; }
kbd { display: inline-flex; height: 19px; min-width: 19px; align-items: center; justify-content: center; border: 1px solid #d8cde3; border-radius: 4px; padding: 0 4px; margin-right: 4px; font: 9px inherit; background: #ffffff44; }
.phone { --safe-top: 0px; --safe-bottom: 0px; position: relative; width: 390px; height: min(844px, calc(100dvh - 48px)); flex: none; border-radius: 28px; overflow: hidden; background: #f5f2fc; box-shadow: 0 0 0 1px #dad3e7, 0 18px 60px #57467212, 0 3px 8px #5746720c; }
#game { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#game:focus-visible { outline: 2px solid #b4a0d8; outline-offset: -3px; }
.inspector { width: 204px; }
h2 { font-size: 24px; font-weight: 550; line-height: 1.6; margin: 18px 0 23px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button { color: #8e7da0; font: 11px inherit; font-family: inherit; font-size: 11px; padding: 9px 6px; background: #ffffff50; border: 1px solid #dcd2e8; border-radius: 9px; cursor: pointer; }
button:hover { background: #eee6f8; }
button:focus-visible { outline: 2px solid #a68cce; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.mode-controls { display: flex; gap: 5px; margin-top: 17px; }
.mode-controls button { flex: 1; }
.play-modes { margin: 0 0 14px; }
button[aria-pressed=true] { color: #7e63a7; background: #e8def5; border-color: #bfa9db; }
.primary { display: block; width: 100%; background: linear-gradient(135deg, #ad94de, #8d72c5); color: #fff; border: 0; margin-top: 10px; padding: 11px; }
.primary:hover { background: #9b80cd; }
#status { color: #a69aaf; font-size: 10px; line-height: 1.8; min-height: 36px; }
.note { font-size: 9px; line-height: 1.9; color: #b0a4bb; margin-top: 24px; }
a { font-size: 10px; color: #a696b7; text-underline-offset: 3px; }
#dialog-controls { border-top: 1px solid #ded5e8; padding-top: 6px; }
#dialog-controls h3 { font-size: 12px; color: #806b93; font-weight: 500; }
#dialog-controls button { width: 100%; margin-bottom: 5px; }
[hidden] { display: none !important; }
@media(max-width: 1050px) { .inspector { display: none; } .workspace { gap: 40px; } }
@media(max-width: 700px) { .notes { display: none; } .workspace { padding: 0; } .phone { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; } }