:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-page:#fffaf0;--color-ink:#24324a;--color-accent:#116466;--color-accent-strong:#0b4f51;--color-surface:#fff;--color-surface-muted:#f4f1e8;--color-border:#a9b6bb;--color-border-strong:#24324a;--color-focus:#b54800;--color-success:#176b4d;--color-retry:#8a3b12;--space-page:clamp(1rem, 4vw, 3rem);--space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--radius-card:1.25rem;--focus-ring:3px solid var(--color-focus);font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif}[data-pattern-contrast=strong]{--color-border:var(--color-border-strong)}*{box-sizing:border-box}html{background:var(--color-page)}body{background:var(--color-page);min-width:320px;min-height:100vh;color:var(--color-ink);margin:0;line-height:1.5}button,input,textarea,select{font:inherit}button{border:2px solid var(--color-border-strong);background:var(--color-surface);min-block-size:48px;color:var(--color-ink);cursor:pointer;padding:var(--space-2) var(--space-3);border-radius:.75rem}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--focus-ring);outline-offset:3px}h1,h2,h3,p{margin-block:0}#root{min-height:100vh}.pattern-cell{border:3px solid var(--color-border);background-color:var(--color-surface);min-block-size:3.75rem;min-inline-size:3.75rem;color:var(--color-ink);border-radius:1rem;place-items:center;display:grid;overflow:hidden}.pattern-cell--selectable{min-block-size:48px;min-inline-size:48px}.pattern-cell--selectable:hover{border-color:var(--color-accent)}.pattern-cell--selected{border-color:var(--color-accent-strong);box-shadow:inset 0 0 0 3px var(--color-accent)}.pattern-cell--active{outline:3px solid var(--color-accent);outline-offset:3px}.train-track{min-inline-size:0;max-inline-size:100%}.pattern-cell__icon{fill:none;stroke:currentColor;stroke-width:2.5px;block-size:2.5rem;inline-size:2.5rem}.pattern-cell__empty{border:3px dashed;border-radius:.5rem;block-size:1.75rem;inline-size:1.75rem}.pattern-mark--dots{background-image:repeating-radial-gradient(circle,currentColor 0 2px,#0000 2px 9px)}.pattern-mark--stripes{background-image:repeating-linear-gradient(45deg,currentColor 0 3px,#0000 3px 10px)}.pattern-mark--crosshatch{background-image:repeating-linear-gradient(45deg,currentColor 0 2px,#0000 2px 9px),repeating-linear-gradient(-45deg,currentColor 0 2px,#0000 2px 9px)}[data-pattern-contrast=strong] .pattern-cell{border-width:4px}[data-pattern-contrast=strong] .pattern-cell--active{outline-width:4px}.app-shell{min-block-size:100vh;padding:var(--space-page);padding-block-end:calc(var(--space-page) + env(safe-area-inset-bottom,0px))}.app-shell__content{gap:var(--space-4);max-inline-size:64rem;margin-inline:auto;display:grid}.app-shell__footer{justify-content:flex-end;margin-block-start:var(--space-5);display:flex}.app-shell__content>h1{color:var(--color-accent-strong);font-size:clamp(1.5rem,5vw,2.25rem)}.instruction-card,.feedback-panel,.settings-panel{gap:var(--space-2);padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);display:grid}.instruction-card h2,.settings-panel h2{font-size:1.35rem}.pattern-board,.choice-grid__list,.translation-pairs,.translated-board{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.pattern-board{align-items:center}.choice-grid{min-inline-size:0;padding:var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-card);margin:0}.choice-grid legend{padding-inline:var(--space-1);font-weight:700}.choice-grid__list>li{flex:10rem}.choice-button,.primary-action,.icon-button,.pattern-cell--selectable{min-block-size:48px;min-inline-size:48px}.choice-button{justify-items:center;gap:var(--space-1);inline-size:100%;display:grid}.choice-button--selected{border-color:var(--color-accent-strong);box-shadow:inset 0 0 0 4px var(--color-accent);background:var(--color-surface-muted)}.choice-button__selected-label{font-size:.875rem;font-weight:700}.pattern-strip{align-items:center;gap:var(--space-1);max-inline-size:100%;display:inline-flex}.pattern-strip__cell{border:3px solid var(--color-border);background-color:var(--color-surface);block-size:3rem;inline-size:3rem;color:var(--color-ink);border-radius:.75rem;flex:0 0 3rem;place-items:center;display:grid;overflow:hidden}.pattern-strip__icon{block-size:2rem;inline-size:2rem}.primary-action{border-color:var(--color-accent-strong);background:var(--color-accent);color:#fff;font-weight:700}.start-screen,.find-screen,.continue-screen,.repair-screen,.translate-screen,.create-screen,.summary-screen{gap:var(--space-4);display:grid}.learning-stamp-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.learning-stamp{align-items:center;gap:var(--space-2);min-block-size:3rem;padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);font-weight:700;display:flex}.learning-stamp__mark{border:2px solid var(--color-success);block-size:2rem;inline-size:2rem;color:var(--color-success);border-radius:50%;flex:0 0 2rem;place-items:center;font-weight:800;display:grid}.summary-screen__takeaway{padding:var(--space-3);border-inline-start:.35rem solid var(--color-accent);background:var(--color-surface-muted);font-weight:700}.summary-screen__next-prompt{font-weight:700}.start-screen__actions,.settings-panel__switch{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.settings-panel__switch{min-block-size:48px;padding:var(--space-1) 0;justify-content:space-between}.settings-panel__switch input{block-size:48px;min-block-size:48px;inline-size:48px;min-inline-size:48px}.settings-panel__state{text-align:end;min-inline-size:3.5rem;font-weight:700}.settings-panel__confirmation-backdrop{z-index:30;padding:var(--space-3);background:#24324a85;place-items:center;display:grid;position:fixed;inset:0}.settings-panel__confirmation{gap:var(--space-2);inline-size:min(100%,32rem);padding:var(--space-3);border:2px solid var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface-muted);display:grid}.settings-panel__confirmation h3{font-size:1.1rem}.settings-panel__confirmation-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.settings-panel__confirmation-actions button{min-inline-size:48px}.feedback-panel--success{border-color:var(--color-success)}.feedback-panel--retry{border-color:var(--color-retry)}.update-history-button{border-color:var(--color-accent-strong);background:var(--color-surface);white-space:nowrap;min-block-size:48px;min-inline-size:48px;box-shadow:0 .25rem .75rem #24324a2e}.update-history-modal{z-index:20;padding:var(--space-3);background:#24324a85;place-items:center;display:grid;position:fixed;inset:0}.update-history-dialog{gap:var(--space-3);max-block-size:min(90vh,40rem);inline-size:min(100%,32rem);padding:var(--space-4);border:3px solid var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink);display:grid;overflow:auto;box-shadow:0 1rem 3rem #24324a4d}.update-history-dialog h2{font-size:1.35rem}.update-history-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.update-history-entry{gap:0 var(--space-2);padding:var(--space-2);border:2px solid var(--color-border);background:var(--color-surface-muted);border-radius:.75rem;grid-template-columns:auto auto;display:grid}.update-history-entry time{font-variant-numeric:tabular-nums}.update-history-entry__kind{font-weight:700}.update-history-entry p{grid-column:1/-1}@media (width<=36rem){.app-shell{padding:1rem;padding-block-end:calc(1rem + env(safe-area-inset-bottom,0px))}.choice-grid__list>li{flex-basis:100%}}@keyframes gi-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent)}50%{box-shadow:0 0 0 .6rem #0000}}@keyframes train-track-move{0%{transform:translate(0)}to{transform:translate(.5rem)}}.gi-pulse{animation:1.8s ease-in-out infinite gi-pulse}.train-track--moving{transform-origin:0;animation:1.2s ease-in-out infinite alternate train-track-move}@media (prefers-reduced-motion:reduce){.gi-pulse,.train-track--moving{animation:none;transform:none}}[data-motion=reduce] .gi-pulse,[data-motion=reduce] .train-track--moving{animation:none;transform:none}[data-motion=reduce] .pattern-cell--active{outline-offset:3px;outline:4px solid}