:root{--bg:#121212;--surface:#181818;--mid:#1f1f1f;--card:#252525;--green:#1ed760;--green-dark:#1db954;--white:#fff;--silver:#b3b3b3;--light:#cbcbcb;--border:#4d4d4d;--red:#f3727f;--orange:#ffa42b;--blue:#539df5}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--white);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif}#root{justify-content:center;min-height:100vh;display:flex}.app-shell{flex-direction:column;width:100%;max-width:640px;min-height:100vh;padding:16px 20px 24px;display:flex}.app-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.app-title{letter-spacing:-.5px;color:var(--green);font-size:20px;font-weight:700}.nav{gap:16px;display:flex}.nav-btn{color:var(--silver);cursor:pointer;background:0 0;border:none;min-width:48px;min-height:48px;padding:4px 0;font-size:14px;font-weight:400}.nav-btn.active{color:var(--white);font-weight:700}.nav-btn:hover{color:var(--green)}.btn{cursor:pointer;text-transform:uppercase;letter-spacing:1.5px;border:none;border-radius:9999px;min-height:48px;padding:14px 20px;font-family:inherit;font-size:14px;font-weight:700;transition:background .15s}.btn-green{background:var(--green);color:#000}.btn-green:hover{background:var(--green-dark)}.btn-dark{background:var(--mid);color:var(--white)}.btn-dark:hover{background:#2a2a2a}.btn-outline{color:var(--white);border:1px solid var(--border);background:0 0;border-radius:9999px}.btn-danger{background:var(--mid);color:var(--red)}.btn-sm{min-height:40px;padding:8px 16px;font-size:12px}.btn-block{width:100%}.card{background:var(--surface);border-radius:8px;padding:20px;box-shadow:0 8px 24px #00000080}.input{background:var(--mid);color:var(--white);border:none;border-radius:500px;outline:none;padding:12px 20px;font-family:inherit;font-size:14px;box-shadow:0 1px #121212,inset 0 0 0 1px #7c7c7c}.input:focus{box-shadow:#121212 0px 1px 0px, var(--green) 0px 0px 0px 2px inset}.h2{margin:0 0 8px;font-size:24px;font-weight:700}.sub{color:var(--silver);font-size:14px}.label-xs{letter-spacing:1px;color:var(--silver);text-transform:uppercase;font-size:11px;font-weight:700}.badge{background:var(--mid);color:var(--silver);border-radius:9999px;padding:3px 10px;font-size:10.5px;font-weight:600}.badge-green{color:var(--green)}.progress-track{background:#282828;border-radius:9999px;height:6px;overflow:hidden}.progress-fill{background:var(--green);border-radius:9999px;height:100%;transition:width .3s}.filter-row{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.filter-chip{cursor:pointer;background:var(--mid);color:var(--silver);border:none;border-radius:9999px;min-height:36px;padding:8px 14px;font-size:11px;font-weight:700}.filter-chip.active{background:var(--green);color:#000}.pattern-list{flex-direction:column;gap:12px;max-height:65vh;padding-right:4px;display:flex;overflow-y:auto}.pattern-card{background:var(--surface);border-radius:8px;padding:14px;box-shadow:0 8px 24px #00000080}.pattern-head{justify-content:space-between;gap:12px;display:flex}.pattern-formula{color:var(--white);margin:6px 0 2px;font-size:15px;font-weight:700}.pattern-meaning{color:var(--silver);margin:0;font-size:13px}.pattern-meta{text-align:right;flex-direction:column;align-items:flex-end;gap:3px;display:flex}.pattern-examples{border-top:1px solid #282828;margin-top:10px;padding-top:10px;font-size:12px}.pattern-examples p{margin:3px 0}.ex-en{color:var(--white);font-weight:700}.ex-jp{color:var(--silver)}.custom-row{gap:8px;margin-top:10px;display:flex}.custom-input{flex:1;padding:9px 14px;font-size:12px}.timer-ring{border:4px solid #282828;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;margin:0 auto 16px;display:flex;position:relative}.timer-ring .ring-fill{border:4px solid var(--green);clip-path:inset(0);opacity:.85;border-radius:50%;position:absolute;inset:0}.timer-sec{z-index:1;font-size:32px;font-weight:800}.example-pair{margin-bottom:14px}.example-pair .jp{color:var(--white);font-size:18px;font-weight:700}.example-pair .en{color:var(--green);font-size:18px;font-weight:700}.example-pair .en.masked{opacity:0}.example-pair.small .jp,.example-pair.small .en{font-size:15px}.hidden{display:none}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.text-center{text-align:center}.text-left{text-align:left}.text-sm{font-size:13px}.text-xs{font-size:11px}.flex{display:flex}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.flex-1,.grow{flex:1}.footer{text-align:center;color:#555;border-top:1px solid #1c1c1c;margin-top:24px;padding-top:12px;font-size:11px}