@import "https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";:root{--bg:#f7f4ef;--surface:#ffffffe0;--surface-solid:#fff;--border:#e8e2d9;--border-soft:#e8e2d999;--sakura:#f0939c;--sakura-light:#fde8ea;--sakura-glow:#f0939c40;--matcha:#7daa90;--matcha-light:#e5f2ea;--bamboo:#c8a96e;--bamboo-light:#fdf3e1;--text:#3a3530;--text-2:#6d6460;--text-3:#a09890;--radius-s:8px;--radius-m:16px;--radius-l:24px;--radius-xl:32px;--shadow-s:0 2px 8px #0000000d;--shadow-m:0 8px 24px #00000012;--shadow-l:0 20px 48px #00000017;--shadow-sakura:0 8px 28px #f0939c47;--ease:cubic-bezier(.25, .8, .25, 1);--ease-bounce:cubic-bezier(.175, .885, .32, 1.275);--flip-ease:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);background-image:radial-gradient(60% 40% at 10% 5%,#f0939c1f 0%,#0000 50%),radial-gradient(50% 35% at 90% 90%,#7daa901f 0%,#0000 50%),radial-gradient(40% 30%,#c8a96e0d 0%,#0000 60%);background-attachment:fixed;min-height:100vh;font-family:Inter,Noto Sans JP,sans-serif}.app-container{max-width:980px;margin:0 auto;padding:2.5rem 2rem 4rem}header{text-align:center;margin-bottom:2.5rem}.site-title{letter-spacing:-.02em;background:linear-gradient(135deg, #d4737a 0%, var(--sakura) 40%, var(--matcha) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.25rem;font-size:2.6rem;font-weight:700}.site-subtitle{color:var(--text-3);letter-spacing:.04em;margin-bottom:1.8rem;font-size:.9rem}.mode-switch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-s);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);gap:2px;padding:5px;display:inline-flex}.mode-switch button{color:var(--text-3);border-radius:calc(var(--radius-xl) - 4px);cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;background:0 0;border:none;padding:.65rem 1.6rem;font-family:inherit;font-size:.95rem;font-weight:600}.mode-switch button.active{background:var(--sakura);color:#fff;box-shadow:var(--shadow-sakura)}.fc-type-selector{justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.fc-type-selector label{color:var(--text-2);font-size:.875rem}.fc-type-selector select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text);cursor:pointer;outline:none;padding:.35rem .7rem;font-family:inherit;font-size:.875rem;transition:border-color .2s}.fc-type-selector select:focus{border-color:var(--sakura)}.row-selector-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);margin-bottom:2rem;padding:1.4rem 1.6rem}.row-selector-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.row-selector-header h3{text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-size:.8rem;font-weight:600}.quick-actions{gap:.5rem;display:flex}.text-btn{border:1px solid var(--border);color:var(--text-2);cursor:pointer;transition:all .2s var(--ease);background:0 0;border-radius:20px;padding:.25rem .75rem;font-family:inherit;font-size:.8rem;font-weight:600}.text-btn:hover{border-color:var(--sakura);color:var(--sakura);background:var(--sakura-light)}.row-selector{flex-wrap:wrap;gap:.5rem;display:flex}.row-btn{border:1.5px solid var(--border);color:var(--text-2);cursor:pointer;transition:all .2s var(--ease);background:0 0;border-radius:20px;padding:.4rem 1rem;font-family:Noto Sans JP,sans-serif;font-size:.88rem;line-height:1}.row-btn:hover{border-color:var(--sakura);color:var(--sakura);background:var(--sakura-light)}.row-btn.selected{background:var(--matcha-light);border-color:var(--matcha);color:#3a7a56;font-weight:600}.gojuon-grid{flex-direction:column;gap:.75rem;display:flex}.grid-row{transition:opacity .3s var(--ease), filter .3s var(--ease);grid-template-columns:72px repeat(5,1fr);align-items:stretch;gap:.6rem;display:grid}.grid-row.dimmed{opacity:.28;filter:grayscale(60%)}.row-label{color:var(--text-3);letter-spacing:.04em;border-radius:var(--radius-s);background:#00000006;justify-content:center;align-items:center;font-size:.78rem;font-weight:600;display:flex}.grid-cell{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-m);text-align:center;cursor:pointer;box-shadow:var(--shadow-s);transition:all .22s var(--ease);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;min-height:80px;padding:.9rem .4rem;display:flex;position:relative;overflow:hidden}.grid-cell:before{content:"";background:linear-gradient(135deg, var(--sakura-light), transparent 60%);opacity:0;transition:opacity .22s;position:absolute;inset:0}.grid-cell:not(.empty):hover{border-color:var(--sakura);box-shadow:var(--shadow-m), 0 0 0 3px var(--sakura-glow);transform:translateY(-4px)scale(1.02)}.grid-cell:not(.empty):hover:before{opacity:1}.grid-cell:not(.empty):active{transform:translateY(-1px)scale(.99)}.grid-cell.empty{border:1.5px dashed var(--border-soft);box-shadow:none;cursor:default;background:0 0}.cell-hiragana{color:var(--text);z-index:1;font-family:Noto Sans JP,sans-serif;font-size:1.6rem;font-weight:500;line-height:1;position:relative}.cell-katakana{color:var(--text-3);z-index:1;margin-top:2px;font-family:Noto Sans JP,sans-serif;font-size:.75rem;position:relative}.cell-romaji{color:var(--sakura);letter-spacing:.03em;z-index:1;margin-top:3px;font-size:.7rem;font-weight:600;position:relative}.flashcard-wrapper{flex-direction:column;align-items:center;gap:2rem;padding:1rem 0 2rem;display:flex}.progress-area{flex-direction:column;align-items:center;gap:.5rem;width:320px;display:flex}.progress-text{color:var(--text-3);font-size:.875rem;font-weight:600}.progress-bar-track{background:var(--border);border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--sakura), var(--matcha));height:100%;transition:width .4s var(--ease);border-radius:2px}.flashcard-scene{perspective:1200px;width:320px;height:420px}.flashcard{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s var(--flip-ease);cursor:pointer;position:relative}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{backface-visibility:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-l);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;display:flex;position:absolute;inset:0}.flashcard-front{border:2px solid var(--border);background:linear-gradient(150deg,#fff 0%,#fdf7f8 100%)}.flashcard-back{border:2px solid var(--sakura);background:linear-gradient(150deg,#fff8f9 0%,#fff 50%,#f2faf6 100%);transform:rotateY(180deg)}.card-type-badge{letter-spacing:.08em;text-transform:uppercase;background:var(--sakura-light);color:var(--sakura);border:1px solid #f0939c4d;border-radius:20px;padding:.25rem .75rem;font-size:.72rem;font-weight:700}.card-type-badge.revealed{background:var(--matcha-light);color:var(--matcha);border-color:#7daa904d}.kana-large{color:var(--text);text-shadow:0 4px 20px #0000000a;font-family:Noto Sans JP,sans-serif;font-size:7.5rem;font-weight:500;line-height:1}.flip-hint{color:var(--text-3);letter-spacing:.03em;font-size:.78rem}.romaji-large{letter-spacing:-.03em;background:linear-gradient(135deg, var(--sakura), #d4737a);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:4.5rem;font-weight:700;line-height:1}.kana-pair{align-items:center;gap:.75rem;font-family:Noto Sans JP,sans-serif;display:flex}.hiragana-detail{color:var(--text);font-size:2rem;font-weight:400}.kana-divider{color:var(--border);font-size:1.2rem}.katakana-detail{color:var(--text-2);font-size:2rem;font-weight:400}.sound-icon{color:var(--text-3);margin-top:.5rem;font-size:.78rem}.flashcard-controls{align-items:center;gap:.75rem;display:flex}.ctrl-btn{border-radius:var(--radius-m);cursor:pointer;transition:all .22s var(--ease);-webkit-user-select:none;user-select:none;border:none;font-family:inherit;font-size:.95rem;font-weight:600}.nav-btn{background:var(--surface-solid);color:var(--text-2);border:1.5px solid var(--border);box-shadow:var(--shadow-s);align-items:center;gap:.4rem;padding:.75rem 1.25rem;display:flex}.nav-btn:hover{background:var(--surface-solid);border-color:var(--sakura);color:var(--sakura);box-shadow:var(--shadow-m);transform:translateY(-2px)}.btn-arrow{font-size:1rem}.btn-label{font-size:.88rem}.flip-btn{background:var(--sakura);color:#fff;box-shadow:var(--shadow-sakura);min-width:140px;padding:.85rem 2rem;font-size:1rem}.flip-btn:hover{background:#e5828b;transform:translateY(-2px);box-shadow:0 12px 32px #f0939c66}.flip-btn:active{transform:translateY(0)}.empty-state{text-align:center;background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--radius-l);padding:4rem 2rem}.empty-icon{margin-bottom:1rem;font-size:3rem}.empty-state p{color:var(--text-2);font-size:1rem}@keyframes popIn{0%{opacity:0;transform:scale(.92)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}.pop-in{animation:popIn .35s var(--ease-bounce) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s var(--ease) forwards}