:root{--bg:#F3F2EE;--panel:#fff;--sunk:#EAE8E2;--ink:#15171A;--sub:#5B6067;--accent:#1F4FD1;--ng:#B42318;--ok:#2E6B3F;--line:#DEDCD5;--on:#fff;--sh:0 1px 2px rgba(21,23,26,.06),0 8px 24px rgba(21,23,26,.08);--scrim:rgba(21,23,26,.4);--b:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root{--bg:#111315;--panel:#1B1D1F;--sunk:#24272A;--ink:#ECEBE6;--sub:#A3A7AD;--accent:#8FA8FF;--ng:#FF8F80;--ok:#74C68E;--line:#2E3134;--on:#111315;--sh:0 8px 24px rgba(0,0,0,.4);color-scheme:dark}}[hidden]{display:none!important}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--ink);font:15px/1.5 "IBM Plex Sans JP",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}body{min-height:100dvh;max-width:520px;margin:0 auto;overflow-x:hidden}.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}.sub{color:var(--sub)}button{font:inherit;color:inherit;cursor:pointer}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;flex:none}.view{display:none;min-height:100dvh;flex-direction:column}body[data-view=study] #study,body[data-view=add] #add,body[data-view=list] #list{display:flex}.hd{height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;border-bottom:var(--b);font-size:13px}.hd-l{display:flex;gap:8px}.ib{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:var(--b);border-radius:4px;background:var(--panel)}.ib:disabled{opacity:.35;cursor:default}.stage{flex:1;position:relative;padding:24px;display:flex;min-height:360px}.card{position:relative;flex:1;background:var(--panel);border:var(--b);border-radius:14px;box-shadow:var(--sh);padding:20px;display:flex;flex-direction:column;touch-action:pan-y;user-select:none;-webkit-user-select:none;transform-origin:50% 120%;outline:none;overflow:hidden}.card:focus-visible{border-color:var(--accent)}.kind{font-size:12px;text-align:right;min-height:18px}.front{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}h1{font-size:44px;font-weight:600;word-break:break-word;line-height:1.1;letter-spacing:-.02em}h1.long{font-size:20px;line-height:1.5}#tap{font-size:13px}.card.open{overflow:auto}.card.open .front{flex:0;padding:16px 0 8px}.card.open #tap{display:none}.card.open h1{font-size:30px}.card.open h1.long{font-size:17px}#answer{border-top:var(--b);padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:in 120ms ease-out}#ja{font-size:20px;font-weight:600}.ex{font-size:14px}.ex:empty,#note:empty{display:none}#note{font-size:13px;white-space:pre-wrap}#pic{width:100%;max-width:240px;aspect-ratio:1;object-fit:cover;border-radius:4px;pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}#pic:not([src]),#pic[src=""]{display:none}.lbl{position:absolute;top:20px;font-weight:600;padding:6px 10px;border:2px solid;border-radius:4px;transform:rotate(-8deg);opacity:0;pointer-events:none}.lbl-ok{left:20px;color:var(--ok)}.lbl-ng{right:20px;color:var(--ng)}.decide{padding:0 24px calc(12px + env(safe-area-inset-bottom))}.btns{display:flex;gap:12px}.btn{flex:1;height:48px;border:var(--b);border-radius:10px;background:var(--panel);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;transition:transform 120ms ease-out,border-color 120ms ease-out}.btn:active{transform:scale(.98)}.btn svg{width:16px;height:16px}.btns .btn{height:60px;flex-direction:column;gap:2px}.btn i{display:flex;gap:6px;align-items:center;font-style:normal}.btn small{font:11px "IBM Plex Mono",monospace;color:var(--sub);min-height:14px}.btn.ng{color:var(--ng)}.btn.ok{color:var(--ok)}.hot.ng{background:var(--ng)}.hot.ok{background:var(--ok)}.hot,.hot small{color:var(--on)!important}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on)}.btn.wide{width:100%;flex:none}.btn:disabled{opacity:.4}.toast{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(110px + env(safe-area-inset-bottom));width:min(342px,calc(100% - 48px));height:44px;background:var(--ink);color:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 12px;font-size:13px;z-index:5;animation:in 120ms ease-out}.toast button{height:36px;padding:0 10px;background:none;border:1px solid;border-radius:4px;color:inherit;font-size:13px}.scrim{position:fixed;inset:0;background:var(--scrim);z-index:10}.sheet{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--panel);border-top:1px solid var(--ink);border-radius:4px 4px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));z-index:11;display:flex;flex-direction:column;gap:12px;max-height:85dvh;overflow:auto;animation:up 120ms ease-out}.sheet h2{font-size:15px;font-weight:600}.sheet p{font-size:13px}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
@keyframes up{from{transform:translateY(16px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important}}.examples{align-self:stretch;border-top:var(--b);padding-top:12px;display:flex;flex-direction:column;gap:4px;text-align:center}.ex-en{margin-top:4px;font-size:16px;line-height:1.55}.ex-en b{font-weight:600;border-bottom:2px solid var(--accent)}h1.end{font-size:34px}.ex-ja{font-size:13px}.ex-src{margin-top:8px;font-size:11px}.title{font-weight:600;font-size:15px}.seg{display:flex;margin:12px 16px;padding:3px;border-radius:8px;background:var(--sunk)}.seg button{flex:1;height:36px;border:0;border-radius:6px;background:none;font-size:14px;color:var(--sub)}.seg [aria-selected=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:600}.saved{margin:0 16px 8px;color:var(--ok);font-size:13px}.form{padding-bottom:96px}.f{margin:0 16px 12px}.f label{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin-bottom:4px}.in{display:block;width:100%;height:48px;background:var(--panel);border:var(--b);border-radius:8px;padding:12px;font-size:16px;color:var(--ink);outline:none}textarea.in{height:88px;resize:none;font-family:inherit}.in:focus{border:2px solid var(--accent);padding:11px}.in.bad{border:2px solid var(--ng);padding:11px}.addbar{position:fixed;left:0;right:0;max-width:520px;margin:0 auto;bottom:0;display:flex;gap:12px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:var(--b);z-index:4}body:not([data-view=add]) .addbar:not(.listbar),body:not([data-view=list]) .listbar{display:none}.addbar .btn{height:48px}.addbar .primary{flex:2}.drawer{position:fixed;left:0;top:0;bottom:0;width:300px;max-width:85vw;background:var(--panel);border-right:1px solid var(--ink);padding:16px;z-index:11;display:flex;flex-direction:column;animation:side 120ms ease-out}.cap{font-size:12px;margin-top:16px}.cap:first-child{margin-top:0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0;border:0;border-bottom:var(--b);background:none;text-align:left;font-size:15px;width:100%}
@keyframes side{from{transform:translateX(-16px)}to{transform:none}}.fbar{display:flex;gap:8px;margin:0 16px 12px}.pick{flex:1;height:40px;padding:8px 12px;font-size:14px;text-align:left}.cnt{width:96px;height:40px;padding:8px 12px;font-size:14px;text-align:right}.rows{list-style:none;padding-bottom:88px;border-top:var(--b)}.rows li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--b);background:var(--panel)}.rows .t{flex:1;min-width:0}.rows .t b{display:block;font-weight:600}.rows .t span{display:block;font-size:13px;color:var(--sub)}.tag{font:11px "IBM Plex Mono",monospace;border:1px solid var(--sub);border-radius:4px;padding:1px 6px;color:var(--sub)}.rows .s{font-size:11px;width:84px;text-align:right;color:var(--sub)}body[data-view=list] .listbar{display:flex}.listbar .wide{height:48px}.ngtext{color:var(--ng)}.chk{display:flex;align-items:center;gap:12px;min-height:44px;border-bottom:var(--b);font-size:15px}.chk input{width:20px;height:20px;accent-color:var(--accent)}.chk span:last-child{margin-left:auto}.two{display:flex;gap:12px}.two .btn{height:48px}.ng-n{color:var(--ng)}.ok-n{color:var(--ok)}.dh{display:flex;align-items:center;justify-content:space-between}.ib.sm{width:44px;height:44px;border:0}.ib.sm svg{width:20px;height:20px}.imgpick{display:flex;gap:8px;align-items:center}.imgpick .btn{height:44px;flex:none;padding:0 16px;font-size:14px}#imgPrev{width:44px;height:44px;object-fit:cover;border-radius:4px;border:var(--b)}.bigpic{width:100%;max-width:240px;aspect-ratio:1;object-fit:cover;border-radius:4px;align-self:center;border:var(--b)}.pbar{display:flex;align-items:center;gap:8px;margin:12px 24px 0;font-size:12px}.pbadge{font-weight:600;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:2px 8px}.btn.pstop{flex:none;margin-left:auto;height:44px;padding:0 12px;font-size:13px}.redo{display:flex;flex-direction:column;gap:12px;align-self:stretch;margin-top:16px}.redo .btn{flex:none;height:48px;font-size:15px}.selbtn{width:64px;height:40px;padding:0;font-size:14px;text-align:center}.selbtn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on);font-weight:600}.rows li.sel{box-shadow:inset 3px 0 0 var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.rows .ck{width:20px;height:20px;border:1px solid var(--sub);border-radius:4px;flex:none}.rows li.sel .ck{background:var(--accent);border-color:var(--accent)}.rows .t b,.rows .t span,.rows .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}