*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-background: #1C1C1E;--color-text: #F0EFEA;--color-primary: #DAA520;--color-primary-rgb: 218, 165, 32;--color-primary-contrast: #1A1A1A;--color-surface: #2C2C2E;--color-border: rgba(240, 239, 234, .12);--color-focus-ring: var(--color-primary);--color-error: #FF6B6B;--color-success: #34D399;--color-warning: #F59E0B;--color-locked: #393646;--font-family-system: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-size-base: 16px;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--line-height-base: 1.7;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1.25rem;--space-lg: 2rem;--space-xl: 3rem;--radius-base: .625rem;--radius-lg: 1.125rem;--radius-xl: 1.5rem;--transition-duration: .3s;--transition-timing: cubic-bezier(.4, 0, .2, 1);--container-max-width: 1200px;--bottom-nav-height: 65px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);color-scheme:dark}html,body,#root{height:100%;width:100%}body{font-family:var(--font-family-system);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text);background-color:#121212;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;align-items:center;padding:var(--space-md)}h1,h2,h3{font-weight:700;line-height:1.2;letter-spacing:-.02em}h1{font-size:var(--font-size-xxl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px;border-radius:var(--radius-base)}@keyframes page-transition{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes item-cascade{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes shake-horizontal{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes card-flip-in{0%{opacity:.5;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in-from-bottom{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 7px color-mix(in srgb,var(--color-primary) 50%,transparent),inset 0 0 3px color-mix(in srgb,var(--color-primary) 100%,white 20%)}50%{box-shadow:0 0 20px color-mix(in srgb,var(--color-primary) 100%,white 40%),inset 0 0 5px color-mix(in srgb,var(--color-primary) 100%,white 50%)}}@keyframes glow-gold{0%,to{box-shadow:0 0 7px color-mix(in srgb,var(--color-warning) 50%,transparent),inset 0 0 3px color-mix(in srgb,var(--color-warning) 100%,white 20%)}50%{box-shadow:0 0 20px color-mix(in srgb,var(--color-warning) 100%,white 40%),inset 0 0 5px color-mix(in srgb,var(--color-warning) 100%,white 50%)}}@keyframes pulse{0%,to{transform:translateY(-50%) scale(1);opacity:1}50%{transform:translateY(-50%) scale(1.3);opacity:.7}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.pwa-frame{width:100%;height:100%;min-height:100dvh;max-width:450px;max-height:900px;background-color:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl),0 0 0 1px var(--color-border),inset 0 1px 1px #ffffff0d;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:background-color var(--transition-duration) var(--transition-timing)}.pwa-frame.auth-mode{background-color:#212121}@media(max-width:500px){body{padding:0}.pwa-frame{max-width:100%;max-height:100dvh;border-radius:0;box-shadow:none}.fullscreen-card-container{width:95%;height:auto;max-width:none;max-height:none;aspect-ratio:9 / 13}}.app-shell{width:100%;height:100%;min-height:100dvh;display:flex;flex-direction:column;position:relative}.app-bottom-nav,.app-header{transition:opacity var(--transition-duration) var(--transition-timing),transform var(--transition-duration) var(--transition-timing)}.app-shell.focus-mode-active .app-bottom-nav{opacity:0;transform:translateY(100%);pointer-events:none}.app-shell.focus-mode-active .app-header{opacity:0;transform:translateY(-100%);pointer-events:none}.app-shell.focus-mode-active .app-main{padding:0;overflow:hidden}.app-shell.fullscreen-active .app-main{overflow:visible}.app-header{position:sticky;top:0;padding-top:max(env(safe-area-inset-top),0px);height:60px;padding-left:var(--space-md);padding-right:var(--space-md);display:flex;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--color-border);flex-shrink:0;background-color:var(--color-background);z-index:5}.app-header .button{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.app-bottom-nav{position:sticky;bottom:0;height:var(--bottom-nav-height);background-color:#2c2c2ebf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(240,239,234,.15);display:flex;justify-content:space-around;z-index:10;box-shadow:0 -2px 10px #0000001a;padding-bottom:max(env(safe-area-inset-bottom),0px)}.app-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;padding:var(--space-sm) 0;text-decoration:none;color:var(--color-text);opacity:.7;font-size:.75rem;transition:all var(--transition-duration) var(--transition-timing);transform:translateY(0)}.app-bottom-nav a:hover,.app-bottom-nav a:focus-visible{opacity:1;background-color:color-mix(in srgb,var(--color-primary) 15%,transparent);transform:translateY(-2px)}.app-bottom-nav a.active{color:var(--color-primary);opacity:1;font-weight:600}.app-bottom-nav svg{width:24px;height:24px;margin-bottom:var(--space-xs)}.app-main{flex-grow:1;padding:var(--space-lg);width:100%;overflow-y:auto;padding-bottom:calc(var(--bottom-nav-height) + var(--space-lg) + max(env(safe-area-inset-bottom),0px))}.app-shell.no-header .app-main{padding-top:calc(var(--space-lg) + max(env(safe-area-inset-top),0px))}.app-main.auth-view{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--space-lg)}.page-container{animation:page-transition .5s var(--transition-timing) both;height:100%;width:100%}.app-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);text-align:center;font-size:var(--font-size-sm);color:var(--color-text);opacity:.6}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:var(--space-sm);font-size:var(--font-size-sm);font-weight:500}.form-group input,.form-group select,.form-group textarea{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-base);border:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-text);font-family:inherit;font-size:var(--font-size-md);transition:all var(--transition-duration) var(--transition-timing);outline:none}.form-group textarea{min-height:100px;resize:vertical}.form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 30%,transparent)}.form-group input::placeholder{color:color-mix(in srgb,var(--color-text) 50%,transparent)}.button{padding:.75rem var(--space-lg);border-radius:var(--radius-base);border:1px solid transparent;cursor:pointer;font-size:var(--font-size-md);font-weight:600;transition:all var(--transition-duration) var(--transition-timing);display:inline-flex;justify-content:center;align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-sm)}.button:hover:not([disabled]){transform:translateY(-3px);box-shadow:var(--shadow-lg)}.button:active:not([disabled]){transform:translateY(-1px);box-shadow:var(--shadow-md)}.button-primary{background-image:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 100%,white 10%),var(--color-primary));color:var(--color-primary-contrast);border:1px solid color-mix(in srgb,var(--color-primary) 100%,white 20%);text-shadow:0 1px 2px rgba(0,0,0,.2)}.button-primary:hover:not([disabled]){filter:brightness(1.1)}.button-primary[disabled]{background-color:var(--color-locked);background-image:none;cursor:not-allowed;border-color:transparent}.button-secondary{background-color:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.button-secondary:hover:not([disabled]){border-color:var(--color-primary);color:var(--color-primary)}.button-icon{background:none;border:none;padding:var(--space-sm);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-duration) var(--transition-timing)}.button-icon:hover{background-color:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary)}.library-header{margin-bottom:var(--space-lg)}.up-next-card{background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-primary) 20%,var(--color-surface)));border:1px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-lg),0 0 25px color-mix(in srgb,var(--color-primary) 25%,transparent);animation:card-flip-in .5s var(--transition-timing) backwards;display:flex;flex-direction:column}.up-next-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-sm)}.up-next-card-header h3{margin:0;color:var(--color-primary)}.up-next-card-streak{display:flex;align-items:center;gap:var(--space-sm);background-color:color-mix(in srgb,var(--color-warning) 20%,transparent);color:var(--color-warning);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-base);font-weight:600}.up-next-card-streak svg{width:16px;height:16px}.up-next-card p{margin-bottom:var(--space-md);opacity:.9;flex-grow:1}.view-toggle-container{display:flex;background-color:var(--color-surface);border-radius:var(--radius-base);padding:4px;margin-bottom:var(--space-lg);border:1px solid var(--color-border)}.view-toggle-button{flex:1;border:none;background:transparent;color:var(--color-text);padding:var(--space-sm) var(--space-md);border-radius:calc(var(--radius-base) - 4px);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all .2s var(--transition-timing);opacity:.7}.view-toggle-button.active{background-color:var(--color-background);color:var(--color-primary);opacity:1;box-shadow:var(--shadow-sm)}.view-toggle-button:hover:not(.active){opacity:1;background-color:color-mix(in srgb,var(--color-text) 5%,transparent)}.matrix-controls-header{position:sticky;top:-1px;background-color:var(--color-background);z-index:4;padding-bottom:var(--space-md);margin-bottom:var(--space-md);border-bottom:1px solid var(--color-border);animation:fade-in-from-bottom .3s var(--transition-timing)}.matrix-control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.matrix-info h2{font-size:3rem;color:var(--color-primary);line-height:1;margin:0}.matrix-phonetic{font-family:monospace;font-size:var(--font-size-sm);opacity:.8;background-color:var(--color-surface);padding:2px 6px;border-radius:4px;margin-top:4px;display:inline-block}.matrix-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);animation:fade-in .4s var(--transition-timing)}@media(min-width:600px){.matrix-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:900px){.matrix-grid{grid-template-columns:repeat(5,1fr)}}.matrix-card-wrapper{position:relative;aspect-ratio:9 / 13}.matrix-card-wrapper.is-locked{filter:grayscale(1);opacity:.7}.matrix-lock-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2;border-radius:var(--radius-lg);color:var(--color-text);text-align:center;padding:var(--space-sm)}.matrix-lock-overlay svg{width:32px;height:32px;margin-bottom:var(--space-xs);color:var(--color-locked)}.matrix-lock-overlay span{font-size:var(--font-size-sm);font-weight:600}.deck-list{display:flex;flex-direction:column;gap:var(--space-md);padding-left:calc(var(--space-lg) + 2px);position:relative}.deck-list:before{content:"";position:absolute;top:calc(var(--radius-xl) * 2);bottom:calc(var(--radius-xl) * 2);left:var(--space-sm);width:4px;background-image:linear-gradient(to bottom,var(--color-locked) 0%,var(--color-locked) 50%,transparent 75%);background-size:100% 16px;opacity:.5}.deck-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);cursor:pointer;position:relative;transition:all var(--transition-duration) var(--transition-timing);opacity:0;animation:item-cascade .5s var(--transition-timing) forwards;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md)}.deck-card:hover{transform:scale(1.03);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.deck-card-path-node{position:absolute;left:calc(-1 * var(--space-lg));top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background-color:var(--color-locked);border:3px solid var(--color-background);box-shadow:0 0 0 2px var(--color-locked);transition:all var(--transition-duration) var(--transition-timing)}.deck-card:not(.locked) .deck-card-path-node{background-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.deck-card:not(.locked).has-due .deck-card-path-node{animation:pulse 1.5s infinite ease-in-out,glow 2s infinite ease-in-out;background-color:var(--color-warning);box-shadow:0 0 0 2px var(--color-warning)}.deck-card:hover:not(.locked) .deck-card-path-node{transform:translateY(-50%) scale(1.2)}.deck-card.mastered .deck-card-path-node{background-color:var(--color-warning);box-shadow:0 0 0 2px var(--color-warning);animation:glow-gold 2.5s infinite ease-in-out}.deck-card-preview-stack{width:60px;height:60px;position:relative;flex-shrink:0}.deck-card-preview-stack img{width:100%;height:100%;border-radius:var(--radius-base);object-fit:cover;position:absolute;box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:transform var(--transition-duration) var(--transition-timing)}.deck-card-preview-stack img:nth-child(1){transform:rotate(-8deg) translate(-4px)}.deck-card-preview-stack img:nth-child(2){transform:rotate(5deg) translateY(-2px)}.deck-card:hover .deck-card-preview-stack img:nth-child(1){transform:rotate(-12deg) translate(-10px) scale(1.05)}.deck-card:hover .deck-card-preview-stack img:nth-child(2){transform:rotate(8deg) translateY(-5px) scale(1.05)}.deck-card-info{flex-grow:1}.deck-card-info h3{font-size:var(--font-size-lg);margin-bottom:var(--space-xs)}.deck-card-stats{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:500;opacity:.85}.stat-item{display:flex;align-items:center;gap:var(--space-xs)}.stat-item svg{width:14px;height:14px}.stat-item.due{color:var(--color-warning)}.stat-item.weak{color:var(--color-error)}.deck-card-mastery{width:50px;height:50px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}.deck-card-mastery-progress{transform:rotate(-90deg)}.deck-card-mastery-track,.deck-card-mastery-value{fill:none;stroke-width:5}.deck-card-mastery-track{stroke:var(--color-border)}.deck-card-mastery-value{stroke:var(--color-primary);stroke-linecap:round;transition:stroke-dashoffset .5s var(--transition-timing)}.deck-card.mastery-low .deck-card-mastery-value{stroke:#94a3b8}.deck-card.mastery-high .deck-card-mastery-value{stroke:#c026d3}.deck-card.mastered .deck-card-mastery-value{stroke:var(--color-warning)}.deck-card-mastery-text{position:absolute;font-size:var(--font-size-sm);font-weight:700}.deck-card.locked{background-color:var(--color-locked);color:color-mix(in srgb,var(--color-text) 50%,transparent)}.deck-card.locked .deck-card-info h3{color:color-mix(in srgb,var(--color-text) 70%,transparent)}.deck-card.locked .deck-card-preview-stack{filter:grayscale(80%)}.deck-card-lock-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs)}.deck-card-lock-icon svg{width:24px;height:24px}.deck-price-tag{background-color:var(--color-primary);color:var(--color-primary-contrast);padding:2px var(--space-sm);border-radius:var(--radius-base);font-weight:700;font-size:var(--font-size-sm)}.peg-explorer-view{height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;background:var(--color-background);padding-top:max(env(safe-area-inset-top),0px);padding-bottom:max(env(safe-area-inset-bottom),0px);animation:fade-in-from-bottom .4s var(--transition-timing) both}.peg-explorer-view.is-fullscreen-active{animation:none;overflow:visible}.peg-explorer-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:var(--space-md) var(--space-lg)}.peg-explorer-header h2{font-size:var(--font-size-xl)}.peg-explorer-fab-group-left,.peg-explorer-fab-group-right{position:absolute;bottom:calc(7.5rem + max(env(safe-area-inset-bottom),0px));z-index:10;display:flex;flex-direction:column-reverse;gap:var(--space-md);align-items:center}.peg-explorer-fab-group-left{left:var(--space-lg);right:auto}.peg-explorer-fab-group-right{right:var(--space-lg);left:auto}.peg-explorer-fab{width:56px;height:56px;border-radius:var(--radius-lg);padding:0;box-shadow:var(--shadow-xl);animation:fade-in-from-bottom .3s var(--transition-timing) both;background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.peg-explorer-fab.fab-secondary{width:48px;height:48px;border-radius:50%}.peg-explorer-fab.fab-secondary svg{width:24px;height:24px}.peg-explorer-fab svg{width:28px;height:28px}.peg-explorer-fab:nth-child(1){animation-delay:0ms}.peg-explorer-fab:nth-child(2){animation-delay:.1s}.peg-explorer-fab:nth-child(3){animation-delay:.2s}.peg-explorer-fab:nth-child(4){animation-delay:.3s}.peg-explorer-container{display:flex;flex-direction:column;width:100%;margin:0 auto;flex-grow:1;min-height:0;position:relative;justify-content:space-between}.peg-carousel{flex-grow:1;position:relative;display:flex;justify-content:center;perspective:1200px;overflow:hidden;min-height:0}.peg-carousel-card-wrapper{position:absolute;width:75%;max-width:300px;aspect-ratio:9 / 13;transition:transform .35s var(--transition-timing),opacity .35s var(--transition-timing);will-change:transform,opacity;transform-style:preserve-3d}.peg-carousel-card-wrapper.no-transition{transition:none}.peg-carousel-card-wrapper.is-prev{transform:translate(-65%) scale(.8);opacity:.5;z-index:1;cursor:pointer}.peg-carousel-card-wrapper.is-current{transform:translate(0) scale(1);opacity:1;z-index:2;cursor:pointer}.peg-carousel-card-wrapper.is-next{transform:translate(65%) scale(.8);opacity:.5;z-index:1;cursor:pointer}.peg-carousel-card-wrapper.is-hidden-left{transform:translate(-130%) scale(.7);opacity:0;pointer-events:none}.peg-carousel-card-wrapper.is-hidden-right{transform:translate(130%) scale(.7);opacity:0;pointer-events:none}.peg-card-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s var(--transition-timing)}.peg-card-flipper.is-flipped{transform:rotateY(180deg)}.peg-card-face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--color-border);display:flex;flex-direction:column;justify-content:center;align-items:center}.peg-card-face.back{transform:rotateY(180deg);font-size:5rem;font-weight:700;color:var(--color-primary)}.peg-image-container{width:100%;height:100%;position:relative}.peg-image-container img{display:block;width:100%;height:100%;object-fit:cover}.peg-image-overlay{position:absolute;left:0;padding:var(--space-md);color:#fff;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.6);background:linear-gradient(to top,#0009,#0000);width:100%;transition:opacity var(--transition-duration) var(--transition-timing)}.recall-mode .peg-image-overlay{opacity:0}.recall-mode .is-current .peg-image-overlay:hover{opacity:1}.peg-image-overlay.top{top:0;font-size:calc(var(--font-size-xl) * 2);background:linear-gradient(to bottom,#0009,#0000);text-align:right}.peg-image-overlay.bottom{bottom:0;font-size:calc(var(--font-size-lg) * 2);text-align:left;left:0;width:100%;padding:var(--space-md);padding-bottom:calc(var(--space-md) + 1.5rem)}.phonetic-breakdown{position:absolute;bottom:var(--space-md);left:var(--space-md);right:auto;font-family:monospace;font-size:var(--font-size-sm);background-color:#00000080;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-base);color:#fff;text-shadow:none;transition:opacity var(--transition-duration) var(--transition-timing)}.recall-mode .phonetic-breakdown{opacity:0}.recall-mode .is-current .phonetic-breakdown:hover{opacity:1}.flip-button{position:absolute;top:var(--space-md);right:var(--space-md);z-index:5;color:#fff;background-color:#1d1b2680;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.peg-explorer-nav-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 var(--space-sm);pointer-events:none;z-index:5}.peg-explorer-nav-arrows .button-icon{pointer-events:all;background-color:#1d1b2680;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff}.peg-explorer-controls{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--space-md) var(--space-lg);gap:var(--space-sm);flex-shrink:0}.peg-explorer-scrubber{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;max-width:300px;height:6px;background:var(--color-locked);outline:none;border-radius:3px;opacity:.7;transition:opacity .2s}.peg-explorer-scrubber:hover{opacity:1}.peg-explorer-scrubber::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-primary);cursor:pointer;border-radius:50%;border:3px solid var(--color-background)}.peg-explorer-scrubber::-moz-range-thumb{width:16px;height:16px;background:var(--color-primary);cursor:pointer;border-radius:50%;border:3px solid var(--color-background)}.peg-grid-view{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);padding:var(--space-md);overflow-y:auto;height:100%;animation:fade-in .3s var(--transition-timing)}.peg-grid-card{aspect-ratio:9 / 13;border-radius:var(--radius-base);overflow:hidden;position:relative;cursor:pointer;box-shadow:var(--shadow-md);transition:transform .2s var(--transition-timing),box-shadow .2s var(--transition-timing)}.peg-grid-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-lg)}.peg-grid-card img{width:100%;height:100%;object-fit:cover;display:block}.peg-grid-card .peg-card-face{position:static;box-shadow:none;border:none;border-radius:0;width:100%;height:100%}.peg-grid-card .peg-image-overlay{padding:var(--space-sm)}.peg-grid-card .phonetic-breakdown{padding:2px var(--space-xs);font-size:.6rem;bottom:var(--space-sm);left:var(--space-sm)}.peg-grid-card .peg-image-overlay.top{font-size:var(--font-size-md)}.peg-grid-card .peg-image-overlay.bottom{font-size:var(--font-size-sm)}.is-locked-in-deck{filter:grayscale(1);opacity:.7}.peg-grid-card.is-locked-in-deck{cursor:not-allowed;opacity:.6}.peg-grid-card.is-locked-in-deck:hover{transform:none;box-shadow:var(--shadow-md)}.peg-carousel-card-wrapper.is-locked-in-deck.is-current{cursor:default}.fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:var(--space-md);animation:fade-in .3s var(--transition-timing) both}.fullscreen-nav-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 var(--space-md);pointer-events:none;z-index:1002}.fullscreen-nav-arrows .button-icon{pointer-events:all;background-color:#1d1b2699;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.15)}.fullscreen-nav-arrows .button-icon:hover{background-color:#1d1b26cc;transform:scale(1.05)}.fullscreen-nav-arrows .button-icon svg{width:32px;height:32px}.fullscreen-card-container{width:100%;height:100%;max-width:450px;max-height:900px;animation:card-flip-in .4s var(--transition-timing) .1s both;position:relative;cursor:pointer}.fullscreen-close-button{position:absolute;bottom:calc(var(--space-lg) + env(safe-area-inset-bottom));left:auto;right:var(--space-lg);width:56px;height:56px;padding:0;border-radius:50%;background-color:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-xl);z-index:1001;border:1px solid var(--color-border);animation:fade-in-from-bottom .4s var(--transition-timing) .2s both}.fullscreen-close-button:hover{background-color:color-mix(in srgb,var(--color-primary) 15%,transparent);transform:scale(1.05)}.fullscreen-close-button svg{width:28px;height:28px}.fullscreen-overlay .peg-image-overlay.top{font-size:calc(var(--font-size-xl) * 4)}.fullscreen-overlay .peg-image-overlay.bottom{font-size:clamp(2rem,10vw,3.375rem);line-height:1.2}.fullscreen-card-container.overlays-hidden .peg-image-overlay,.fullscreen-card-container.overlays-hidden .phonetic-breakdown{opacity:0;pointer-events:none}.quiz-container{max-width:600px;margin:0 auto;text-align:center;display:flex;flex-direction:column;height:100%;justify-content:center}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.quiz-header h2{margin:0}.quiz-prompt{font-size:5rem;font-weight:700;margin-bottom:var(--space-lg);color:var(--color-primary);min-height:1.2em}.answered-card-preview{width:100%;max-width:180px;margin:var(--space-sm) auto var(--space-md) auto;animation:card-flip-in .4s var(--transition-timing);aspect-ratio:9 / 13}.answered-card-preview .peg-grid-card{width:100%;height:100%}.answered-card-preview .peg-card-face{box-shadow:var(--shadow-lg);border-radius:var(--radius-base)}.quiz-feedback{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-lg);min-height:1.2em}.quiz-feedback.correct{color:var(--color-success)}.quiz-feedback.incorrect{color:var(--color-error)}.quiz-input{width:100%;max-width:400px;padding:var(--space-md);font-size:var(--font-size-xl);text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-surface);color:var(--color-text);transition:all var(--transition-duration) var(--transition-timing);outline:none}.quiz-input.correct{border-color:var(--color-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-success) 30%,transparent)}.quiz-input.incorrect{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 30%,transparent);animation:shake-horizontal .5s cubic-bezier(.36,.07,.19,.97) both}.quiz-input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 30%,transparent)}.button.submitting{width:54px;height:54px;border-radius:50%;padding:0}.button .button-text{transition:opacity .15s var(--transition-timing)}.button.submitting .button-text{opacity:0;width:0;height:0;overflow:hidden}.button .button-icon-container{display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:all .25s var(--transition-timing) .1s}.button.submitting .button-icon-container{opacity:1;transform:scale(1)}@keyframes card-fan-in{0%{opacity:0;transform:rotate(var(--from-rot)) translateY(80px) scale(.8)}to{opacity:1;transform:rotate(var(--to-rot)) translateY(0) scale(1)}}@keyframes card-shine{0%{left:-150%}40%,to{left:150%}}@keyframes light-ray-fade{0%,to{opacity:0;transform:scaleY(.5) rotate(var(--angle))}50%{opacity:1;transform:scaleY(1) rotate(var(--angle))}}.unlock-celebration-container{position:relative;justify-content:flex-start;overflow:hidden;padding-bottom:var(--space-xl);background:radial-gradient(ellipse at 50% 30%,rgba(var(--color-primary-rgb),.2),transparent 70%);animation:fade-in .5s}.unlock-celebration-container h2{animation:fade-in-from-bottom .5s .2s both;text-shadow:0 0 15px rgba(var(--color-primary-rgb),.5);z-index:2;position:relative}.unlock-celebration-container p{animation:fade-in-from-bottom .5s .4s both;z-index:2;position:relative}.unlock-celebration-container .button{animation:fade-in-from-bottom .5s .6s both;z-index:2;position:relative}.light-rays{position:absolute;top:35%;left:50%;width:2px;height:800px;background:linear-gradient(to bottom,rgba(var(--color-primary-rgb),0),rgba(var(--color-primary-rgb),.5),rgba(var(--color-primary-rgb),0));transform-origin:top;animation:light-ray-fade 4s ease-in-out infinite;z-index:1}.unlocked-cards-fan{display:flex;justify-content:center;align-items:center;margin:var(--space-lg) 0;position:relative;min-height:250px;z-index:2}.unlocked-card-item{position:absolute;width:100px;aspect-ratio:9 / 13;transform-origin:bottom center;opacity:0;animation:card-fan-in .8s cubic-bezier(.2,.8,.2,1) forwards;box-shadow:0 10px 30px #0000004d;border-radius:var(--radius-base);overflow:hidden;border:1px solid rgba(255,255,255,.1)}.unlocked-card-item .peg-card-face{box-shadow:none;border-radius:0}.unlocked-card-item:after{content:"";position:absolute;top:0;left:-150%;width:75%;height:100%;background:linear-gradient(to right,#fff0,#ffffff4d,#fff0);transform:skew(-25deg);animation:card-shine 4s ease-in-out infinite;animation-delay:inherit;z-index:3}.settings-section{margin-top:var(--space-lg)}.settings-section:not(:last-child){margin-bottom:var(--space-xl)}.settings-section h3{margin-bottom:var(--space-sm)}.color-swatch-container{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-sm)}.color-swatch{width:44px;height:44px;border-radius:50%;cursor:pointer;border:2px solid var(--color-border);transition:all var(--transition-duration) var(--transition-timing);position:relative;box-shadow:var(--shadow-sm)}.color-swatch:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.color-swatch.active{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-background),0 0 0 6px var(--color-primary)}.offline-indicator{background-color:var(--color-warning);color:#111;text-align:center;padding:var(--space-sm) var(--space-lg);font-weight:500;margin:calc(-1 * var(--space-lg));margin-bottom:var(--space-lg);border-radius:0 0 var(--radius-base) var(--radius-base)}.toast{position:fixed;bottom:calc(var(--bottom-nav-height) + var(--space-lg));left:50%;transform:translate(-50%);background-color:var(--color-success);color:var(--color-primary-contrast);padding:var(--space-md);border-radius:var(--radius-base);z-index:100;font-weight:500;box-shadow:var(--shadow-xl)}.preload-status-indicator{position:absolute;bottom:calc(var(--bottom-nav-height) + var(--space-sm));left:var(--space-lg);width:20px;height:20px;border-radius:50%;z-index:100;box-shadow:var(--shadow-lg);transition:background-color var(--transition-duration) var(--transition-timing),opacity .3s var(--transition-timing),transform .3s var(--transition-timing);border:2px solid var(--color-background);transform-origin:center;animation:fade-in-from-bottom .3s var(--transition-timing) both}.preload-status-indicator[data-state=caching]{background-color:var(--color-warning)}.preload-status-indicator[data-state=preparing]{background-color:var(--color-success)}.preload-status-indicator[data-state=ready]{background-color:#3498db}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;justify-content:center;align-items:center;padding:var(--space-md);animation:fade-in .3s var(--transition-timing) both}.modal-content{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-xl);max-width:400px;width:100%;text-align:center;position:relative;animation:card-flip-in .4s var(--transition-timing) .1s both}.modal-content h2{margin-bottom:var(--space-sm);color:var(--color-primary)}.modal-content p{margin-bottom:var(--space-lg);opacity:.8}.modal-icon{width:50px;height:50px;margin:0 auto var(--space-md) auto;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--color-primary) 20%,transparent);color:var(--color-primary);border-radius:50%}.modal-icon svg{width:28px;height:28px}.modal-close-button{position:absolute;top:var(--space-sm);right:var(--space-sm);color:var(--color-text);opacity:.7}.modal-close-button:hover{opacity:1;color:var(--color-primary)}.search-results-list{list-style:none;padding:0;margin-top:var(--space-md);max-height:40vh;overflow-y:auto;text-align:left}.search-result-item{padding:var(--space-sm) var(--space-md);cursor:pointer;border-radius:var(--radius-base);display:flex;justify-content:space-between;align-items:center}.search-result-item:hover,.search-result-item:focus-visible{background-color:var(--color-background)}.search-result-item .peg-word{font-weight:600}.search-result-item .peg-id{font-family:monospace;opacity:.8}.palace-list-container,.palace-detail-container{display:flex;flex-direction:column;gap:var(--space-md);position:relative;height:100%}.palace-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);cursor:pointer;transition:all var(--transition-duration) var(--transition-timing);opacity:0;animation:item-cascade .5s var(--transition-timing) forwards;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md)}.palace-card:hover{transform:scale(1.02);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.palace-card-icon{flex-shrink:0;width:48px;height:48px;border-radius:var(--radius-base);background-color:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);display:flex;align-items:center;justify-content:center}.palace-card-icon svg{width:28px;height:28px}.palace-card-info{flex-grow:1}.palace-card-info h3{font-size:var(--font-size-lg);margin-bottom:0}.palace-card-info p{font-size:var(--font-size-sm);opacity:.8;line-height:1.5;margin:0}.palace-card-reqs{flex-shrink:0;text-align:center}.palace-card-reqs .req-count{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary)}.palace-card-reqs .req-label{font-size:.75rem;opacity:.7;text-transform:uppercase}.palace-card.locked{background-color:var(--color-locked);cursor:not-allowed;color:color-mix(in srgb,var(--color-text) 50%,transparent)}.palace-card.locked:hover{transform:none;box-shadow:var(--shadow-md);border-color:var(--color-border)}.palace-card.locked .palace-card-icon{background-color:color-mix(in srgb,var(--color-text) 10%,transparent);color:color-mix(in srgb,var(--color-text) 50%,transparent)}.palace-card.locked .palace-card-reqs .req-count{color:color-mix(in srgb,var(--color-text) 50%,transparent)}.palace-detail-header{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-sm)}.palace-detail-header h2{margin:0;flex-grow:0}.palace-detail-controls{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-md);flex-wrap:wrap}.palace-action-buttons{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}@media(max-width:480px){.palace-detail-controls,.palace-action-buttons{justify-content:center}}.toggle-switch{display:flex;align-items:center;gap:var(--space-sm)}.toggle-switch label{font-size:var(--font-size-sm);font-weight:500;cursor:pointer}.toggle-switch input[type=checkbox]{position:relative;width:44px;height:24px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-locked);outline:none;border-radius:20px;cursor:pointer;transition:background-color .3s}.toggle-switch input[type=checkbox]:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;top:2px;left:2px;background:#fff;box-shadow:0 2px 5px #0003;transform:translate(0);transition:transform .3s var(--transition-timing)}.toggle-switch input[type=checkbox]:checked{background:var(--color-primary)}.toggle-switch input[type=checkbox]:checked:before{transform:translate(20px)}.palace-detail-view{gap:0}.palace-detail-view .palace-items-list{flex-grow:1;min-height:0;overflow-y:auto;padding-bottom:var(--space-lg)}.palace-items-list{display:flex;flex-direction:column;gap:var(--space-sm)}.palace-item{background-color:var(--color-surface);border-radius:var(--radius-base);border:1px solid var(--color-border);padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column;transition:all .2s var(--transition-timing)}.palace-item-main{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);min-height:44px}.palace-item-text{flex-grow:1}.palace-item-text .item-order{font-weight:700;color:var(--color-primary);margin-right:var(--space-sm)}.association-display{text-align:right;font-weight:600;cursor:pointer}.association-display .peg-id{font-family:monospace;color:var(--color-primary)}.peg-association-preview{display:flex;align-items:center;gap:var(--space-sm);background-color:var(--color-background);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-base);cursor:pointer;border:1px solid var(--color-border);transition:all .2s var(--transition-timing)}.peg-association-preview:hover{border-color:var(--color-primary);transform:scale(1.02)}.peg-association-preview img{width:32px;height:32px;border-radius:var(--radius-base);object-fit:cover}.peg-association-info{display:flex;flex-direction:column;align-items:flex-start}.peg-association-info .peg-id{font-family:monospace;font-size:var(--font-size-sm);font-weight:700;color:var(--color-primary)}.peg-association-info .peg-word{font-size:var(--font-size-sm);font-weight:500;opacity:.9}.association-note{font-style:italic;opacity:.8;font-size:var(--font-size-sm);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border);white-space:pre-wrap;line-height:1.5;cursor:pointer}.return-fab{position:absolute;bottom:var(--space-lg);right:var(--space-lg);z-index:10;width:56px;height:56px;border-radius:50%;padding:0;box-shadow:var(--shadow-xl);animation:fade-in-from-bottom .4s var(--transition-timing) .2s both;background-image:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 100%,white 10%),var(--color-primary));color:var(--color-primary-contrast);border:1px solid color-mix(in srgb,var(--color-primary) 100%,white 20%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-duration) var(--transition-timing)}.return-fab:hover{transform:scale(1.05) translateY(-2px);box-shadow:var(--shadow-lg);filter:brightness(1.1)}.return-fab svg{width:28px;height:28px}.form-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.form-group-header label{margin-bottom:0}.button-suggest-story{background:none;border:1px solid var(--color-primary);color:var(--color-primary);font-size:var(--font-size-sm);font-weight:600;padding:4px 10px;border-radius:var(--radius-base);cursor:pointer;display:flex;gap:var(--space-xs);align-items:center;transition:all .2s var(--transition-timing)}.button-suggest-story:hover:not([disabled]){background-color:color-mix(in srgb,var(--color-primary) 15%,transparent)}.button-suggest-story:disabled{cursor:not-allowed;opacity:.7}.spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .75s linear infinite}/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/.auth-card{background-color:var(--color-background);padding:var(--space-xl);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:400px;text-align:left;animation:fade-in .6s var(--transition-timing) both;z-index:1}@media(max-width:450px){.auth-card{padding:var(--space-lg) var(--space-md);border:none;box-shadow:none;background:transparent}}.auth-card .auth-form{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-lg)}.auth-card .form-group{margin-bottom:0;animation:item-cascade .5s var(--transition-timing) both}.auth-card .form-group:nth-of-type(1){animation-delay:.1s}.auth-card .form-group:nth-of-type(2){animation-delay:.2s}.auth-card button[type=submit]{animation-delay:.3s}.auth-card h2{font-size:var(--font-size-xxl);margin-bottom:var(--space-xs);font-weight:700;color:var(--color-text)}.auth-welcome-text{font-size:var(--font-size-md);color:color-mix(in srgb,var(--color-text) 80%,transparent);line-height:1.5;max-width:100%;margin:0}.auth-card label{display:block;text-align:left;font-size:var(--font-size-sm);margin-bottom:var(--space-sm);color:color-mix(in srgb,var(--color-text) 80%,transparent);font-weight:500}.auth-card input{width:100%;padding:.8rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-base);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);transition:all var(--transition-duration) var(--transition-timing);outline:none;box-shadow:none}.auth-card input::placeholder{color:color-mix(in srgb,var(--color-text) 40%,transparent)}.auth-card input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 30%,transparent);animation:none}.error-message{color:var(--color-error);font-size:var(--font-size-sm);text-align:center;font-weight:500;min-height:1.2em;margin-top:-.5rem;margin-bottom:-.5rem}.auth-card button[type=submit]{width:100%;background-image:none;background-color:var(--color-primary);border:none;padding:.85rem var(--space-lg);box-shadow:0 5px 15px -5px color-mix(in srgb,var(--color-primary) 50%,transparent)}.auth-card button[type=submit]:hover:not([disabled]){filter:brightness(1.1);box-shadow:0 8px 20px -5px color-mix(in srgb,var(--color-primary) 50%,transparent)}.auth-card .signup-text{margin-top:var(--space-lg);font-size:var(--font-size-sm);color:color-mix(in srgb,var(--color-text) 70%,transparent);text-align:center}.auth-card .signup-text button{background:none;border:none;padding:0;margin:0;font:inherit;font-size:var(--font-size-sm);cursor:pointer;outline:inherit;color:var(--color-primary);font-weight:600;margin-left:.4rem;text-decoration:underline;text-underline-offset:3px;transition:filter var(--transition-duration) var(--transition-timing)}.auth-card .signup-text button:hover,.auth-card .signup-text button:focus-visible{filter:brightness(1.2)}