body.lilo-game { background:#edf8fa; color:#2c5868; }
body.lilo-game .site-header,body.lilo-game > footer { display:none; }
body.lilo-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.ls-shell { min-height:100dvh; padding:8px 0 20px; }.ls-shell * { box-sizing:border-box; letter-spacing:0; }.ls-shell h1,.ls-shell h2,.ls-shell h3,.ls-shell p { margin-top:0; }.ls-shell h2:focus { outline:none; }
.ls-shell button,.ls-shell .button,.ls-shell summary { min-width:48px; min-height:48px; font:inherit; font-size:17px; line-height:1.3; border-radius:6px; }.ls-shell button { cursor:pointer; }.ls-shell button:disabled { cursor:default; }.ls-shell button:focus-visible,.ls-shell a:focus-visible,.ls-shell summary:focus-visible { outline:4px solid #ad60a6; outline-offset:3px; }
.ls-shell .ls-primary { padding:11px 18px; color:white; background:#278d9c; border:2px solid #216b81; box-shadow:0 3px 0 #225d74; font-weight:750; font-size:18px; }.ls-shell .ls-primary:hover { background:#217b8a; }.ls-shell .ls-primary:disabled { background:#dfebed; border-color:#adc6cb; color:#73949e; box-shadow:none; }.ls-shell .ls-secondary { color:#416579; background:#fffdf3; border:2px solid #b4cdd1; padding:9px 14px; font-size:16px; }
.ls-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:66px; padding-bottom:8px; }.ls-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 4px; }.ls-toolbar span { font-size:13px; }.ls-toolbar .ls-back { color:#79384b; font-size:14px; padding:8px; white-space:nowrap; }.ls-toolbar .ls-sound { width:48px; padding:0; }.ls-motion { display:flex; align-items:center; gap:5px; font-size:13px; }.ls-motion input { width:22px; height:22px; accent-color:#278d9c; }
.ls-cover { text-align:center; }.ls-cover > span { display:block; margin:12px 0 8px; color:#ad6c48; font-size:15px; font-weight:700; }.ls-cover h2 { font-size:32px; color:#277b88; margin:0 0 12px; }.ls-cover p { max-width:790px; margin:0 auto 12px; font-size:19px; line-height:1.45; }.ls-cover .ls-stitch-reply { color:#666195; font-size:17px; margin-bottom:17px; }.ls-cover-image { width:100%; height:auto; display:block; }.ls-cover > .ls-cover-image { max-height:400px; object-fit:contain; margin:18px auto 12px; }.card-art .ls-cover-image { width:100%; height:100%; object-fit:contain; background:#fcf4d3; }.ls-cover .ls-cover-note { font-size:15px; }
.ls-task-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:5px 0; }.ls-task-heading > span { font-size:16px; font-weight:700; color:#a66b4e; }.ls-task-heading h2 { font-family:inherit; font-size:25px; line-height:1.25; margin:0; }.ls-instruction { font-family:inherit; font-size:20px; line-height:1.35; margin:8px 0 10px; min-height:27px; }
.ls-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:stretch; }.ls-board { padding:12px 16px; background:#387e70; border:7px solid #b69a75; border-radius:6px; }.ls-chalk-rows { display:grid; gap:4px; }.ls-row { display:flex; align-items:center; justify-content:center; gap:13px; min-height:52px; border-radius:4px; }.ls-chalk-number,.ls-symbol { color:#fff9de; font-size:29px; font-weight:700; width:60px; text-align:center; line-height:1.3; }.ls-symbol { width:30px; font-size:26px; }.ls-shell .ls-blank { color:#326c77; width:64px; height:50px; padding:0 4px; font-size:28px; font-weight:800; background:#fcf5d9; border:2px solid #bed2b1; box-shadow:0 2px 0 #275c52; }.ls-shell .ls-blank:disabled { opacity:1; }.ls-shell .ls-active { border-color:#f8cb5a; outline:3px solid #f7d46e; outline-offset:2px; background:#fff3a8; }.ls-row-review { background:#b7656255; }.ls-row-correct { background:#9cd8a422; }.ls-sticker-label { font-size:13px; color:#e3f5de; text-align:center; margin:12px 0 7px; }.ls-stickers { display:flex; justify-content:center; gap:15px; }.ls-shell .ls-sticker { width:76px; height:58px; padding:5px; background:#f0b3a4; border:2px solid #c9897a; box-shadow:0 3px 0 #296557; color:#3c5869; font-size:30px; font-weight:800; }.ls-sticker:nth-child(2) { background:#a5ddd2; border-color:#6eaca5; }.ls-shell .ls-sticker-whole { background:#f5d782; border-color:#c3a955; }.ls-sticker:disabled { opacity:1; }
.ls-notebook { position:relative; min-height:345px; padding:16px 24px 14px; background:repeating-linear-gradient(0deg,#fffdf3 0 31px,#e0e9e4 31px 33px); border:2px solid #b5cecf; border-left:9px solid #df9697; border-radius:6px; }.ls-notebook-label { font-size:14px; font-weight:700; color:#7b8e9a; }.ls-note-equation { font-size:36px; font-weight:800; color:#3a5f77; margin:10px 0 12px; line-height:1.3; text-align:center; }.ls-note-equation del { color:#b3767b; font-size:26px; }.ls-note-equation strong { color:#327968; }.ls-proof { min-height:143px; padding:10px 15px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#eef3f6ee; border:1px dashed #bacbd3; border-radius:6px; color:#678592; font-size:18px; text-align:center; gap:5px; }.ls-proof-visible { color:#335a70; background:#eff8f2ee; border:2px solid #abcdbb; }.ls-proof > strong { font-size:31px; line-height:1.25; }.ls-proof > span:first-child { font-size:14px; }.ls-expected { font-size:19px; }.ls-proof small { font-size:15px; line-height:1.3; }.ls-stamp-space { min-height:57px; padding-top:12px; display:flex; align-items:center; justify-content:center; }.ls-stamp-space > span { color:#9aaba9; font-size:14px; }.ls-stamp-print { border:3px solid currentColor; border-radius:5px; padding:6px 16px; font-size:21px; font-weight:800; transform:rotate(-6deg); }.ls-stamp-good { color:#478773; }.ls-stamp-fix { color:#b46a71; }
.ls-scene { position:relative; min-height:345px; background:#fcf4d3; border:2px solid #b9d3cb; border-radius:6px; isolation:isolate; }.ls-classroom { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }.ls-model-wrap { position:absolute; top:8px; left:8px; right:8px; height:145px; background:#fffef1f2; border:1px solid #c6dbca; border-radius:5px; display:grid; place-items:center; z-index:2; }.ls-family-model { position:relative; height:130px; width:260px; max-width:100%; }.ls-family-model > svg { width:100%; height:100%; position:absolute; inset:0; }.ls-family-model > div { position:absolute; width:68px; height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #c9937c; border-radius:6px; background:#f1b1a0; color:#345c69; }.ls-family-model small { font-size:11px; line-height:1.2; }.ls-family-model b { font-size:27px; line-height:1.2; }.ls-family-model .ls-whole { left:calc(50% - 34px); top:0; background:#f7d985; border-color:#c7ae61; }.ls-part-a { left:8%; bottom:0; }.ls-family-model .ls-part-b { right:8%; bottom:0; background:#a4dad0; border-color:#77b2a8; }.ls-model-highlight .ls-whole { outline:3px solid #d6ac4c; outline-offset:2px; }.ls-model-highlight .ls-part { outline:2px solid #a8c7bf; outline-offset:2px; }.ls-scene-lilo { position:absolute; left:2%; bottom:8%; width:45%; height:43%; z-index:1; }.ls-scene-stitch { position:absolute; right:1%; bottom:5%; width:50%; height:40%; z-index:1; }.ls-lilo,.ls-stitch { display:block; width:100%; height:100%; }
.ls-feedback { min-height:86px; padding:9px 12px; margin:10px 0; background:#fffdf3; border:1px solid #c4d8d6; border-left:5px solid #ebc46a; border-radius:5px; font-size:18px; line-height:1.4; display:flex; flex-direction:column; justify-content:center; }.ls-feedback strong { font-size:14px; color:#966581; }.ls-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; }.ls-help-actions { display:flex; gap:8px; flex-wrap:wrap; max-width:310px; justify-content:flex-end; }.ls-help-actions button { font-size:15px!important; }.ls-action-choices { display:flex; gap:14px; }.ls-shell .ls-op { background:#fffdf4; color:#376d81; border:2px solid #aacbd1; padding:9px 16px; font-weight:700; font-size:18px; min-width:165px; }.ls-op b { font-size:27px; display:inline-block; margin-right:6px; vertical-align:middle; }.ls-shell .ls-stamp-button { padding:10px 18px; border:3px solid currentColor; background:#fffdf5; font-weight:800; font-size:19px; min-width:165px; }.ls-wait { font-size:18px; font-weight:700; color:#5d9483; min-height:56px; display:flex; align-items:center; }
.ls-album-strip { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0; margin:12px 0 0; }.ls-album-strip li { padding:7px; text-align:center; border-bottom:3px solid #c8dcd6; color:#91a7a8; background:#f7fcf7; }.ls-album-strip strong { font-size:17px; display:block; }.ls-album-strip span { font-size:12px; display:block; margin-top:3px; }.ls-album-strip .ls-current-family { border-color:#e7c063; color:#55768a; background:#fff7d3; }.ls-album-strip .ls-page-earned { border-color:#7cb89f; color:#4d8277; background:#eef9ed; }
.ls-finish { text-align:center; }.ls-finish h2 { font-size:30px; color:#287e8a; margin:12px 0; }.ls-finish > p { font-size:19px; line-height:1.45; max-width:850px; margin:0 auto 16px; }.ls-album { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:14px 0; border-top:5px solid #d9be90; border-bottom:5px solid #d9be90; background:#f8f1df; }.ls-album-page { background:#fffef6; border:1px solid #ddcfa9; border-radius:5px; padding:10px; min-width:0; }.ls-album-title { font-size:14px; font-weight:700; color:#648978; }.ls-album .ls-family-model { width:210px; height:118px; margin:10px auto; }.ls-album-equalities { font-size:20px; line-height:1.55; font-weight:700; color:#447781; }.ls-album-friends { display:flex; height:64px; justify-content:center; gap:10px; margin-top:8px; }.ls-album-friends svg { width:70px; height:100%; }.ls-album-full { grid-template-columns:1fr 1fr; gap:18px; padding:16px; }.ls-album-full .ls-album-page { padding:18px; }.ls-album-full .ls-album-equalities { font-size:26px; }.ls-album-full .ls-album-friends { height:110px; }.ls-album-full .ls-album-friends svg { width:110px; }
.ls-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }.ls-stats > div { display:flex; gap:12px; align-items:center; padding:12px; background:#fffdf4; border:1px solid #bad3d4; border-radius:6px; text-align:left; }.ls-stats strong { font-size:33px; color:#388b91; }.ls-stats span { font-size:15px; line-height:1.4; }.ls-finish-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:17px 0; }.ls-finish details { max-width:850px; margin:14px auto; text-align:left; font-size:18px; line-height:1.5; }.ls-finish summary { padding:10px; cursor:pointer; }.ls-finish details p { padding:0 10px; }
.ls-help { width:min(600px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; border:2px solid #9bc4c6; border-radius:8px; padding:24px; color:#2c5868; background:#fffdf3; font-size:18px; line-height:1.5; }.ls-help h2 { font-size:25px; }.ls-help::backdrop { background:#214f6899; }
.phase-success .ls-scene-stitch,.phase-success .ls-scene-lilo { animation:ls-joy .45s ease-in-out 2; }.phase-success .ls-stamp-print { animation:ls-stamp .5s ease-out both; }.ls-paused * { animation:none!important; transition:none!important; }
@keyframes ls-joy { 50% { transform:translateY(-7px); } }@keyframes ls-stamp { from { transform:rotate(-6deg) scale(1.3); opacity:.2; }to { transform:rotate(-6deg) scale(1); opacity:1; } }
@media (min-width:901px) and (max-height:760px) { .ls-shell { padding-top:4px; }.ls-toolbar { min-height:60px; }.ls-board { padding:8px 12px; }.ls-row { min-height:49px; }.ls-shell .ls-blank { height:48px; }.ls-sticker-label { margin-top:8px; }.ls-shell .ls-sticker { height:53px; }.ls-scene,.ls-notebook { min-height:323px; }.ls-feedback { min-height:80px; margin:8px 0; }.ls-album-strip { margin-top:10px; } }
@media (max-width:1000px) { .ls-toolbar { grid-template-columns:auto 1fr auto 48px; }.ls-motion { grid-column:1/-1; justify-self:end; }.ls-layout { grid-template-columns:minmax(0,1fr) 245px; gap:10px; }.ls-model-wrap { left:5px; right:5px; }.ls-family-model { width:230px; }.ls-row { gap:7px; }.ls-chalk-number { width:48px; }.ls-shell .ls-blank { width:57px; }.ls-symbol { width:25px; }.ls-note-equation { font-size:31px; }.ls-notebook { padding:16px; }.ls-controls { align-items:start; }.ls-help-actions { max-width:200px; }.ls-album { grid-template-columns:1fr 1fr; }.ls-album .ls-family-model { width:230px; } }
@media (max-width:760px) { .ls-layout { grid-template-columns:1fr; }.ls-scene { min-height:151px; }.ls-model-wrap { width:210px; height:136px; left:5px; top:5px; }.ls-model-wrap .ls-family-model { width:195px; height:120px; }.ls-family-model > div { width:60px; }.ls-family-model .ls-whole { left:calc(50% - 30px); }.ls-part-a { left:2%; }.ls-family-model .ls-part-b { right:2%; }.ls-scene-lilo { left:auto; right:16%; width:95px; height:130px; bottom:4px; }.ls-scene-stitch { width:100px; height:115px; bottom:4px; }.ls-notebook { min-height:330px; }.ls-feedback { min-height:112px; } }
@media (max-width:600px) { body.lilo-game #app { width:calc(100% - 14px); }.ls-toolbar { grid-template-columns:1fr auto 48px; gap:7px; }.ls-toolbar > div { grid-column:1/-1; grid-row:1; }.ls-toolbar .ls-back { grid-row:2; }.ls-toolbar [data-ls-action="help"] { grid-column:2; grid-row:2; }.ls-toolbar .ls-sound { grid-column:3; grid-row:2; }.ls-motion { grid-column:1/-1; justify-self:start; margin:2px 0 5px; }.ls-toolbar h1 { font-size:18px; }.ls-task-heading { flex-direction:column; align-items:start; gap:5px; }.ls-task-heading h2 { font-size:24px; }.ls-task-heading > span { font-size:14px; }.ls-instruction { font-size:18px; min-height:48px; }.ls-board { padding:10px 6px; border-width:5px; }.ls-row { gap:6px; min-height:54px; }.ls-chalk-number { width:43px; font-size:26px; }.ls-symbol { width:22px; font-size:24px; }.ls-shell .ls-blank { width:51px; height:50px; font-size:26px; }.ls-sticker-label { font-size:12px; }.ls-stickers { gap:12px; }.ls-shell .ls-sticker { width:70px; height:56px; font-size:28px; }.ls-scene { min-height:140px; }.ls-model-wrap { width:170px; height:130px; }.ls-model-wrap .ls-family-model { width:155px; height:116px; }.ls-family-model > div { width:56px; height:52px; }.ls-family-model .ls-whole { left:calc(50% - 28px); }.ls-family-model small { font-size:10px; }.ls-family-model b { font-size:26px; }.ls-scene-lilo { right:19%; width:64px; height:98px; }.ls-scene-stitch { right:0; width:77px; height:94px; }.ls-notebook { padding:12px 9px; }.ls-note-equation { font-size:29px; margin-bottom:14px; }.ls-proof { padding:9px 6px; min-height:150px; }.ls-proof > strong { font-size:27px; }.ls-proof small { font-size:13px; }.ls-feedback { min-height:140px; font-size:17px; }.ls-controls { flex-direction:column; gap:12px; }.ls-controls > .ls-primary { width:100%; }.ls-help-actions { max-width:100%; justify-content:start; }.ls-action-choices { width:100%; gap:8px; }.ls-shell .ls-op,.ls-shell .ls-stamp-button { min-width:0; width:50%; padding:9px 6px; font-size:16px; }.ls-op b { font-size:24px; margin-right:2px; }.ls-album-strip { grid-template-columns:1fr 1fr; gap:6px; }.ls-album-strip strong { font-size:16px; }.ls-cover h2 { font-size:27px; }.ls-cover p { font-size:17px; }.ls-cover .ls-stitch-reply { font-size:16px; }.ls-finish h2 { font-size:27px; }.ls-finish > p { font-size:17px; }.ls-album,.ls-album-full { grid-template-columns:1fr; gap:12px; padding:12px; }.ls-album .ls-family-model { width:230px; height:125px; }.ls-album-equalities,.ls-album-full .ls-album-equalities { font-size:24px; }.ls-album-friends { height:90px; }.ls-album-friends svg { width:90px; }.ls-stats { grid-template-columns:1fr; gap:7px; }.ls-finish-actions { flex-direction:column; }.ls-finish-actions > * { width:100%; }.ls-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .ls-shell * { animation:none!important; transition:none!important; } }