:root{--bg: #fdf8ee;--bg-soft: #fff5e0;--bg-blue: #eaf3f7;--surface: #ffffff;--surface-soft: #fbf6ec;--border: #ece2cf;--text: #2f3a42;--text-soft: #6b7680;--text-faint: #9aa3ad;--primary: #4a8d95;--primary-soft: #cfe6e3;--primary-strong: #2f6c75;--accent: #f4a261;--accent-soft: #ffe1c4;--warm: #e98a6a;--gold: #f4c95d;--green: #7fb3a6;--shadow: 0 4px 18px rgba(80, 90, 100, .06);--radius-lg: 18px;--radius-md: 12px;--radius-sm: 8px;--maxw: 520px}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-blue) 100%);background-attachment:fixed;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}button:disabled{cursor:not-allowed;opacity:.55}a{color:var(--primary-strong);text-decoration:none}ul{list-style:none;padding:0;margin:0}.app{display:flex;flex-direction:column;min-height:100dvh}.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#fdf8eed9;backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--border)}.app-header__brand{display:flex;align-items:baseline;gap:8px}.app-header__brand strong{font-size:18px;letter-spacing:.02em;color:var(--primary-strong)}.app-header__brand span{font-size:12px;color:var(--text-faint)}.app-header__streak{font-size:13px;background:var(--accent-soft);color:var(--warm);padding:4px 10px;border-radius:999px;font-weight:600}.app-main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:18px 18px 110px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:center;background:#ffffffeb;backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-top:1px solid var(--border);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}.bottom-nav__inner{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:var(--maxw)}.bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:11px;color:var(--text-faint);text-decoration:none;transition:color .15s ease}.bottom-nav__item.is-active{color:var(--primary-strong);font-weight:600}.bottom-nav__icon{font-size:20px;line-height:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow)}.card+.card{margin-top:14px}.card__title{font-size:13px;color:var(--text-soft);margin:0 0 6px;letter-spacing:.05em;text-transform:uppercase}.card__heading{font-size:18px;font-weight:700;margin:0 0 8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:var(--radius-md);font-size:16px;font-weight:600;background:var(--primary);color:#fff;transition:transform .05s ease,background .15s ease;width:100%;min-height:48px}.btn:hover:not(:disabled){background:var(--primary-strong)}.btn:active:not(:disabled){transform:translateY(1px)}.btn--secondary{background:var(--primary-soft);color:var(--primary-strong)}.btn--secondary:hover:not(:disabled){background:#b8dad6}.btn--ghost{background:transparent;color:var(--primary-strong);border:1px solid var(--primary-soft)}.btn--ghost:hover:not(:disabled){background:var(--primary-soft)}.btn--accent{background:var(--accent)}.btn--accent:hover:not(:disabled){background:var(--warm)}.btn--small{padding:8px 12px;min-height:36px;font-size:14px;width:auto}.btn-row{display:grid;gap:10px}.hero{background:linear-gradient(135deg,#fff5e0,#eaf3f7);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 20px;margin-bottom:14px}.hero__title{font-size:28px;font-weight:800;margin:0;color:var(--primary-strong);letter-spacing:.01em}.hero__subtitle{margin:6px 0 0;font-size:14px;color:var(--text-soft)}.progress-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.progress-cell{background:var(--surface-soft);border-radius:var(--radius-md);padding:10px;text-align:center}.progress-cell__label{font-size:11px;color:var(--text-faint);margin-bottom:4px}.progress-cell__value{font-size:20px;font-weight:700;color:var(--primary-strong)}.progress-cell__unit{font-size:11px;color:var(--text-soft);margin-left:2px}.xp-bar{margin-top:12px}.xp-bar__meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-soft);margin-bottom:4px}.xp-bar__track{height:8px;background:var(--bg-soft);border-radius:999px;overflow:hidden}.xp-bar__fill{height:100%;background:linear-gradient(90deg,var(--green),var(--primary));transition:width .4s ease}.phrase-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;text-align:left;width:100%;transition:border-color .15s ease,transform .05s ease}.phrase-card:hover{border-color:var(--primary-soft)}.phrase-card:active{transform:translateY(1px)}.phrase-card__english{font-size:16px;font-weight:600;color:var(--text)}.phrase-card__japanese{font-size:13px;color:var(--text-soft)}.phrase-card__meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--bg-soft);color:var(--text-soft)}.tag--done{background:var(--primary-soft);color:var(--primary-strong);font-weight:600}.step-indicator{display:flex;gap:6px;margin-bottom:14px}.step-indicator__item{flex:1;height:6px;border-radius:999px;background:var(--bg-soft)}.step-indicator__item.is-done{background:var(--green)}.step-indicator__item.is-current{background:var(--primary)}.practice-english{font-size:24px;line-height:1.5;font-weight:700;color:var(--text);margin:0 0 6px;letter-spacing:.01em}.practice-japanese{font-size:14px;color:var(--text-soft);margin:0 0 12px}.chunk-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.chunk-row{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color .15s ease,background .2s ease}.chunk-row.is-done{background:var(--primary-soft);border-color:#b8dad6}.chunk-row__text{flex:1;font-size:17px;font-weight:600}.chunk-row__actions{display:flex;gap:6px}.icon-btn{width:36px;height:36px;border-radius:999px;background:var(--bg-soft);display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--primary-strong)}.icon-btn:hover:not(:disabled){background:var(--accent-soft)}.recite-card{text-align:center;padding:24px 16px;background:linear-gradient(180deg,#fff5e0,#fff);border-radius:var(--radius-md);border:1px dashed var(--border);margin-bottom:12px}.recite-card__hint{color:var(--text-soft);font-size:13px;margin:0 0 6px}.recite-card__japanese{font-size:22px;font-weight:700;margin:6px 0 0}.recite-card__hidden{font-size:18px;color:var(--text-faint);margin:12px 0 0;letter-spacing:.4em}.recorder{margin-top:12px;padding:12px 14px;background:var(--bg-soft);border:1px dashed var(--border);border-radius:var(--radius-md)}.recorder__label{font-size:13px;font-weight:700;color:var(--primary-strong);margin:0 0 4px}.recorder__hint{font-size:12px;color:var(--text-soft);margin:0 0 8px}.recorder__notice{font-size:12px;color:var(--warm);background:var(--accent-soft);border-radius:var(--radius-sm);padding:6px 10px;margin:6px 0}.recorder__row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.recorder__audio{width:100%;margin-top:8px;display:block}.recorder__live{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px;color:#d9534f;font-weight:600}.rate-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;color:var(--text-soft)}.rate-row input[type=range]{flex:1;accent-color:var(--primary)}.complete-card{text-align:center;background:linear-gradient(135deg,#fff5e0,#cfe6e3);border-radius:var(--radius-lg);padding:28px 18px;margin-bottom:14px;border:1px solid var(--border)}.complete-card__title{font-size:22px;font-weight:800;color:var(--primary-strong);margin:6px 0}.complete-card__xp{display:inline-block;margin-top:12px;padding:6px 14px;background:var(--accent);color:#fff;font-weight:700;border-radius:999px}.city-stage{position:relative;margin:4px auto 14px}.city-stage__inner{position:relative;width:100%;aspect-ratio:1448 / 1086;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;box-shadow:0 6px 22px #505a641a,0 1px 3px #505a640f;background:#fdf8ee}.city-stage--full .city-stage__inner{max-width:580px;margin:0 auto}.city-stage--preview{margin-top:10px}.city-stage--preview .city-stage__inner{max-width:380px;margin:0 auto;border-radius:var(--radius-md)}.city-stage--empty .city-stage__inner{display:flex;align-items:center;justify-content:center;background:var(--bg-soft);aspect-ratio:1448 / 700}.city-stage__empty{margin:0;font-size:13px;color:var(--text-soft);padding:0 16px;text-align:center}.city-image-stage{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:inherit}.city-image-stage__transform{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;will-change:transform}.city-image-stage__bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.city-image-stage picture{display:contents}.city-image-stage__img{width:100%;height:100%;display:block;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;opacity:0;transition:opacity .32s ease}.city-image-stage__img.is-loaded{opacity:1}.city-env{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.city-env__cloud{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,#ffffff8c,#fff0 70%);filter:blur(1px)}.city-env__cloud--a{width:18%;height:8%;top:6%;left:-16%;animation:env-cloud-drift 92s linear infinite;opacity:.7}.city-env__cloud--b{width:22%;height:7%;top:10%;left:-25%;animation:env-cloud-drift 130s linear infinite 18s;opacity:.55}.city-env__cloud--c{width:14%;height:6%;top:3%;left:-10%;animation:env-cloud-drift 76s linear infinite 40s;opacity:.5}@keyframes env-cloud-drift{0%{transform:translate(0)}to{transform:translate(750%)}}.city-env__river{position:absolute;top:28%;right:0%;width:14%;height:70%;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);filter:blur(2px);opacity:0;animation:env-river-shimmer 5s ease-in-out infinite;mix-blend-mode:screen}@keyframes env-river-shimmer{0%,to{opacity:0;transform:translateY(0)}50%{opacity:.5;transform:translateY(2%)}}.city-env__lamp{position:absolute;width:9%;height:9%;border-radius:50%;background:radial-gradient(circle,#f4c95d8c,#f4c95d00 65%);animation:env-lamp-pulse 3.4s ease-in-out infinite}.city-env__lamp--a{top:48%;left:28%;animation-delay:0s}.city-env__lamp--b{top:58%;left:49%;animation-delay:1.2s}.city-env__lamp--c{top:53%;left:67%;animation-delay:2.4s}@keyframes env-lamp-pulse{0%,to{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}@media (prefers-reduced-motion: reduce){.city-image-stage__img,.city-image-stage__img.is-loaded{opacity:1;transition:none}.city-env__cloud,.city-env__cloud--a,.city-env__cloud--b,.city-env__cloud--c,.city-env__river,.city-env__lamp,.city-env__lamp--a,.city-env__lamp--b,.city-env__lamp--c{animation:none}.city-env__cloud{opacity:.45}.city-env__river{opacity:.25}.city-env__lamp{opacity:.45}}.city-image-stage__overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.city-tap{position:absolute;transform:translate(-50%,-50%);background:transparent;border:0;cursor:pointer;border-radius:14px;pointer-events:auto;font:inherit;color:inherit;transition:background .18s ease,transform .05s ease}.city-tap:hover{background:#ffffff2e}.city-tap:focus-visible{outline:2px solid var(--primary);outline-offset:2px;background:#ffffff38}.city-tap:active{transform:translate(-50%,-50%) scale(.97)}.city-tap.is-active{animation:city-tap-pulse .45s ease}@keyframes city-tap-pulse{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(.94)}to{transform:translate(-50%,-50%) scale(1)}}.city-label{position:absolute;background:#fffffff5;border:1px solid rgba(46,108,117,.22);border-radius:999px;padding:2px 10px;font-size:10px;font-weight:700;color:var(--primary-strong);white-space:nowrap;box-shadow:0 3px 9px #505a643d;pointer-events:none;letter-spacing:.02em;z-index:2}.city-label--top{transform:translate(-50%,calc(-100% - 12px))}.city-label--bottom{transform:translate(-50%,12px)}.city-label--top:after,.city-label--bottom:after{content:"";position:absolute;left:50%;margin-left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}.city-label--top:after{bottom:-5px;border-top:5px solid rgba(255,255,255,.96);filter:drop-shadow(0 1px 0 rgba(46,108,117,.22))}.city-label--bottom:after{top:-5px;border-bottom:5px solid rgba(255,255,255,.96);filter:drop-shadow(0 -1px 0 rgba(46,108,117,.22))}@media (max-width: 380px){.city-label{font-size:9px;padding:1.5px 8px}.city-label--top{transform:translate(-50%,calc(-100% - 8px))}.city-label--bottom{transform:translate(-50%,8px)}}.city-locked{position:absolute;display:inline-flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#fdf3d6eb,#f0d9a5eb);border:1px solid #cfa783;border-radius:5px;padding:3px 10px;pointer-events:none;box-shadow:0 2px 5px #503c1e33;z-index:1;animation:city-locked-glow 3s ease-in-out infinite}.city-locked--top{transform:translate(-50%,calc(-100% - 10px))}.city-locked--bottom{transform:translate(-50%,10px)}.city-locked--top:after,.city-locked--bottom:after{content:"";position:absolute;left:50%;margin-left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}.city-locked--top:after{bottom:-5px;border-top:5px solid rgba(240,217,165,.92);filter:drop-shadow(0 1px 0 #cfa783)}.city-locked--bottom:after{top:-5px;border-bottom:5px solid rgba(253,243,214,.92);filter:drop-shadow(0 -1px 0 #cfa783)}.city-locked__lv{font-size:10px;font-weight:800;color:#7a5a3a;line-height:1.05}.city-locked__name{font-size:8px;font-weight:600;color:#7a5a3a;opacity:.82;line-height:1.05;font-style:italic}@keyframes city-locked-glow{0%,to{box-shadow:0 2px 5px #503c1e2e}50%{box-shadow:0 2px 10px #f4c95d59}}@media (max-width: 380px){.city-locked{padding:2px 8px}.city-locked__lv{font-size:9px}.city-locked__name{font-size:7px}.city-locked--top{transform:translate(-50%,calc(-100% - 7px))}.city-locked--bottom{transform:translate(-50%,7px)}}.city-deco{position:absolute;pointer-events:none;transform:translate(-50%,-50%)}.city-deco svg{width:100%;height:auto;display:block}.city-deco--balloon{width:8.5%;animation:city-balloon-bob 4.5s ease-in-out infinite}@keyframes city-balloon-bob{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 4px))}}.city-deco--stars{width:12%;animation:city-stars-pulse 3.2s ease-in-out infinite}@keyframes city-stars-pulse{0%,to{opacity:.85}50%{opacity:1}}.city-bubble{position:absolute;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;z-index:5;pointer-events:none;box-shadow:0 4px 14px #505a642e;animation:bubble-pop 1.6s ease-out forwards}.city-bubble--above{transform:translate(-50%,calc(-100% - 8px))}.city-bubble--below{transform:translate(-50%,calc(50% + 8px))}.city-bubble--above:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;filter:drop-shadow(0 1px 0 var(--border))}.city-bubble--below:after{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;filter:drop-shadow(0 -1px 0 var(--border))}@keyframes bubble-pop{0%{opacity:0;transform:translate(-50%,calc(-100% - 2px)) scale(.85)}18%{opacity:1;transform:translate(-50%,calc(-100% - 8px)) scale(1)}85%{opacity:1}to{opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(1)}}.city-bubble--below{animation-name:bubble-pop-below}@keyframes bubble-pop-below{0%{opacity:0;transform:translate(-50%,2px) scale(.85)}18%{opacity:1;transform:translate(-50%,calc(50% + 8px)) scale(1)}85%{opacity:1}to{opacity:0;transform:translate(-50%,calc(50% + 12px)) scale(1)}}.city-stage__hint{text-align:center;font-size:11px;color:var(--text-faint);margin:6px 0 0}.facility-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.facility-chip{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 6px;text-align:center;font-size:12px}.facility-chip__emoji{font-size:22px;display:block;margin-bottom:2px}.facility-chip.is-locked{opacity:.45}.log-list{display:flex;flex-direction:column;gap:8px}.log-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;font-size:13px}.log-row__main{display:flex;flex-direction:column}.log-row__english{font-weight:600;color:var(--text)}.log-row__date{color:var(--text-faint);font-size:11px}.log-row__xp{font-size:12px;color:var(--accent);font-weight:700}.phrase-list{display:flex;flex-direction:column;gap:10px}.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.filter-chip{background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--text-soft)}.filter-chip.is-active{background:var(--primary-soft);color:var(--primary-strong);border-color:#b8dad6;font-weight:600}.empty{text-align:center;color:var(--text-faint);font-size:13px;padding:18px}.notice{font-size:12px;color:var(--warm);background:var(--accent-soft);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:10px}.danger-link{display:inline-block;margin-top:18px;font-size:12px;color:var(--text-faint);text-decoration:underline}.back-link{margin-bottom:12px;width:auto;display:inline-flex}.practice-card .practice-english{margin-top:4px}.step-card{background:linear-gradient(180deg,#fff,#fbf6ec)}.step-card__eyebrow{font-size:11px;letter-spacing:.12em;color:var(--text-faint);margin:0 0 4px;text-transform:uppercase}.step-card__title{font-size:18px;font-weight:800;margin:0 0 6px;color:var(--primary-strong);letter-spacing:.01em}.step-card__lead{font-size:13px;color:var(--text-soft);margin:0 0 14px;line-height:1.55}.chunk-row__number{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-soft);display:inline-flex;align-items:center;justify-content:center}.chunk-row.is-done .chunk-row__number{background:var(--green);color:#fff;border-color:var(--green)}.icon-btn--accent.is-on{background:var(--green);color:#fff}.icon-btn--repeat{background:var(--primary-soft)}.icon-btn--repeat:hover:not(:disabled){background:#b8dad6}.chunk-progress{font-size:12px;color:var(--text-soft);margin:0 0 8px;text-align:right}.rate-row__label{min-width:64px;text-align:right;font-weight:600;color:var(--primary-strong)}.recite-card__chunks-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:11px;color:var(--text-faint)}.recite-dot{width:8px;height:8px;background:var(--primary-soft);border-radius:50%;display:inline-block}.recite-card__chunks-label{margin-left:4px}.recite-card__english-peek{margin:12px 0 0;font-size:18px;font-weight:600;color:var(--primary-strong);background:var(--surface);border:1px dashed var(--primary-soft);border-radius:var(--radius-sm);padding:8px 10px}.recorder{margin:14px 0;padding:14px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-md);transition:background .2s ease,border-color .2s ease}.recorder--has-rec{background:#fff8ec;border-color:var(--accent-soft)}.recorder--live{background:#fff0ee;border-color:#f3c7c2}.recorder__title{font-size:13px;font-weight:700;color:var(--primary-strong);margin:0 0 4px;letter-spacing:.02em}.recorder__hint{font-size:12px;color:var(--text-soft);margin:0 0 10px;line-height:1.55}.recorder__after-hint{font-size:12px;color:var(--primary-strong);margin:8px 0 0;background:var(--primary-soft);border-radius:var(--radius-sm);padding:8px 10px;line-height:1.5}.recorder__nudge{font-size:11px;color:var(--text-faint);margin:8px 0 0}.recorder__stop-btn{background:#d9534f;color:#fff}.recorder__stop-btn:hover:not(:disabled){background:#c9302c}.recorder__playback{margin-top:4px}.recorder__playback-hint{font-size:12px;color:var(--text-soft);margin:0 0 6px;font-weight:600}.recorder__audio{width:100%;display:block;margin-top:4px;max-width:100%}.recorder__live{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:#d9534f;font-weight:600}.recorder__dot{width:9px;height:9px;border-radius:50%;background:#d9534f;animation:dot-pulse 1.1s infinite ease-in-out}@keyframes dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.recorder__notice{font-size:12px;color:var(--warm);background:var(--accent-soft);border-radius:var(--radius-sm);padding:8px 10px;margin:6px 0}.recorder__self-check{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:999px;color:var(--text-soft);min-height:32px;transition:background .15s ease,color .15s ease,border-color .15s ease}.chip-btn:hover:not(:disabled){border-color:var(--primary-soft);color:var(--primary-strong)}.chip-btn:disabled{opacity:.5}.chip-btn.is-on{background:var(--green);color:#fff;border-color:var(--green)}.chip-btn--ghost{background:transparent}.xp-breakdown{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px}.xp-breakdown__row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--text);padding:4px 0}.xp-breakdown__row--total{border-top:1px dashed var(--border);margin-top:4px;padding-top:8px;font-weight:800;color:var(--primary-strong)}.xp-breakdown__count{color:var(--text-faint);font-size:12px;margin-left:4px}.xp-breakdown__sub{font-weight:700;color:var(--accent);font-feature-settings:"tnum"}.xp-breakdown__row--total .xp-breakdown__sub{color:var(--primary-strong)}.xp-breakdown__empty{font-size:12px;color:var(--text-soft);margin:0}.complete-card{text-align:center;background:linear-gradient(135deg,#fff5e0,#cfe6e3);border-radius:var(--radius-lg);padding:24px 18px;margin-bottom:14px;border:1px solid var(--border)}.complete-card__sparkle{font-size:38px;line-height:1}.complete-card__title{font-size:22px;font-weight:800;color:var(--primary-strong);margin:8px 0 4px}.complete-card__sub{color:var(--text-soft);font-size:14px;margin:0}.complete-card__xp{display:inline-block;margin-top:12px;padding:6px 16px;background:var(--accent);color:#fff;font-weight:800;border-radius:999px;font-size:16px;letter-spacing:.02em}.complete-card__streak{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--warm)}.complete-card__energy{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--primary-strong)}.complete-card__energy strong{font-size:15px;font-weight:800;letter-spacing:.02em;margin-left:2px;font-feature-settings:"tnum"}.recap-list{margin:16px auto 0;padding:12px 14px;background:#fff9;border-radius:var(--radius-md);display:inline-flex;flex-direction:column;gap:4px;text-align:left;font-size:13px;color:var(--text);min-width:80%}.recap-list li{display:flex;align-items:center;gap:8px;color:var(--text-faint)}.recap-list li.is-done{color:var(--primary-strong);font-weight:600}.recap-list li span:first-child{width:18px;display:inline-flex;justify-content:center}.recap-list__sub{color:var(--text-soft);font-size:12px;font-weight:400}.complete-card__breakdown{margin-top:16px;text-align:left}.complete-card__breakdown-title{font-size:12px;font-weight:700;color:var(--text-soft);margin:0 0 6px;letter-spacing:.05em}.level-up{margin-top:16px;padding:12px 14px;background:linear-gradient(135deg,#fff7d6,#ffe1c4);border:1px solid var(--gold);border-radius:var(--radius-md);text-align:left}.level-up__title{margin:0 0 6px;font-size:14px;font-weight:800;color:#a26420}.level-up__list{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text)}.level-up__emoji{margin-right:6px;font-size:16px}.mission-card__tagline{font-size:12px;color:var(--accent);font-weight:700;margin:0 0 4px;letter-spacing:.04em}.mission-card__title{font-size:18px;font-weight:700;margin:0 0 10px}.mission-card__phrase{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:6px}.mission-card__english{font-size:18px;font-weight:700;margin:0;line-height:1.45}.mission-card__japanese{font-size:13px;color:var(--text-soft);margin:0}.hero__streak{margin:10px 0 0;font-size:12px;color:var(--primary-strong);background:#fff9;border-radius:999px;padding:6px 12px;display:inline-block;font-weight:600}.phrase-list-progress{font-size:12px;color:var(--text-soft);margin:-4px 0 10px;font-weight:600}.log-cards{display:flex;flex-direction:column;gap:10px}.log-card{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:4px}.log-card__head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-faint)}.log-card__date{font-weight:600}.log-card__xp{color:var(--accent);font-weight:700;font-size:12px}.log-card__english{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--text)}.log-card__japanese{margin:0;font-size:12px;color:var(--text-soft)}.log-card__meta{display:flex;gap:6px;margin-top:4px}.log-card__chip{font-size:11px;color:var(--text-soft);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 8px}.tag--source{background:var(--bg-blue);color:var(--primary-strong);font-weight:600}.tag--source-custom{background:var(--accent-soft);color:var(--warm)}.phrase-card-wrapper{display:flex;flex-direction:column;gap:6px}.phrase-card-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;padding:0 2px}.phrases-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}.phrases-header>div:first-child{flex:1;min-width:0}.phrase-list-progress__sub{color:var(--text-faint);font-weight:400;font-size:11px}.form-grid{display:flex;flex-direction:column;gap:14px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field__row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.form-field__label{font-size:12px;font-weight:700;color:var(--text-soft);letter-spacing:.04em}.form-input{width:100%;font-family:inherit;font-size:15px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);line-height:1.5;transition:border-color .15s ease,background .15s ease}.form-input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-soft)}textarea.form-input{resize:vertical;min-height:60px}.form-error{font-size:12px;color:#d9534f;font-weight:600}.form-hint{font-size:13px;color:var(--text-soft);background:var(--bg-soft);border-radius:var(--radius-sm);padding:10px 12px;margin:0 0 14px;line-height:1.6}.form-hint-small{font-size:11px;color:var(--text-faint);line-height:1.5}.form-field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}@media (max-width: 480px){.form-field-row{grid-template-columns:1fr}}.btn--danger{background:#d9534f}.btn--danger:hover:not(:disabled){background:#c9302c}.audio-section{margin-top:14px}.audio-section__title{font-size:16px;font-weight:800;color:var(--primary-strong);margin:0 0 6px}.audio-section__lead{font-size:13px;color:var(--text-soft);margin:0 0 8px;line-height:1.55}.audio-section__notice{font-size:12px;color:var(--text-soft);background:var(--bg-soft);border-radius:var(--radius-sm);padding:8px 10px;margin:0 0 14px;line-height:1.5}.audio-section__small{font-size:11px;color:var(--text-faint);line-height:1.55;margin:14px 0 0}.audio-slot{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-bottom:12px}.audio-slot__title{font-size:14px;font-weight:800;color:var(--primary-strong);margin:0 0 4px;letter-spacing:.02em}.audio-slot__desc{font-size:12px;color:var(--text-soft);margin:0 0 10px;line-height:1.55}.audio-slot__notice{font-size:12px;color:var(--warm);background:var(--accent-soft);border-radius:var(--radius-sm);padding:8px 10px;margin:6px 0}.audio-slot__hint{font-size:12px;color:var(--text-soft);margin:8px 0 0}.audio-slot__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.audio-slot__player{width:100%;display:block;margin-top:6px;max-width:100%}.audio-slot__meta{font-size:11px;color:var(--text-faint);margin:6px 0 8px}.audio-slot__live{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px;color:#d9534f;font-weight:600}.audio-slot__dot{width:9px;height:9px;border-radius:50%;background:#d9534f;animation:dot-pulse 1.1s infinite ease-in-out}.audio-slot__stop{background:#d9534f;color:#fff}.audio-slot__stop:hover:not(:disabled){background:#c9302c}.tag--audio{background:var(--primary-soft);color:var(--primary-strong);font-weight:600}.voice-energy{margin-top:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}.voice-energy__row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}.voice-energy__label{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-soft);text-transform:uppercase}.voice-energy__value{font-size:18px;font-weight:800;color:var(--primary-strong);font-feature-settings:"tnum"}.voice-energy__hint{font-size:11px;color:var(--text-faint)}.voice-energy__meter{position:relative;height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden}.voice-energy__fill{height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--primary) 70%,var(--gold) 100%);border-radius:999px;transition:width .4s ease}.voice-energy__fill--placeholder{width:28%;opacity:.4;animation:voice-energy-shimmer 1.4s ease-in-out infinite}@keyframes voice-energy-shimmer{0%,to{transform:translate(0);opacity:.25}50%{transform:translate(40%);opacity:.55}}@media (prefers-reduced-motion: reduce){.voice-energy__fill,.voice-energy__fill--placeholder{animation:none;transition:none}}.data-notice{margin:12px 0 0;padding:8px 12px;border-radius:var(--radius-sm);font-size:13px}.data-notice--ok{background:var(--primary-soft);color:var(--primary-strong);font-weight:600}.data-notice--err{background:var(--accent-soft);color:var(--warm);font-weight:600}.dawn-scene{position:relative;height:92px;border-radius:var(--radius-md);overflow:hidden;margin:0 auto 14px;max-width:280px;border:1px solid rgba(255,255,255,.4)}.dawn-scene__sky{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#2a3a55,#4f6587);animation:scene-sky 2.6s ease-out .15s forwards}@keyframes scene-sky{0%{background:linear-gradient(180deg,#2a3a55,#4f6587)}35%{background:linear-gradient(180deg,#5e537a,#f4a261 78%,#f7d29c)}70%{background:linear-gradient(180deg,#b9d2dc,#ffe7cf)}to{background:linear-gradient(180deg,#cfe6e3,#fff5e0)}}.dawn-scene__star{position:absolute;font-size:9px;color:#fff;opacity:.85;animation:scene-star 1s ease-out forwards}.dawn-scene__star--1{top:14px;left:30px}.dawn-scene__star--2{top:22px;right:80px}.dawn-scene__star--3{top:8px;right:36px;font-size:7px}@keyframes scene-star{0%{opacity:.95}60%{opacity:.4}to{opacity:0}}.dawn-scene__sun{position:absolute;width:22px;height:22px;border-radius:50%;background:#f4c95d;box-shadow:0 0 14px #f4c95db3;bottom:12px;left:-22px;animation:scene-sun 2.6s ease-out .15s forwards}@keyframes scene-sun{0%{left:-22px;bottom:12px;opacity:0}25%{opacity:.6}to{left:78%;bottom:50px;opacity:1}}.dawn-scene__ground{position:absolute;bottom:0;left:0;right:0;height:18px;background:linear-gradient(180deg,#b6c97e,#a3b86a)}.dawn-scene__house{position:absolute;bottom:14px}.dawn-scene__roof{position:absolute;width:0;height:0;left:50%;transform:translate(-50%)}.dawn-scene__window{position:absolute;background:#f4c95df2;border-radius:1px;animation:scene-window 2.6s ease-out .15s forwards}@keyframes scene-window{0%{background:#f4c95df2;box-shadow:0 0 6px #f4c95db3}60%{background:#f4c95d99;box-shadow:0 0 2px #f4c95d4d}to{background:#fdf8eee6;box-shadow:none}}.dawn-scene__house--small{width:30px;height:26px;left:28%;background:#7fb3a6;border-radius:2px 2px 0 0}.dawn-scene__house--small .dawn-scene__roof{top:-10px;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:10px solid #e98a6a}.dawn-scene__house--small .dawn-scene__window{width:8px;height:10px;bottom:8px;left:50%;transform:translate(-50%)}.dawn-scene__house--big{width:40px;height:36px;left:54%;background:#9cc3d6;border-radius:2px 2px 0 0}.dawn-scene__house--big .dawn-scene__roof{top:-12px;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:12px solid #e98a6a}.dawn-scene__house--big .dawn-scene__window{width:12px;height:14px;bottom:8px;left:50%;transform:translate(-50%)}.level-up__item{position:relative;padding-left:22px;animation:facility-rise .6s ease-out both}.level-up__item .level-up__emoji{position:relative;z-index:2}.level-up__ripple{position:absolute;left:8px;top:50%;width:22px;height:22px;border-radius:50%;background:var(--gold);opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none;animation:facility-ripple 1.4s ease-out .4s 2}@keyframes facility-rise{0%{transform:translateY(8px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes facility-ripple{0%{opacity:.55;transform:translate(-50%,-50%) scale(.6)}to{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}@media (prefers-reduced-motion: reduce){.dawn-scene__sky,.dawn-scene__sun,.dawn-scene__star,.dawn-scene__window,.level-up__ripple,.level-up__item,.city-bubble,.city-bubble--below,.city-tap,.city-tap.is-active,.city-locked,.city-deco--balloon,.city-deco--stars{animation:none}.dawn-scene__sky{background:linear-gradient(180deg,#cfe6e3,#fff5e0)}.dawn-scene__sun{left:78%;bottom:50px;opacity:1}.dawn-scene__star{opacity:0}.dawn-scene__window{background:#fdf8eee6}}@media (min-width: 540px){.practice-english{font-size:26px}}@media (max-width: 380px){.btn{font-size:15px;padding:13px 14px}.practice-english{font-size:21px}.recite-card__japanese{font-size:19px}.step-card__title{font-size:17px}}