@charset "UTF-8";
:root { color-scheme: light; --ink:#293c31; --green:#315b43; --green-dark:#234431; --muted:#757c6b; --paper:#fbf8ef; --line:#d9d5c5; --red:#b85743; --wood:#ead2a4; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif; color:var(--ink); background:#efeee2; }
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0; }
body { min-width:280px; background-image:radial-gradient(ellipse at 7% 16%,#b9c8a957,transparent 45%),radial-gradient(ellipse at 91% 90%,#d5bda54d,transparent 42%),repeating-linear-gradient(45deg,transparent 0 17px,#a0ae9720 17px 18px,transparent 18px 35px),repeating-linear-gradient(-45deg,transparent 0 17px,#a0ae9715 17px 18px,transparent 18px 35px); }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; -webkit-tap-highlight-color:transparent; }
button,.board,.hand-tray,.hero { touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button * { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button:focus-visible,summary:focus-visible { outline:3px solid #b56e32;outline-offset:3px; }
button:disabled { opacity:.35; cursor:default; }
button:active:not(:disabled) { filter:brightness(.96); }
button.primary:active { transform:translateY(1px); }
h1,h2,h3,p { margin:0; }
.icon { width:21px;height:21px;flex:none; }
#app { width:100%;height:100%;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;place-items:center; }
.app-shell { width:min(100%,460px);height:100%;max-height:880px;padding:12px 18px 18px;display:flex;flex-direction:column;position:relative;background:linear-gradient(135deg,#fffaf245,transparent 45%),var(--paper);box-shadow:0 0 70px #37482b12; }
.app-shell::before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23929d85' opacity='.15' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.app-shell>*,dialog>* { position:relative; }
.app-header { display:flex;align-items:center;justify-content:space-between;height:40px;flex:none;gap:8px; }
.brand { font-size:22px;letter-spacing:-1.2px;font-weight:800;color:var(--green); }
.brand>span { color:#8b907f;font-size:10px;letter-spacing:1px;font-weight:500; }
.brand.small { font-size:15px;letter-spacing:1px; }
.icon-button { width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:none; }
.icon-button span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.primary { background:var(--green);color:#fffdf4;border:1px solid var(--green);border-radius:14px;min-height:50px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;box-shadow:0 3px 0 #1b3b2b; }
.wide { width:100%; }
.primary .icon { order:1; }
.secondary { border:1px solid var(--line);border-radius:12px;min-height:44px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;background:#fffcf570; }
.text-button { min-height:42px;padding:9px 6px;font-size:13px;text-decoration:underline;text-underline-offset:4px; }
.eyebrow { font-size:11px;font-weight:600;letter-spacing:1.7px;color:var(--muted); }
.home-screen { flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly; }
.home-heading { text-align:center;flex:none;padding-top:12px; }
.home-heading h1 { font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-weight:700;font-size:36px;line-height:1.35;letter-spacing:5px;margin:10px 0 7px; }
.home-heading h1 span { display:block;font-size:1.15em;letter-spacing:7px; }
.subtitle { font-size:12px;letter-spacing:2px;color:#6f7566; }
.home-bottom { width:100%;max-width:360px;text-align:center;flex:none; }
.intro { font-size:12px;line-height:1.8;margin:0 0 14px;color:#697160; }
.progress-line { display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;font-weight:600; }
.progress-line>span:last-child { font-size:14px; }
.progress-line em { font-size:11px;font-style:normal;color:var(--muted); }
.progress-track { height:3px;width:100%;background:#e7e4d7;margin:6px 0 14px;border-radius:9px;overflow:hidden; }
.progress-track span { display:block;height:100%;background:var(--green); }
.home-links { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px; }
.daily-link { min-height:38px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;margin:7px auto 0; }
.daily-link .icon { width:17px;height:17px;color:#a9853a; }
.micro { font-size:10px;color:var(--muted);letter-spacing:.3px; }
.hero { position:relative;width:min(100%,350px);height:clamp(105px,25dvh,225px);min-height:70px;flex:1;max-height:230px;margin:3px 0; }
.hero-image { display:block;width:100%;height:100%;object-fit:contain; }
.piece { position:relative;display:grid;place-items:center;width:82%;height:94%;max-width:48px;max-height:59px;background:url('../assets/boxwood-piece-v1.webp') center/100% 100% no-repeat;color:#302419;filter:drop-shadow(1px 2px 1px #5c3b2448); }
.piece-face { position:relative;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:800;line-height:1;font-size:clamp(17px,5.2cqw,28px);padding-top:4px;padding-bottom:1px;text-shadow:0 .5px 0 #fff1c277,0 -.4px .2px #28170970; }
.piece-face small { display:block;font:600 8px/1 system-ui,sans-serif;margin-top:1px;text-align:center; }
.piece.opponent { transform:rotate(180deg);filter:drop-shadow(-1px -2px 1px #5c3b2448); }
.piece.promoted { color:var(--red); }
.section-heading { padding:21px 4px 14px;flex:none; }
.section-heading h1 { font-size:24px;margin-top:7px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif; }
.stage-screen { min-height:0;flex:1;display:flex;flex-direction:column; }
.stage-scroll { overflow:auto;overscroll-behavior:contain;min-height:0;padding:0 3px 10px; }
.chapter { margin-bottom:24px; }
.chapter h2 { display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:10px; }
.chapter h2>span { color:#a69168;font:italic 20px Georgia,serif; }.chapter h2 small { margin-left:auto;font-size:10px;color:var(--muted);font-weight:400; }
.level-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.level-card { min-height:99px;background:#f0ecdf;border:1px solid #ded8c6;border-radius:10px;padding:9px 3px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px; }
.level-card.solved { background:#e9eee2;border-color:#b6c3a8; }
.level-card>span:not(.level-number) { font-size:10px;line-height:1.5; }
.level-number { font:25px Georgia,serif;color:var(--green); }
.level-card small { font-size:8px;color:#6e7b61;display:flex;align-items:center;gap:3px; }
.level-card small .icon { width:12px;height:12px; }
.play-screen { min-height:0;flex:1;display:grid;grid-template-rows:auto minmax(0,1fr) 53px 49px 47px;gap:7px;padding-top:7px; }
.play-heading { display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:43px;padding:0 4px; }
.play-heading .eyebrow { font:11px system-ui,sans-serif;letter-spacing:1.8px; }
.play-heading h1 { font-size:18px;line-height:1.4;font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;margin-top:3px; }
.difficulty { border:1px solid #c6cdb7;color:var(--green);background:#eaf0e2;font-size:11px;white-space:nowrap;padding:5px 8px;border-radius:6px; }
.board-space { min-height:0;min-width:0;display:grid;place-items:center;container-type:size; }
.board-frame { width:min(100cqw,100cqh);height:min(100cqw,100cqh);aspect-ratio:1;position:relative;padding:14px 14px 3px 3px;container-type:inline-size; }
.board-frame::before { content:"";position:absolute;inset:10px 10px -2px -1px;border:1px solid #b98c4c;border-radius:3px;background:#dab16e url('../assets/kaya-wood-v1.webp') center/cover;box-shadow:inset 0 1px 1px #fff0c4,0 2px 0 #c49855,0 4px 0 #ac7d40,1px 7px 0 #956c37,1px 10px 14px #4b34243b; }
.board { position:relative;width:100%;height:100%;display:grid;grid-template-rows:repeat(9,1fr);background:#edcb89 url('../assets/kaya-wood-v1.webp') center/100% 100%;border:1.2px solid #74552f;border-radius:1px;box-shadow:inset 0 1px 2px #51381726;overflow:hidden; }
.board-row { display:grid;grid-template-columns:repeat(9,1fr);min-height:0; }
.cell { padding:0;display:grid;place-items:center;position:relative;width:100%;height:100%;min-width:0;min-height:0;border-bottom:1px solid #715735ad;border-right:1px solid #715735ad;isolation:isolate; }
.board-row:nth-child(3) .star-file::after,.board-row:nth-child(6) .star-file::after { content:"";position:absolute;right:-2px;bottom:-2px;width:4px;height:4px;border-radius:50%;background:#69502c;z-index:1;pointer-events:none; }
.board-row:last-child .cell { border-bottom:0; }.cell:last-child { border-right:0; }
.cell .piece { z-index:2; }.cell:hover { background:#fff8ca44; }
.cell.possible { background:#718c462a; }.cell.selected { background:#d7eec195;box-shadow:inset 0 0 0 2px #4d7449; }
.cell.last-move { background:#ffe89988; }.cell.hinted { background:#cee5a1;box-shadow:inset 0 0 0 2px #517345; }
.move-dot { position:absolute;width:22%;height:22%;border-radius:50%;background:#386844ad;z-index:3;pointer-events:none; }
.cell:has(.piece) .move-dot { background:none;border:2px solid #386844ad;width:90%;height:90%;border-radius:3px; }
.cell:focus-visible { outline:0;box-shadow:inset 0 0 0 2.5px #526b83;z-index:5; }
.file-labels { position:absolute;top:0;left:3px;right:14px;display:grid;grid-template-columns:repeat(9,1fr);font:9px/12px system-ui,sans-serif;text-align:center;color:#867755; }
.rank-labels { position:absolute;top:14px;right:0;bottom:3px;width:12px;display:grid;grid-template-rows:repeat(9,1fr);font-size:9px;color:#867755;text-align:center;align-items:center; }
.hand-tray { display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #dfd6c3;border-radius:9px;background:#ede5d133;padding:5px 11px; }
.hand-label { font-size:11px;color:#7c735e; }.hand-pieces { display:flex;align-items:center;gap:9px;justify-content:flex-end;height:100%; }
.empty-hand { font-size:11px;color:#969080; }
.hand-piece { width:49px;height:100%;position:relative;display:grid;place-items:center;padding:0;border-radius:6px; }
.hand-piece .piece { width:30px;height:37px; }.hand-piece .piece-face { font-size:23px;padding-top:4px; }
.hand-piece.selected { background:#d6e5c5;box-shadow:0 0 0 2px #6f8859; }
.hand-count { font-size:10px;position:absolute;bottom:0;right:0;border-radius:50%;background:var(--paper);border:1px solid #d3c7b0;padding:1px 4px; }
.coach { display:flex;align-items:center;gap:8px;border-radius:8px;padding:5px 6px; }
.coach-mark { width:23px;height:23px;flex:none;border:1px solid #bdc8ab;border-radius:50%;display:grid;place-items:center;color:#637b4e;font-family:Georgia,serif;font-size:14px; }
.coach p { font-size:12px;line-height:1.6;color:#5d6956; }
.coach.has-message { background:#eaf0df; }
.toolbar { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; }
.toolbar button { border:1px solid var(--line);background:#f3f0e7;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 2px;font-size:10px; }
.toolbar .icon { width:18px;height:18px; }.toolbar button:first-child { background:#e8eddf;border-color:#c4ceb6; }
.replay-toolbar { grid-template-columns:1fr 1fr 1.4fr; }.toolbar .small-primary { background:var(--green);color:#fffdf4; }
.cell.finish-source { background:#d6e6b5;box-shadow:inset 0 0 0 2px #618547; }
.cell.finish-source.selected { background:#b9d99a;box-shadow:inset 0 0 0 3px #315b43; }
.cell.finish-king { background:#ffe9a7;box-shadow:inset 0 0 0 2px #b58b37; }
.cell.finish-captured { background:#e1eabf;z-index:6; }
.finish-banner { display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #c2d1a9;background:#eaf1df;border-radius:10px;color:var(--green); }
.finish-banner>span { display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--green);color:var(--paper);font-size:15px; }
.finish-banner strong { font-size:15px;letter-spacing:.3px; }.finish-banner strong:lang(en) { font-size:14px; }
.finish-coach { justify-content:center; }.finish-coach p { font-weight:600; }
.finish-toolbar { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:12px; }
.finish-rule { align-self:center;font-size:11px;line-height:1.55;color:#697160; }.finish-rule:lang(en) { font-size:11px; }
.finish-toolbar button { min-width:94px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 10px;font-size:12px; }
.finish-toolbar .icon { width:16px;height:16px;order:1; }
.capture-motion,.capture-king { position:absolute;inset:0;display:grid;place-items:center;pointer-events:none; }
.capture-motion { z-index:3; }.capture-king { display:none;z-index:2; }
.capture-burst { position:absolute;inset:2px;border:2px solid #ae9142;border-radius:50%;pointer-events:none; }
@media (prefers-reduced-motion:no-preference) {
  .finish-source:not(.selected) .piece { animation:finish-glow 1.5s ease-in-out infinite; }
  .capture-motion { animation:capture-move .3s cubic-bezier(.2,.7,.3,1) both; }
  .capture-king { display:grid;animation:capture-vanish .32s linear both; }
  .capture-burst { animation:capture-burst .7s ease-out both; }
  @keyframes finish-glow { 50% { filter:brightness(1.12) drop-shadow(0 0 3px #fff9d6); } }
  @keyframes capture-move { from { transform:translate(calc(var(--capture-dx)*100%),calc(var(--capture-dy)*100%)); }to { transform:translate(0,0); } }
  @keyframes capture-vanish { 0%,60% { opacity:1; }100% { opacity:0; } }
  @keyframes capture-burst { 0%,30% { opacity:0;transform:scale(.5); }45% { opacity:1; }100% { opacity:0;transform:scale(1.65); } }
}
dialog { color:var(--ink);background:var(--paper);border:1px solid #d9d1bd;width:min(90%,390px);max-height:calc(100dvh - 38px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:25px 22px 18px;border-radius:21px;box-shadow:0 14px 60px #1f302d30;overflow:auto;overscroll-behavior:contain;text-align:center; }
dialog::backdrop { background:#263c3480;backdrop-filter:blur(2px); }
.dialog-close { position:absolute;top:12px;right:12px;width:30px;height:30px;z-index:2;border-color:transparent; }.dialog-close .icon { width:17px;height:17px; }
dialog h2 { font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-size:22px;line-height:1.5;margin-bottom:12px; }
.dialog-copy { text-align:left;font-size:13px;line-height:1.9;margin:12px 0 19px; }
dialog .primary { margin-top:13px; }.guide-art { display:grid;place-items:center;height:117px;margin:12px 0 17px; }
.guide-art>.piece { width:73px;height:90px;max-width:none;max-height:none; }.guide-art>.piece .piece-face { font-size:42px; }
.guide-sequence { display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:75px; }
.guide-sequence>.piece { width:48px;height:58px; }.guide-sequence .piece-face { font-size:28px; }.guide-sequence i { font-style:normal;color:#9aa48b; }
.guide-dots { display:flex;justify-content:center;gap:7px;margin:20px 0; }.guide-dots i { display:block;width:5px;height:5px;border-radius:50%;background:#d2d8c9; }.guide-dots i.active { background:var(--green);width:20px;border-radius:3px; }
.movement-diagram { width:106px;height:106px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);border-top:1px solid #d3c2a4;border-left:1px solid #d3c2a4;background:#efdfbf; }
.movement-diagram>span { border-right:1px solid #d3c2a4;border-bottom:1px solid #d3c2a4;display:grid;place-items:center; }
.movement-diagram i { display:block;width:6px;height:6px;background:#668557;border-radius:50%; }
.movement-diagram .piece { width:20px;height:21px; }.movement-diagram .piece-face { font-size:15px;padding-top:3px; }.movement-diagram .piece-face small { display:none; }
.rules-dialog { text-align:left; }.rules-dialog h2 { text-align:center; }.rules-dialog h3 { font-size:15px;margin:22px 0 14px; }
.piece-guide { display:grid;gap:15px; }.piece-guide-item { display:flex;gap:13px;align-items:center; }.piece-guide-item>.movement-diagram { width:86px;height:86px;flex:none; }.piece-guide-item strong { font-size:14px; }.piece-guide-item p { margin-top:5px;font-size:12px;line-height:1.8; }
details { font-size:12px;line-height:1.7;margin:22px 0 12px; }summary { cursor:pointer; }
.setting-row { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;border-bottom:1px solid var(--line);font-size:13px; }
.toggle { padding:8px 16px;border-radius:24px;background:#e5e5da;min-width:62px;min-height:40px;font-size:12px; }.toggle.on { background:var(--green);color:#fffdf4; }
.language-buttons { display:flex;gap:3px; }.language-buttons button { border:1px solid var(--line);border-radius:7px;font-size:12px;min-height:40px;padding:8px 9px; }.language-buttons .chosen { background:#e3ebd8;border-color:#9aac83; }
.small-copy { font-size:11px;line-height:1.8;margin:17px 0;color:var(--muted); }.danger { color:var(--red); }.danger-fill { background:#a64d3b;box-shadow:0 3px 0 #833a2b;border-color:#a64d3b; }
.notice { font-size:12px;line-height:1.8;border:1px solid #dcbf83;background:#fbefce;border-radius:7px;text-align:left;padding:10px;margin:10px 0; }
.save-status { position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:10px;background:#f9e9bd;color:#80632e;border-radius:9px;padding:3px 8px; }
.promotion-choices { display:grid;grid-template-columns:1fr 1fr;gap:13px; }.promotion-choices button { padding:16px 6px 11px;background:#ecebdc;border:1px solid #c8d0b9;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:7px; }.promotion-choices .piece { width:52px;height:64px;max-width:none;max-height:none; }.promotion-choices .piece-face { font-size:35px; }.promotion-choices strong { font-size:16px; }.promotion-choices small { font-size:11px; }
.result-seal { width:70px;height:70px;border-radius:50%;border:2px solid #a95d4c;outline:1px solid #a95d4c;outline-offset:-6px;display:grid;place-items:center;color:#a95d4c;font-family:"Hiragino Mincho ProN",serif;font-size:20px;font-weight:700;transform:rotate(-12deg);margin:2px auto 19px; }
.result-dialog h2 { font-size:29px;margin:7px 0 4px; }.result-caption { font-size:12px;color:#7a806e; }
.lesson-card { border:1px solid #d7dec8;background:#eaf0e1;border-radius:10px;text-align:left;padding:13px 15px;margin:20px 0 12px; }.lesson-card>span { font-size:9px;letter-spacing:1.6px;color:#7a8b64; }.lesson-card p { font-size:13px;line-height:1.8;margin-top:5px; }
.result-progress { font:25px Georgia,serif; }.result-progress small { font-size:13px;color:#959781; }.result-links { display:flex;justify-content:center;gap:18px;margin-top:10px; }
html[lang=en] .home-heading h1 { letter-spacing:0;line-height:1.05;font-size:43px; }.home-heading h1 span:lang(en) { letter-spacing:0; }.home-heading .subtitle:lang(en) { font-size:11px;letter-spacing:.1px; }.play-heading h1:lang(en) { font-size:18px; }.coach p:lang(en) { font-size:11px;line-height:1.5; }.piece-face:lang(en) { padding-top:2px; }.level-card>span:lang(en) { font-size:10px; }.level-card small:lang(en) { font-size:7px; }
@media (min-height:880px) { .app-shell { border-radius:25px;border:1px solid #dbddce; }.home-heading { padding-top:22px; }.hero { max-height:240px; }.home-bottom { margin-bottom:16px; } }
@media (max-height:680px) { .app-shell { padding:8px 14px 12px; }.home-heading { padding-top:4px; }.home-heading h1 { font-size:30px;margin:5px 0; }.home-heading .eyebrow { font-size:10px; }.subtitle { font-size:11px; }.hero { max-height:150px;min-height:70px; }.intro { margin:2px 0 7px;font-size:11px; }.home-links { margin-top:10px; }.micro { font-size:9px; }.home-bottom .primary { min-height:46px; }.progress-track { margin-bottom:10px; }.play-screen { grid-template-rows:auto minmax(0,1fr) 48px 42px 44px;gap:5px;padding-top:4px; }.play-heading { min-height:38px; }.play-heading h1 { font-size:16px; }.coach p { font-size:11px; }.hand-piece .piece { height:34px;width:28px; }.hand-piece .piece-face { font-size:22px; } }
@media (max-height:580px) { .app-shell { padding:5px 12px 8px; }.app-header { height:32px; }.icon-button { height:30px;width:30px; }.icon-button .icon { width:17px;height:17px; }.brand { font-size:19px; }.home-heading h1 { font-size:25px;letter-spacing:4px;margin:4px 0; }.home-heading h1 span { display:inline;font-size:1em;letter-spacing:3px; }.home-heading h1:lang(en) { font-size:34px; }.home-heading h1 span:lang(en) { margin-left:5px; }.home-heading .subtitle { font-size:10px; }.hero { max-height:112px; }.intro { font-size:10px;line-height:1.6; }.home-bottom { max-width:325px; }.home-bottom .primary { min-height:43px;font-size:14px; }.secondary { min-height:38px;font-size:11px; }.home-links { gap:8px;margin-top:8px; }.daily-link { margin-top:4px;min-height:32px; }.progress-track { margin:4px 0 9px; }.progress-line { font-size:10px; }.play-screen { grid-template-rows:auto minmax(0,1fr) 40px 36px 40px;gap:4px;padding-top:2px; }.play-heading { min-height:31px; }.play-heading h1 { font-size:14px;margin-top:1px; }.play-heading .eyebrow { font-size:9px; }.difficulty { font-size:10px;padding:4px 7px; }.hand-tray { padding:2px 9px; }.hand-piece .piece { height:31px;width:25px; }.hand-piece .piece-face { font-size:20px; }.coach { padding:2px 4px; }.coach p { font-size:10px;line-height:1.5; }.coach-mark { width:20px;height:20px;font-size:12px; }.toolbar .icon { width:15px;height:15px; }.toolbar button { font-size:9px;gap:2px; }.guide-art { height:75px;margin:7px 0; }.guide-art>.piece { width:52px;height:65px; }.guide-art .movement-diagram { width:75px;height:75px; }dialog { padding:18px 20px 13px; }dialog h2 { font-size:19px;margin-bottom:8px; }.dialog-copy { font-size:12px;line-height:1.8;margin:8px 0 13px; }.guide-dots { margin:12px 0; }.result-seal { width:54px;height:54px;font-size:16px;margin:0 auto 12px; }.result-dialog h2 { font-size:25px; }.lesson-card { margin:12px 0 8px;padding:10px 12px; }.lesson-card p { font-size:12px; }.result-dialog .primary { min-height:44px; } }
@media (prefers-reduced-motion:no-preference) { .result-seal { animation:stamp .28s ease-out; }@keyframes stamp { from { transform:rotate(-12deg) scale(1.25);opacity:0; }to { transform:rotate(-12deg) scale(1);opacity:1; } } }
@media (max-height:390px) { .app-shell { max-width:350px;min-height:370px; }#app { overflow:auto;place-items:start center; }.home-heading .eyebrow,.home-heading .subtitle,.intro,.micro { display:none; }.hero { max-height:80px; }.home-heading h1 { font-size:24px; }.play-screen { grid-template-rows:auto minmax(130px,1fr) 36px 28px 36px; }.coach p { font-size:10px; } }