@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage-grotesque-normal-400-800-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage-grotesque-normal-400-800-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:#fdf5f8;--paper-subtle:#f5edf1;--paper-deep:#ede7db;--card:#fff;--card-elevated:#fff;--ink:#121815;--ink-soft:#3b4740;--ink-muted:#5f6e66;--ink-faint:#8d9c94;--line:#121815;--line-subtle:#e2ddd3;--line-light:#ece7de;--rosa:#e4007c;--rosa-dark:#b30060;--rosa-soft:#fdf0f7;--rosa-glow:#e4007c33;--turquesa:#b7d3c2;--turquesa-dark:#234734;--turquesa-deep:#2d5a43;--turquesa-soft:#eaf3ed;--turquesa-border:#9ec2ad;--turquesa-glow:#b7d3c259;--tezontle:#d32f2f;--tezontle-dark:#991b1b;--tezontle-soft:#fef2f2;--tezontle-glow:#d32f2f33;--cempasuchil:#f59e0b;--cempasuchil-dark:#b45309;--cempasuchil-soft:#fef8ee;--cempasuchil-glow:#f59e0b33;--maya:#0284c7;--maya-dark:#0369a1;--maya-soft:#f0f9ff;--maya-glow:#0284c733;--verde:#15803d;--verde-dark:#14532d;--verde-soft:#f0fdf4;--verde-glow:#15803d33;--shadow-sm:2px 2px 0 #1218152e;--shadow-md:3px 3px 0 #1218152e;--shadow-lg:4px 4px 0 #1218152e;--shadow-card:4px 4px 0 #1218152e;--shadow-soft:0 4px 20px -2px #12181514;--ease-spring:cubic-bezier(.16, 1, .3, 1);--ease-snap:cubic-bezier(.2, 0, 0, 1);--font-serif:"Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-sans:"Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--display-weight:700;--display-letter-spacing:-1.2px;--brand-weight:800;--brand-letter-spacing:-.6px;--phrase-letter-spacing:-.8px;font-family:var(--font-sans);color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth;min-width:320px}body{min-width:320px;min-height:100vh;color:var(--ink);background:var(--paper);margin:0;line-height:1.5}button,input,textarea{font:inherit}button,summary{cursor:pointer;-webkit-user-select:none;user-select:none}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2.5px solid var(--rosa);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{flex-direction:column;min-height:100vh;padding:16px clamp(20px,5vw,80px) 40px;display:flex;position:relative}.topbar{z-index:10;justify-content:space-between;align-items:center;gap:20px;width:min(1080px,100%);margin:0 auto;padding:0;display:flex;position:relative}.brand{color:var(--ink);font-family:var(--font-serif);font-size:40px;font-weight:var(--brand-weight,800);letter-spacing:-1.5px;transition:background .18s ease, border-color .18s ease, transform .18s var(--ease-spring);background:0 0;border:2.5px solid #0000;border-radius:24px;align-items:center;gap:18px;margin-left:-16px;padding:4px 16px;display:inline-flex}.brand:hover{background:var(--paper-subtle);border-color:var(--line);transform:translateY(-2px)}.brand:active{transform:translateY(1px)}.brand img{object-fit:contain;width:118px;height:118px;transition:transform .32s var(--ease-spring);animation:4.5s ease-in-out infinite alternate jolito-sway}.brand:hover img{animation-play-state:paused;transform:rotate(-14deg)scale(1.18)}@keyframes jolito-sway{0%{transform:rotate(0)translateY(0)}50%{transform:rotate(2.5deg)translateY(-4px)}to{transform:rotate(-2.5deg)translateY(3px)}}@media (prefers-reduced-motion:reduce){.brand img{transition:none;animation:none}}.nav-actions{align-items:center;gap:16px;display:flex}.connection-pill{border:1.5px solid var(--line);background:var(--card);height:32px;color:var(--ink-soft);letter-spacing:-.1px;box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;transition:all .14s var(--ease-spring);border-radius:999px;align-items:center;gap:8px;padding:0 14px;font-family:inherit;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.connection-pill:hover{background:var(--turquesa-soft);border-color:var(--line);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.connection-pill:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.connection-pill:focus-visible{outline:2.5px solid var(--rosa);outline-offset:2px}.connection-pill .pill-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.connection-pill.is-local .pill-dot{border:1.5px solid var(--ink-soft);background:0 0}.connection-pill.is-synced .pill-dot{background:var(--turquesa-dark);animation:2.5s infinite pulse-dot;box-shadow:0 0 0 2px #1b4d3e40}.connection-pill.is-syncing .pill-dot{background:var(--turquesa);animation:1s infinite pulse-dot;box-shadow:0 0 0 2px #2a7a634d}.connection-pill.is-offline .pill-dot{background:var(--cempasuchil);box-shadow:0 0 0 2px var(--cempasuchil-glow);animation:none}@keyframes pulse-dot{0%,to{transform:scale(1);box-shadow:0 0 0 2px #1b4d3e40}50%{transform:scale(1.2);box-shadow:0 0 0 4px #1b4d3e1f}}.text-button{border:1.5px solid var(--line);height:32px;color:var(--ink);background:var(--card);letter-spacing:-.1px;box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;transition:all .14s var(--ease-spring);border-radius:999px;align-items:center;gap:8px;padding:0 14px;font-family:inherit;font-size:12px;font-weight:700;display:inline-flex}.text-button:hover{background:var(--turquesa-soft);border-color:var(--line);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.text-button:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.text-button b{border:1.5px solid var(--line);min-width:20px;color:var(--card);background:var(--rosa-dark);text-align:center;border-radius:999px;padding:1px 6px;font-size:11px;font-weight:800}.eyebrow{color:var(--rosa-dark);font-family:var(--font-mono);letter-spacing:1.8px;text-transform:uppercase;margin:0 0 12px;font-size:11px;font-weight:800}.primary-button,.secondary-button{border:2px solid var(--line);letter-spacing:-.2px;min-height:50px;transition:all .14s var(--ease-spring);border-radius:999px;justify-content:center;align-items:center;padding:12px 28px;font-size:15px;font-weight:700;display:inline-flex;position:relative}.primary-button{color:#fff;background:var(--ink);box-shadow:4px 4px 0 var(--rosa)}.primary-button:hover{box-shadow:6px 6px 0 var(--rosa-dark);background:#25332c;transform:translate(-2px,-2px)}.primary-button:active{box-shadow:1px 1px 0 var(--rosa-dark);transform:translate(2px,2px)}.primary-button span{margin-left:8px;font-size:16px;line-height:0;transition:transform .15s}.primary-button:hover span{transform:translate(4px)}.secondary-button{color:var(--ink);background:var(--card);box-shadow:2px 2px 0 var(--turquesa-deep)}.secondary-button:hover{background:var(--paper-subtle);box-shadow:4px 4px 0 var(--turquesa-dark);transform:translate(-2px,-2px)}.secondary-button:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.welcome-page{background:var(--paper)}.welcome-page .lede{color:var(--ink-soft)}.welcome-hero{flex:1;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(32px,5vw,64px);width:min(1080px,100%);margin:0 auto;padding:8px 0 32px;display:grid}.hero-copy{z-index:2;position:relative}.hero-copy h1,.create-layout h1,.complete-card h1{font-family:var(--font-serif);font-size:clamp(46px,5.4vw,70px);font-weight:var(--display-weight,600);letter-spacing:var(--display-letter-spacing,-2px);color:var(--ink);margin:0;line-height:1.06}.hero-copy h1 em{color:var(--rosa-dark);text-decoration:underline;-webkit-text-decoration-color:var(--cempasuchil);text-decoration-color:var(--cempasuchil);text-underline-offset:6px;font-style:italic;font-weight:600;text-decoration-thickness:4px}.lede{max-width:480px;color:var(--ink-soft);margin:22px 0 32px;font-size:18px;line-height:1.6}.hero-actions,.complete-actions{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.hero-visual{justify-content:center;align-items:center;min-height:460px;display:flex;position:relative}.sample-card{border:2.5px solid var(--line);width:min(310px,76vw);height:360px;transition:transform .32s var(--ease-spring), box-shadow .32s var(--ease-spring), opacity .32s var(--ease-spring);box-sizing:border-box;text-align:left;cursor:pointer;will-change:transform;border-radius:24px;flex-direction:column;justify-content:space-between;padding:26px;display:flex;position:absolute;top:50%;left:50%;overflow:hidden}.flag-icon{vertical-align:-1px;border-radius:2px;flex-shrink:0;display:inline-block;overflow:hidden;box-shadow:0 0 0 1px #12181540}.sample-badge{font-family:var(--font-mono);letter-spacing:1.5px;align-items:center;gap:6px;font-size:11px;font-weight:800;display:inline-flex}.sample-phrase{font-family:var(--font-serif);letter-spacing:var(--phrase-letter-spacing,-1.2px);margin:0}.sample-card.is-foreground{box-shadow:6px 6px 0 var(--card-shadow-color);z-index:2;transform:translate(calc(-50% - 48px),calc(40px - 50%))rotate(-3deg)}.sample-card.is-foreground:hover{box-shadow:8px 8px 0 var(--card-shadow-hover);transform:translate(calc(-50% - 51px),calc(36px - 50%))rotate(-3deg)}.sample-card.is-foreground:active{box-shadow:2px 2px 0 var(--card-shadow-hover);transform:translate(calc(-50% - 46px),calc(42px - 50%))rotate(-3deg)}.sample-card.is-background{box-shadow:6px 6px 0 var(--card-shadow-color);z-index:1;opacity:.98;transform:translate(calc(48px - 50%),calc(-50% - 40px))rotate(5deg)}.sample-card.is-background:hover{opacity:1;box-shadow:8px 8px 0 var(--card-shadow-hover);transform:translate(calc(45px - 50%),calc(-50% - 44px))rotate(5deg)}.sample-card.is-background:active{box-shadow:2px 2px 0 var(--card-shadow-hover);transform:translate(calc(50px - 50%),calc(-50% - 38px))rotate(5deg)}.sample-card:focus-visible{outline:3px solid var(--rosa);outline-offset:4px}.sample-card-es{--card-shadow-color:var(--rosa);--card-shadow-hover:var(--rosa-dark);color:var(--ink);background:var(--card)}.sample-card-es .sample-card-header .sample-badge{color:var(--rosa-dark)}.sample-card-es .sample-card-body .sample-phrase{color:var(--ink)}.sample-card-es .sample-listen-hint{border:1.5px solid var(--line);background:var(--paper-subtle);color:var(--ink);box-shadow:2px 2px 0 var(--rosa)}.sample-card-es:hover .sample-listen-hint,.sample-card-es.is-playing .sample-listen-hint{background:var(--rosa-dark);color:#fff;border-color:var(--line)}.sample-card-es.is-playing{box-shadow:10px 10px 0 var(--rosa-dark), 10px 10px 0 2px var(--ink)}.sample-card-en{--card-shadow-color:var(--turquesa-dark);--card-shadow-hover:var(--turquesa-dark);color:var(--ink);background:var(--turquesa)}.sample-card-en:focus-visible{outline-color:var(--ink)}.sample-card-en .sample-card-header .sample-badge{color:var(--ink)}.sample-card-en .sample-card-body .sample-phrase{color:var(--ink);font-size:38px}.sample-card-en .sample-listen-hint{border:1.5px solid var(--line);color:var(--ink);box-shadow:2px 2px 0 var(--turquesa-dark);background:#fff}.sample-card-en:hover .sample-listen-hint,.sample-card-en.is-playing .sample-listen-hint{background:var(--turquesa-dark);color:#fff;border-color:var(--line)}.sample-card-en.is-playing{box-shadow:10px 10px 0 var(--turquesa-dark), 10px 10px 0 2px var(--ink)}.sample-card.is-playing .sample-illustration{animation:sample-bounce 1.2s var(--ease-spring)}@keyframes sample-bounce{0%{transform:scale(1)}30%{transform:scale(1.15)rotate(-5deg)}65%{transform:scale(1.06)rotate(3deg)}to{transform:scale(1)rotate(0)}}.sample-card-header{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.sample-card-body{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;margin:4px 0 0;display:flex;position:relative}.sample-illustration{justify-content:center;align-items:center;width:140px;height:172px;display:flex;position:relative}.sample-art-image{object-fit:contain;filter:drop-shadow(2.5px 3.5px #1c191773);width:100%;height:100%;display:block}.sample-card-body .sample-phrase{font-family:var(--font-serif);font-size:40px;font-weight:var(--display-weight,600);letter-spacing:var(--phrase-letter-spacing,-1.2px);text-align:center;margin:0;line-height:1.1}.sample-listen-hint{font-family:var(--font-sans);letter-spacing:normal;border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:700;transition:all .14s;display:inline-flex}.sample-listen-hint svg{fill:currentColor;width:13px;height:13px}.create-page{background:var(--paper)}.create-layout{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(24px,5vw,48px);width:min(980px,100%);margin:clamp(16px,3vh,32px) auto 40px;display:grid}.create-sidebar{flex-direction:column;gap:24px;display:flex;position:sticky;top:32px}.create-sidebar header h1{font-family:var(--font-serif);letter-spacing:-1px;color:var(--ink);margin:0 0 8px;font-size:clamp(38px,4.5vw,46px);font-weight:700;line-height:1.1}.create-sidebar header .lede{color:var(--ink-soft);margin:0;font-size:15px;line-height:1.45}.create-visual{place-items:center;width:100%;min-height:420px;margin-top:36px;display:grid;position:relative}.create-visual .sample-card{border-radius:24px;width:310px;height:360px;padding:26px}.create-visual .sample-card-body{text-align:center;justify-content:center;align-items:center;gap:12px;padding:20px 0}.create-visual .sample-phrase{font-size:32px;line-height:1.2}.sample-phrase.is-placeholder{color:var(--ink-faint);opacity:.75;font-style:italic;font-weight:500}.create-card-context-preview{color:var(--ink-muted);max-width:240px;margin:0;font-size:13px;font-style:italic;line-height:1.4}.create-form{border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow-card);border-radius:24px;padding:clamp(24px,4vw,36px)}.field-group{margin-bottom:20px}.field-group label,.compact-fields label{color:var(--ink);letter-spacing:-.2px;align-items:center;gap:6px;font-size:14px;font-weight:700;display:inline-flex}.field-group textarea,.field-group input,.form-details textarea,.compact-fields input{border:2px solid var(--line);width:100%;color:var(--ink);resize:vertical;background:#fff;border-radius:14px;font-family:inherit;transition:border-color .14s,box-shadow .14s}.field-group textarea:focus,.field-group input:focus,.form-details textarea:focus,.compact-fields input:focus{border-color:var(--rosa);box-shadow:3px 3px 0 var(--ink);outline:none}.field-group textarea{min-height:72px;font-family:var(--font-serif);margin-top:8px;padding:14px 16px;font-size:19px;line-height:1.4}.field-group textarea#context{min-height:64px;font-family:var(--font-sans);font-size:14px;line-height:1.5}.field-group input{min-height:48px;margin-top:8px;padding:12px 16px;font-size:16px}.field-group textarea::placeholder,.field-group input::placeholder,.form-details textarea::placeholder,.compact-fields input::placeholder{color:var(--ink-faint)}.field-group-relative{position:relative}.typo-suggestion{border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);color:var(--ink);background:#fffde6;border-radius:12px;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;font-size:13px;font-weight:500;display:flex}.typo-label{color:var(--ink-muted,#555);font-weight:600}.typo-chip{border:1.5px solid var(--ink);cursor:pointer;color:var(--ink);background:#fff;border-radius:8px;align-items:center;gap:4px;padding:4px 10px;font-family:inherit;font-size:13px;transition:background .12s,transform .12s,box-shadow .12s;display:inline-flex}.typo-chip:hover{box-shadow:2px 2px 0 var(--ink);background:#fef8cc;transform:translate(-1px,-1px)}.typo-translation{color:var(--ink-muted,#555)}.typo-arrow{color:var(--rosa);font-weight:800}.suggestions-listbox{z-index:50;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fff;border-radius:16px;max-height:280px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% - 8px);left:0;right:0;overflow-y:auto}.suggestion-item{cursor:pointer;border:1px solid #0000;border-radius:10px;flex-direction:column;gap:2px;padding:10px 12px;transition:background .1s,border-color .1s;display:flex}.suggestion-item:hover,.suggestion-item.is-active{border-color:var(--ink);background:#fffde6}.suggestion-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.suggestion-spanish{color:var(--ink);font-size:15px;font-weight:700}.suggestion-tag{text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--ink);border-radius:6px;padding:2px 6px;font-size:10px;font-weight:800}.tag-slang{background:#ffd6e0}.tag-idiom{background:#e2f0d9}.tag-food{background:#fff2cc}.tag-travel{background:#c5e3f6}.tag-basics,.tag-common{background:#eaeaea}.suggestion-english{color:var(--ink);font-size:13px;font-weight:500}.suggestion-context{color:var(--ink-muted,#666);margin-top:2px;font-size:11px;font-style:italic}.toggle-row{background:var(--paper-subtle);border:1.5px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;color:var(--ink);border-radius:14px;align-items:center;gap:12px;margin-top:12px;margin-bottom:8px;padding:10px 14px;font-size:13px;font-weight:700;transition:background .14s,transform .14s;display:flex}.toggle-row:hover{box-shadow:2px 2px 0 var(--ink);background:#eee8dc;transform:translate(-1px,-1px)}.toggle-row input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.toggle{box-sizing:border-box;border:2px solid var(--line);width:44px;height:24px;transition:background .16s var(--ease-spring);background:#cbd5e1;border-radius:999px;flex:0 0 44px;position:relative}.toggle:after{content:"";box-sizing:border-box;border:1.5px solid var(--line);width:16px;height:16px;transition:transform .16s var(--ease-spring);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.toggle-row input:checked+.toggle{background:var(--rosa)}.toggle-row input:checked+.toggle:after{transform:translate(20px)}.toggle-row input:focus-visible+.toggle{outline:3px solid var(--rosa);outline-offset:3px}.form-details{border-top:1.5px solid var(--line-subtle);color:var(--ink-soft);margin-top:4px;margin-bottom:8px}.form-details summary{color:var(--ink-soft);cursor:pointer;padding:10px 2px;font-size:13px;font-weight:700;transition:color .12s}.form-details summary:hover{color:var(--ink)}.compact-fields{grid-template-columns:1fr 1fr;gap:12px;padding-bottom:8px;display:grid}.compact-fields input{margin-top:6px;padding:10px 14px;font-size:13px}.save-button{width:100%;margin-top:18px}.create-save-feedback{background:var(--verde-soft);color:var(--verde-dark);border:1.5px solid var(--verde);text-align:center;word-break:break-word;border-radius:12px;margin:12px 0 0;padding:8px 14px;font-size:13px;font-weight:600;line-height:1.4}.review-page{background:var(--paper)}.review-queue-badge{background:var(--card);border:1.5px solid var(--line);height:32px;box-shadow:var(--shadow-sm);z-index:5;white-space:nowrap;-webkit-user-select:none;user-select:none;max-width:calc(100% - 360px);transition:transform .18s var(--ease-spring);border-radius:999px;align-items:center;gap:12px;padding:0 14px;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.queue-beads-track{align-items:center;gap:6px;display:inline-flex}.queue-bead{border:1.5px solid var(--line);width:9px;height:9px;transition:transform .22s var(--ease-spring), background .18s ease, box-shadow .22s var(--ease-spring);border-radius:999px;flex-shrink:0;box-shadow:1px 1px #1218152e}.queue-bead.is-current{box-shadow:0 0 0 1.5px var(--card), 0 0 0 3px var(--line), var(--shadow-sm);transform:scale(1.35)}.queue-bead.is-new{background:var(--maya);border-radius:999px}.queue-bead.is-learn{background:var(--tezontle);border-radius:2px;width:8px;height:8px;transform:rotate(45deg)}.queue-bead.is-learn.is-current{transform:rotate(45deg)scale(1.35)}.queue-bead.is-due{background:var(--verde);border-radius:999px}.queue-compact-pill{align-items:center;gap:8px;display:inline-flex}.compact-chip{font-family:var(--font-mono);align-items:center;gap:4px;font-size:12px;font-weight:800;display:inline-flex}.compact-chip i{border-radius:50%;width:7px;height:7px;display:inline-block}.compact-chip.is-new{color:var(--maya-dark)}.compact-chip.is-new i{background:var(--maya)}.compact-chip.is-learn{color:var(--tezontle-dark)}.compact-chip.is-learn i{background:var(--tezontle);border-radius:2px;transform:rotate(45deg)}.compact-chip.is-due{color:var(--verde-dark)}.compact-chip.is-due i{background:var(--verde)}.compact-label{font-family:var(--font-sans);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.02em;font-size:11px;font-weight:700}.queue-text-label{font-family:var(--font-mono);color:var(--ink-soft);align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex}.queue-count-num{color:var(--ink);font-weight:800}.queue-count-suffix{color:var(--ink-muted);font-weight:600}.study-card{text-align:center;width:min(640px,100%);margin:clamp(28px,4.5vh,48px) auto 0;position:relative}.study-prompt-wrap{justify-content:center;align-items:center;gap:14px;max-width:100%;display:inline-flex}.study-prompt{max-width:560px;font-family:var(--font-serif);font-size:clamp(36px,4.8vw,50px);font-weight:var(--display-weight,700);letter-spacing:var(--display-letter-spacing,-1.2px);color:var(--ink);margin:0;line-height:1.12}.prompt-meta{justify-content:center;align-items:center;margin:10px auto 24px;display:flex}.prompt-meta .eyebrow{align-items:center;gap:6px;margin:0;display:inline-flex}.audio-button{border:2px solid var(--line);width:38px;height:38px;color:var(--ink);background:var(--card);box-shadow:var(--shadow-sm);transition:all .14s var(--ease-spring);border-radius:50%;flex:none;place-items:center;padding:0;display:inline-grid}.audio-button:hover{background:var(--turquesa-soft);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.audio-button:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.audio-button svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.answer-form{max-width:560px;margin:0 auto;position:relative}.answer-input{border:2.5px solid var(--line);width:100%;color:var(--ink);text-align:center;box-shadow:var(--shadow-sm);background:#fff;border-radius:16px;padding:14px 140px 14px 18px;font-family:inherit;font-size:21px;transition:border-color .14s,box-shadow .14s}.answer-input:focus{border-color:var(--rosa);box-shadow:var(--shadow-md);outline:none}.answer-input[readonly]{color:var(--ink-soft);background:var(--paper-subtle);padding-right:18px}.reveal-button{border:1.5px solid var(--line);color:var(--ink);background:var(--card);box-shadow:2px 2px 0 var(--ink);transition:all .12s var(--ease-spring);border-radius:10px;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:700;display:inline-flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.reveal-button:hover{background:var(--turquesa-soft);box-shadow:3px 3px 0 var(--ink);transform:translateY(calc(-50% - 1px))}.reveal-button:active{box-shadow:0 0 0 var(--ink);transform:translateY(calc(1px - 50%))}kbd{border:1.5px solid var(--line);color:var(--ink);font-family:var(--font-mono);background:#fbf9f5;border-bottom-width:2.5px;border-radius:6px;justify-content:center;align-items:center;padding:2px 7px;font-size:10px;font-weight:700;display:inline-flex;box-shadow:0 1px #0000001a}.audio-unavailable{color:var(--tezontle-dark);margin:14px auto 0;font-size:12px;font-weight:600}.reveal-panel{border:2.5px solid var(--line);background:var(--card);box-shadow:var(--shadow-card);text-align:left;animation:slideUp .22s var(--ease-spring);border-radius:22px;margin-top:22px;padding:22px 26px}.reveal-content{flex-direction:column;gap:14px;display:flex}.reveal-main{flex-direction:column;gap:12px;min-width:0;display:flex}.answer-comparison{margin:0}.diff-exact-card{border:2px solid var(--line);background:var(--turquesa-soft);box-shadow:3px 3px 0 var(--turquesa-deep);border-radius:14px;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;display:flex}.diff-exact-main{align-items:center;gap:12px;display:flex}.diff-card{border:2px solid var(--line);background:var(--paper-subtle);box-shadow:3px 3px 0 var(--cempasuchil);border-radius:16px;padding:16px 18px}.diff-card-header{border-bottom:1.5px solid var(--line-subtle);justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;display:flex}.diff-card-title{font-family:var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-muted);font-size:11px;font-weight:800}.diff-badge{border:1.5px solid var(--line);font-size:11px;font-weight:800;font-family:var(--font-mono);letter-spacing:.4px;box-shadow:1px 1px 0 var(--ink);border-radius:999px;padding:3px 10px}.diff-badge.exact{color:var(--turquesa-dark);background:var(--turquesa-soft)}.diff-badge.accents{color:var(--cempasuchil-dark);background:#fef9c3}.diff-badge.close{color:var(--tezontle-dark);background:#fee2e2}.diff-badge.different{color:var(--ink-muted);background:#e5e0d8}.diff-rows{flex-direction:column;gap:12px;display:flex}.diff-row{grid-template-columns:88px 1fr;align-items:baseline;gap:12px;display:grid}.diff-label{font-family:var(--font-mono);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.6px;font-size:11px;font-weight:700}.diff-row-main{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.diff-text{font-family:var(--font-serif);font-size:23px;font-weight:var(--display-weight,700);letter-spacing:var(--phrase-letter-spacing,-.8px);color:var(--ink);margin:0;line-height:1.35}.diff-match{color:var(--turquesa-dark);background:var(--turquesa-soft);border-radius:4px;padding:1px 5px}.diff-seg{-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px;margin:0;padding:1px;display:inline}.diff-seg-match{background:var(--turquesa-soft);color:var(--turquesa-dark)}.diff-seg-case{background:var(--turquesa-soft);color:var(--turquesa-dark);border-bottom:1.5px dashed var(--turquesa-deep)}.diff-seg-accent{background:var(--turquesa-soft);color:var(--cempasuchil-dark);border-bottom:1.5px dashed var(--cempasuchil)}.diff-seg-missing{color:#9a3412;background:#ffedd5}.diff-seg-extra{background:var(--tezontle-soft);color:var(--tezontle-dark)}.diff-seg-extra.diff-seg-space{color:#dc2626;background:#fecaca;border-radius:4px;margin:0 2px;padding:1px 5px;font-weight:700}.reveal-context-block{border:1.5px solid var(--line-subtle);border-left:3.5px solid var(--line-subtle);background:var(--paper-subtle);color:var(--ink-soft);transition:all .18s var(--ease-spring);border-radius:0 12px 12px 0;margin-top:6px;padding:10px 14px}.reveal-context-block:hover{border-color:var(--line);border-left-color:var(--cempasuchil);background:var(--cempasuchil-soft);box-shadow:2px 2px 0 var(--ink);transform:translateY(-1px)}.context-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.8px;color:var(--ink-faint);font-size:10px;font-weight:800;transition:color .18s;display:block}.reveal-context-block:hover .context-label{color:var(--cempasuchil-dark)}.context-text{color:var(--ink-muted);margin:4px 0 0;font-size:13.5px;line-height:1.45;transition:color .18s}.reveal-context-block:hover .context-text{color:var(--ink)}.grade-fieldset{border:0;border-top:1.5px solid var(--line-subtle);min-width:0;margin:20px 0 0;padding:16px 0 0}.grade-fieldset legend{padding:0}.grade-buttons{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:0;display:grid}.grade-buttons button{border:2px solid var(--line);min-width:0;color:var(--ink);text-align:left;transition:all .13s var(--ease-spring);background:#fff;border-radius:14px;grid-template-columns:auto 1fr;align-items:center;gap:2px 9px;padding:10px 12px;display:grid}.grade-buttons button:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.grade-buttons kbd{grid-row:span 2}.grade-buttons strong{font-size:13px;font-weight:800}.grade-buttons small{color:var(--ink-muted);font-size:10px;font-weight:600}.grade-buttons .grade-again{background:var(--tezontle);color:#fff;box-shadow:2px 2px 0 var(--tezontle-dark)}.grade-buttons .grade-again small{color:#fff;opacity:.9}.grade-buttons .grade-again:hover{background:var(--tezontle-dark);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.grade-buttons .grade-hard{background:var(--cempasuchil);color:var(--ink);box-shadow:2px 2px 0 var(--cempasuchil-dark)}.grade-buttons .grade-hard small{color:var(--ink);opacity:.85}.grade-buttons .grade-hard:hover{color:var(--ink);box-shadow:4px 4px 0 var(--cempasuchil-dark);background:#e69500;transform:translate(-2px,-2px)}.grade-buttons .grade-hard:hover small{color:var(--ink);opacity:.9}.grade-buttons .grade-good{background:var(--maya-dark);color:#fff;box-shadow:2px 2px #075985}.grade-buttons .grade-good small{color:#fff;opacity:.9}.grade-buttons .grade-good:hover{box-shadow:4px 4px 0 var(--ink);background:#075985;transform:translate(-2px,-2px)}.grade-buttons .grade-easy{background:var(--verde);color:#fff;box-shadow:2px 2px 0 var(--verde-dark)}.grade-buttons .grade-easy small{color:#fff;opacity:.9}.grade-buttons .grade-easy:hover{background:var(--verde-dark);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.keyboard-hint{color:var(--ink-muted);margin:20px 0 0;font-size:12px;font-weight:600}.complete-page{background:var(--paper)}.complete-card{text-align:center;border:2.5px solid var(--line);background:var(--card);width:min(580px,100%);box-shadow:var(--shadow-card);animation:slideUp .24s var(--ease-spring);border-radius:28px;margin:clamp(40px,6vh,80px) auto 30px;padding:40px 36px 44px}.complete-mascot-frame{justify-content:center;align-items:center;margin:0 auto 16px;display:flex}.complete-mascot-img{object-fit:contain;filter:drop-shadow(0 6px 16px #12181514);transform-origin:bottom;width:clamp(150px,22vw,190px);height:clamp(150px,22vw,190px);animation:complete-mascot-pop .4s var(--ease-spring) both, complete-mascot-bob 3.5s ease-in-out infinite .4s alternate}@keyframes complete-mascot-pop{0%{opacity:0;transform:scale(.85)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes complete-mascot-bob{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-5px)rotate(1.5deg)}to{transform:translateY(2px)rotate(-1.5deg)}}@media (prefers-reduced-motion:reduce){.complete-mascot-img{transition:none;animation:none}}.complete-card h1{font-size:clamp(44px,5.5vw,64px)}.complete-card>p:not(.eyebrow){max-width:440px;color:var(--ink-soft);margin:18px auto 30px;font-size:17px;line-height:1.55}.complete-actions{justify-content:center}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=860px){.welcome-hero{grid-template-columns:1fr .85fr;gap:28px}.hero-visual{min-height:440px;transform:translate(20px)scale(.9)}.create-layout{grid-template-columns:1fr;gap:32px;max-width:580px}.create-layout header{max-width:500px;position:static}}@media (width<=680px){.app-shell{padding:12px 16px 28px}.nav-actions{gap:8px}.connection-pill,.text-button{gap:6px;height:32px;padding:0 10px;font-size:11px}.topbar{padding:0}.brand{gap:12px;margin-left:-8px;padding:4px 10px;font-size:30px}.brand img{width:76px;height:76px}.welcome-page{min-height:100svh}.welcome-hero{grid-template-columns:1fr;align-items:start;min-height:auto;padding-top:12px;padding-bottom:24px}.hero-copy h1{letter-spacing:-1.8px;font-size:clamp(40px,11vw,54px)}.lede{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions button{width:100%}.hero-visual{opacity:.16;pointer-events:none;width:380px;position:absolute;bottom:-200px;right:-140px;transform:scale(.68)}.create-layout{grid-template-columns:1fr;margin-top:24px}.create-layout h1{font-size:36px}.create-visual{display:none}.create-form{border-radius:20px;padding:22px 18px}.compact-fields{grid-template-columns:1fr}.review-queue-badge{justify-content:center;width:max-content;max-width:calc(100% - 32px);height:32px;padding:0 10px;position:absolute;top:66px;left:50%;transform:translate(-50%)}.study-card{margin-top:52px}.study-prompt{font-size:32px}.answer-input{padding-right:18px;font-size:18px}.reveal-button{justify-content:center;width:100%;margin-top:12px;position:static;transform:none}.reveal-panel{border-radius:18px;padding:18px 16px 16px}.diff-row{grid-template-columns:68px 1fr}.grade-buttons{grid-template-columns:repeat(2,1fr)}.keyboard-hint{display:none}.complete-card{margin-top:4vh;padding:28px 20px 36px}.complete-mascot-frame{margin-bottom:12px}.complete-mascot-img{width:140px;height:140px}}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#1218158c;justify-content:center;align-items:center;padding:20px;animation:.16s ease-out fade-in;display:flex;position:fixed;inset:0}.modal-content{background:var(--card);border:2.5px solid var(--line);width:min(580px,100%);max-height:90vh;box-shadow:var(--shadow-card);animation:modal-pop .2s var(--ease-spring);border-radius:24px;flex-direction:column;gap:20px;padding:clamp(24px,4vw,36px);display:flex;position:relative;overflow-y:auto}@keyframes modal-pop{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.modal-close{border:2px solid var(--line);background:var(--paper-subtle);width:36px;height:36px;color:var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:700;transition:all .12s;display:flex}.modal-close:hover{background:var(--rosa-soft);border-color:var(--rosa-dark);color:var(--rosa-dark);transform:scale(1.05)}.deck-stats-bar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stat-pill{border:1.5px solid var(--line);background:var(--paper-subtle);height:32px;color:var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:13px;font-weight:600;display:inline-flex}.stat-pill strong{color:var(--ink);font-weight:800}.backup-sections{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=540px){.backup-sections{grid-template-columns:1fr}}.backup-section{border:2px solid var(--line-subtle);background:var(--paper);border-radius:18px;flex-direction:column;gap:14px;padding:20px;display:flex}.backup-section-header h3{color:var(--ink);margin:0;font-size:16px;font-weight:700}.backup-section-header p{color:var(--ink-soft);margin:4px 0 0;font-size:13px;line-height:1.4}.export-button{align-self:flex-start}.import-mode-selector{grid-template-columns:1fr 1fr;gap:10px;display:grid}.mode-option{border:2px solid var(--line-subtle);background:var(--card);cursor:pointer;border-radius:14px;align-items:flex-start;gap:10px;padding:12px 14px;transition:all .12s;display:flex}.mode-option.is-selected{border-color:var(--turquesa-dark);background:var(--turquesa-soft);box-shadow:2px 2px 0 var(--turquesa-dark)}.mode-option input{accent-color:var(--turquesa-dark);margin-top:2px}.mode-label{flex-direction:column;gap:2px;display:flex}.mode-label strong{color:var(--ink);font-size:13px;font-weight:700}.mode-label small{color:var(--ink);font-size:12px;line-height:1.3}.file-input-wrapper{flex-direction:column;gap:6px;display:flex}.file-input-label{color:var(--ink);font-size:13px;font-weight:700}.backup-file-input{border:2px dashed var(--line);background:var(--card);width:100%;color:var(--ink);cursor:pointer;border-radius:12px;padding:10px 14px;font-size:13px}.backup-file-input:focus-visible{border-style:solid;border-color:var(--rosa);outline:none}.restore-confirm-button{align-self:flex-start}.status-banner{border:2px solid #0000;border-radius:14px;padding:12px 16px;font-size:13px;font-weight:600;line-height:1.4}.status-banner p{margin:0}.status-banner.status-success{background:var(--verde-soft);border-color:var(--verde);color:var(--verde-dark)}.status-banner.status-error{background:var(--tezontle-soft);border-color:var(--tezontle);color:var(--tezontle-dark)}.status-banner.status-info{background:var(--maya-soft);border-color:var(--maya);color:var(--maya-dark)}.status-details{font-size:12px;font-family:var(--font-mono);margin:6px 0 0;padding-left:18px}.sync-modal,.data-safety-modal{gap:12px;width:min(640px,100%);max-width:640px;padding:22px 24px}.modal-header-copy h2{font-family:var(--font-serif);letter-spacing:-.6px;color:var(--ink);margin:0;font-size:24px;font-weight:700}.modal-subtitle{color:var(--ink-soft);margin:3px 0 0;font-size:13px;line-height:1.35}.deck-stats-bar{margin-top:-2px}.modal-sections-stack{flex-direction:column;gap:10px;display:flex}.safety-section{border:1.5px solid var(--line-subtle);background:var(--paper-subtle);border-radius:14px;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.section-title-row{align-items:flex-start;gap:10px;display:flex}.section-icon{flex-shrink:0;margin-top:1px;font-size:18px}.section-title-row h3{color:var(--ink);margin:0;font-size:14px;font-weight:700}.section-caption{color:var(--ink-soft);margin:1px 0 0;font-size:12px;line-height:1.35}.backup-subcard{border:1.5px solid var(--line-subtle);background:var(--card);border-radius:12px;flex-direction:column;gap:8px;padding:12px;display:flex}.backup-subcard h4{color:var(--ink);margin:0;font-size:13px;font-weight:700}.backup-subcard p{color:var(--ink-soft);margin:0;font-size:12px;line-height:1.35}.sync-account-pane{flex-direction:column;gap:12px;display:flex}.account-info-card{border:1.5px solid var(--line-subtle);background:var(--card);border-radius:12px;align-items:center;gap:12px;padding:12px;display:flex}.account-avatar{border:2px solid var(--line);background:var(--paper-subtle);width:36px;height:36px;box-shadow:2px 2px 0 var(--ink);border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.account-details{flex-direction:column;gap:1px;display:flex}.account-badge{text-transform:uppercase;letter-spacing:.5px;color:var(--turquesa-dark);font-size:10px;font-weight:800}.account-email{color:var(--ink);margin:0;font-size:13px;font-weight:700}.sync-actions-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.sync-auth-pane{flex-direction:column;gap:10px;display:flex}.sync-auth-form{flex-direction:column;gap:12px;display:flex}.sync-explanation{color:var(--ink-soft);margin:0;font-size:12px;line-height:1.35}.sync-auth-buttons{align-items:center;gap:10px;display:flex}.sync-notice-card{border:1.5px solid var(--line-subtle);background:var(--card);border-radius:12px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.sync-notice-card .notice-icon{font-size:20px}.sync-notice-card h4{color:var(--ink);margin:0;font-size:13px;font-weight:700}.sync-notice-card p{color:var(--ink-soft);margin:0;font-size:12px;line-height:1.35}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}