:root{--bg:#fff8f1;--surface:#fff;--text:#22201c;--muted:#6f6a62;--border:#eadfd2;--accent:#ff6b4a;--accent-ink:#fff;--good:#1a8f5a;--good-bg:#e3f7ec;--warn:#a86a00;--warn-bg:#fff1d1;--bad:#c2362b;--bad-bg:#fde6e3;--shadow:0 10px 30px -12px #50280a40;--radius:18px;--font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Meiryo", sans-serif;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#17140f;--surface:#221e18;--text:#f3ede4;--muted:#b0a698;--border:#3a3329;--accent:#ff8366;--accent-ink:#1b120c;--good:#5fd69c;--good-bg:#173326;--warn:#f3c15a;--warn-bg:#3a2d11;--bad:#ff8a7d;--bad-bg:#3d1c18;--shadow:0 10px 30px -12px #0009;color-scheme:dark}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);margin:0;line-height:1.5}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[hidden]{display:none!important}.page{max-width:720px;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left));margin:0 auto}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.logo{color:var(--text);align-items:center;gap:2px;font-size:1.3rem;font-weight:800;text-decoration:none;display:inline-flex}.logo-box{background:var(--accent);width:1.6em;height:1.6em;color:var(--accent-ink);border-radius:8px;place-items:center;margin-right:2px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:inline-grid;transform:rotate(-6deg)}.logo:hover .logo-box{transform:rotate(6deg)scale(1.08)}.header-end{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.lang-toggle{background:var(--surface);border:2px solid var(--border);border-radius:999px;padding:3px;display:inline-flex}.lang-toggle button{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:700;transition:background .2s,color .2s}.lang-toggle button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.lang-toggle button:not([aria-pressed=true]):hover{color:var(--text)}:lang(ja) .hero h1,:lang(ja) .lede,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase}.account{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.account .pill{padding:6px 12px;font-size:.85rem}.who{font-weight:600}.muted{color:var(--muted);font-size:.9rem}.error{color:var(--bad);font-weight:600}.hero{text-align:center;margin:28px 0 20px}.hero h1{margin:0 0 8px;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.15}.hero em{color:var(--accent);font-style:normal}.lede{color:var(--muted);max-width:32em;margin:0 auto}input,button{font:inherit;color:inherit}input{border:2px solid var(--border);background:var(--surface);border-radius:12px;outline:none;min-width:0;padding:12px 14px;transition:border-color .2s}input:focus{border-color:var(--accent)}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.pill{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:8px 16px;font-weight:700;transition:transform .15s,box-shadow .15s}.pill:not(:disabled):hover{box-shadow:var(--shadow);transform:translateY(-1px)}.pill:not(:disabled):active{transform:scale(.96)}.pill.ghost{background:var(--surface);color:var(--text);border:2px solid var(--border)}.pill.small{padding:4px 12px;font-size:.85rem}.box{border-radius:calc(var(--radius) + 4px);background:var(--surface);border:2px solid var(--border);box-shadow:var(--shadow);gap:8px;padding:8px;transition:border-color .2s,transform .2s;display:flex}.box:focus-within{border-color:var(--accent)}.box input{background:0 0;border:none;flex:1;padding:10px 8px;font-size:1.15rem}.icon-btn{background:var(--bg);border-radius:14px;width:48px;font-size:1.2rem}.icon-btn.listening{background:var(--bad-bg);animation:1s ease-in-out infinite pulse}.go{background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:0 20px;font-weight:800;transition:transform .15s}.go:not(:disabled):active{transform:scale(.95)}.box.thinking{animation:1.2s ease-in-out infinite breathe}.box.thinking .go{color:#0000;position:relative}.box.thinking .go:after{content:"• • •";color:var(--accent-ink);place-items:center;animation:1s steps(3,end) infinite blink;display:grid;position:absolute;inset:0}.result{border-radius:var(--radius);background:var(--surface);border:2px solid var(--border);box-shadow:var(--shadow);margin-top:24px;padding:20px;position:relative}.result h2{margin:16px 0 8px;font-size:1rem}.verdict-row{align-items:center;gap:14px;display:flex}.face{background:var(--bg);border-radius:50%;flex:none;place-items:center;width:56px;height:56px;font-size:1.8rem;display:inline-grid}.face.small{width:36px;height:36px;font-size:1.1rem}.verdict-label{margin:0;font-size:1.35rem;font-weight:800}.verdict-input{color:var(--muted);overflow-wrap:anywhere;margin:0}.suggestions{gap:8px;margin:0;padding:0;list-style:none;display:grid}.suggestions li{background:var(--good-bg);animation:.4s cubic-bezier(.34,1.56,.64,1) both rise;animation-delay:calc(.25s + var(--i) * 80ms);border-radius:12px;padding:10px 14px;font-weight:600}.meanings{gap:12px;margin:0;padding-left:1.4em;display:grid}.meaning{animation:.4s cubic-bezier(.34,1.56,.64,1) both rise;animation-delay:calc(.25s + var(--i) * 80ms)}.meaning .sense{margin:0 0 6px;font-weight:600}.meaning .pos{background:var(--border);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:.75rem;font-weight:700}.meaning ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.meaning ul li{background:var(--bg);border-radius:12px;padding:8px 12px}.result .result-actions{margin-top:16px}.result.is-natural{border-color:var(--good);animation:.55s cubic-bezier(.34,1.56,.64,1) pop}.result.is-natural .face{background:var(--good-bg);animation:.6s cubic-bezier(.34,1.56,.64,1) spin-in}.result.is-natural .verdict-label{color:var(--good)}.result.is-unusual{border-color:var(--warn);animation:.8s wobble}.result.is-unusual .face{background:var(--warn-bg);animation:1.2s ease-in-out .2s 2 tilt}.result.is-unusual .verdict-label{color:var(--warn)}.result.is-unnatural{border-color:var(--bad);animation:.5s cubic-bezier(.36,.07,.19,.97) shake}.result.is-unnatural .face{background:var(--bad-bg);animation:.7s .15s both droop}.result.is-unnatural .verdict-label{color:var(--bad)}.result.is-examples{border-color:var(--accent);animation:.55s cubic-bezier(.34,1.56,.64,1) pop}.result.is-examples .verdict-label{color:var(--accent)}.confetti{pointer-events:none;position:absolute;top:48px;left:44px}.confetti i{background:var(--c);border-radius:2px;width:8px;height:12px;animation:.9s cubic-bezier(.15,.8,.3,1) forwards burst;position:absolute}.explore{margin-top:28px}.explore-title{margin:0 0 12px;font-size:1.15rem}.focus-word{color:var(--accent)}.explore-grid{grid-template-columns:minmax(0,1fr);gap:12px;display:grid}.tile{border-radius:var(--radius);background:var(--surface);border:2px solid var(--border);flex-direction:column;gap:8px;padding:16px;animation:.35s both rise;display:flex}.tile:nth-child(2){animation-delay:50ms}.tile:nth-child(3){animation-delay:.1s}.tile:nth-child(4){animation-delay:.15s}.tile h3{margin:0;font-size:.95rem}.tile-body{gap:8px;display:grid}.tile-body p{margin:0}.tile a{color:var(--accent);font-weight:700;text-decoration:none}.tile a:hover{text-decoration:underline}.source{color:var(--muted);margin:auto 0 0;padding-top:4px;font-size:.75rem}.tile .source a{color:inherit;font-weight:600;text-decoration:underline}.tile .chips{margin:0}.chip b{color:var(--accent)}.chip.active b,.chip:hover b{color:inherit}.pop{animation:.35s cubic-bezier(.34,1.56,.64,1) both rise;animation-delay:calc(var(--i,0) * 40ms)}.example{background:var(--bg);border-radius:12px;padding:10px 12px}.example .meta{align-items:center;gap:8px;margin-top:4px;font-size:.8rem;display:flex}.example .meta a{font-weight:600}.play{background:var(--surface);border:2px solid var(--border);border-radius:50%;width:32px;height:32px;font-size:.9rem}.play.playing{border-color:var(--accent);animation:.8s ease-in-out infinite pulse}.quote p{margin-top:2px;font-size:.85rem}.quote .quote-text{margin:0 0 2px;font-size:.95rem}.quote .speaker{color:var(--muted);font-weight:700}.quote>a{font-size:.85rem}.quote mark{color:inherit;box-shadow:inset 0 -.45em 0 var(--good-bg);background:0 0;font-weight:800}.song{flex-wrap:wrap;align-items:baseline;gap:6px;display:flex}.note{color:var(--accent);font-weight:800}.match{background:var(--border);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:.75rem}.match.is-lyrics{background:var(--good-bg);color:var(--text);text-decoration:none}.music-pick{color:var(--muted);align-items:center;gap:8px;margin-top:10px;font-size:.85rem;display:flex}.music-pick select{font:inherit;color:var(--text);background:var(--surface);border:2px solid var(--border);border-radius:999px;padding:4px 10px}.skeleton{height:16px;width:calc(100% - var(--i) * 18%);background:linear-gradient(90deg, var(--border) 0%, var(--bg) 50%, var(--border) 100%);background-size:200% 100%;border-radius:8px;animation:1.2s linear infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (width>=600px){.explore-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.panel{border-radius:var(--radius);background:var(--surface);border:2px solid var(--border);margin-top:32px;padding:20px}.panel h3{margin:20px 0 8px;font-size:1rem}.mini{gap:8px;display:flex}.mini input{flex:1;min-width:0;padding:8px 12px}.chips{flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none;display:flex}.chips li{align-items:center;gap:6px;display:flex}.chip{background:var(--bg);border:2px solid var(--border);border-radius:999px;padding:6px 14px;font-weight:700;transition:transform .15s}.chip:hover{transform:translateY(-1px)}.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.code{font-family:ui-monospace,monospace;font-size:.75rem}.usage{border-top:1px solid var(--border);align-items:flex-start;gap:12px;padding:10px 0;animation:.3s both rise;display:flex}.quiet .usage{animation:none}.usage-body{overflow-wrap:anywhere;flex-direction:column;flex:1;min-width:0;display:flex}.usage-open{font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;flex-direction:column;margin:-4px -6px;padding:4px 6px;display:flex}.usage-open:hover,.usage-open:focus-visible{background:var(--border)}.usage.is-natural .face{background:var(--good-bg)}.usage.is-unusual .face{background:var(--warn-bg)}.usage.is-unnatural .face{background:var(--bad-bg)}.usage.is-examples .face{background:var(--bg)}.item-actions{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.group-view{margin-top:4px}.view-picker{justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;display:flex}.view-wrap{flex:1;min-width:0}.view-switch{max-width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:flex-start;gap:10px;margin:-4px -8px;padding:4px 8px;display:flex}.view-switch:hover,.view-switch[aria-expanded=true]{background:var(--bg)}.view-label{flex-direction:column;min-width:0;display:flex}.view-name{overflow-wrap:anywhere;font-size:1.35rem;font-weight:800;line-height:1.25}.view-meta{font-size:.85rem}.caret{color:var(--muted);margin-top:6px;font-size:.9rem}.view-menu{min-width:240px;left:0;right:auto}#group-setup{gap:8px;display:grid}#group-setup .link-btn{justify-self:start;margin:0}.pop-wrap{display:inline-flex;position:relative}.popover{z-index:20;background:var(--surface);border:2px solid var(--border);min-width:200px;max-width:min(300px,80vw);box-shadow:var(--shadow);border-radius:14px;gap:2px;padding:6px;animation:.15s both rise;display:grid;position:absolute;top:calc(100% + 6px);right:0}.popover.up{top:auto;bottom:calc(100% + 6px)}.usage:has(.popover){z-index:5;position:relative}.popover hr{border:0;border-top:1px solid var(--border);width:100%;margin:4px 0}.pop-head{letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:4px 10px 2px;font-size:.75rem;font-weight:800}.pop-note{margin:6px 10px;font-size:.9rem}.menu-item{font:inherit;text-align:left;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;font-size:.95rem;display:flex}.menu-item:hover:not(:disabled),.menu-item:focus-visible,.menu-item.on{background:var(--bg)}.menu-item.on{font-weight:800}.menu-item:disabled{color:var(--muted);cursor:default}.menu-item.danger{color:var(--bad)}.menu-item.check{justify-content:flex-start}.menu-item.check input{width:18px;height:18px;accent-color:var(--accent)}.emoji-pop{grid-template-columns:repeat(3,auto);gap:4px;width:max-content;min-width:0;left:0;right:auto}.dots{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:2px solid #0000;border-radius:999px;padding:2px 10px;font-size:1.2rem;line-height:1.2}.dots:hover,.dots[aria-expanded=true]{background:var(--bg);border-color:var(--border);color:var(--text)}.item-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-top:6px;display:flex}.item-buttons{align-items:center;gap:4px;margin-left:auto;display:flex}.group-tags{flex-wrap:wrap;gap:4px;min-width:0;display:flex}.group-tag{background:var(--bg);color:var(--muted);overflow-wrap:anywhere;border-radius:999px;padding:1px 8px;font-size:.78rem;font-weight:700}.result-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.result-actions .share-pop{left:0;right:auto}.detail-card{background:var(--bg);border-radius:14px;margin:12px 0;padding:14px;animation:.25s both rise}.detail-card p{margin:0 0 6px}.invite-code{letter-spacing:.08em;font-size:1.4rem;font-weight:700}.members{gap:6px;margin:0 0 6px;padding:0;list-style:none;display:grid}.members li{align-items:center;gap:8px;display:flex}.members li>:first-child{flex:1;font-weight:600}.reactions{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.reaction{background:var(--bg);border:2px solid var(--border);border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:.9rem;transition:transform .15s cubic-bezier(.34,1.56,.64,1),opacity .15s;display:inline-flex}.reaction.add{color:var(--muted)}.reaction:hover{opacity:1;transform:scale(1.1)}.reaction.mine{border-color:var(--accent);background:var(--surface)}.reaction span{font-size:.8rem;font-weight:700}.link-btn{color:var(--muted);background:0 0;margin-top:10px;padding:4px 0;text-decoration:underline}@keyframes pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes spin-in{0%{transform:scale(0)rotate(-180deg)}to{transform:scale(1)rotate(0)}}@keyframes burst{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(240deg) scale(.6);opacity:0}}@keyframes wobble{0%{opacity:0;transform:translateY(12px)}40%{opacity:1;transform:translateY(0)rotate(-1.5deg)}60%{transform:rotate(1.2deg)}80%{transform:rotate(-.6deg)}to{transform:rotate(0)}}@keyframes tilt{0%,to{transform:rotate(0)}30%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}@keyframes shake{0%{opacity:0}10%,90%{opacity:1;transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}@keyframes droop{0%{transform:translateY(-8px)}60%{transform:translateY(4px)rotate(8deg)}to{transform:translateY(0)rotate(0)}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes blink{0%{opacity:.3}to{opacity:1}}@media (pointer:coarse){.pill,.chip{min-height:44px}.pill.small,.reaction,.dots,.menu-item{min-height:36px}}@media (width>=960px){.page{max-width:1120px;padding-left:32px;padding-right:32px}.hero{margin:56px 0 28px}.layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:40px;display:grid}.layout:has(#groups[hidden]){grid-template-columns:minmax(0,720px);justify-content:center}.panel{max-height:calc(100vh - 48px);margin-top:56px;position:sticky;top:24px;overflow:auto}.box input{font-size:1.3rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.tags{flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 0;display:flex}.tag{border:1.5px solid var(--border);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:.78rem;font-weight:800;line-height:1.5;display:inline-block}.level-a{color:var(--good);background:var(--good-bg);border-color:#0000}.level-b{color:var(--warn);background:var(--warn-bg);border-color:#0000}.level-c{color:var(--bad);background:var(--bad-bg);border-color:#0000}.usage-open .muted .tag{vertical-align:1px;margin-left:6px}.mine-head{justify-content:flex-end;align-items:center;gap:8px;display:flex}.level-filter select{font:inherit;border:2px solid var(--border);background:var(--bg);color:inherit;border-radius:10px;padding:4px 8px;font-size:.9rem}#mine[data-level=A1] .usage:not([data-level=A1]),#mine[data-level=A2] .usage:not([data-level=A2]),#mine[data-level=B1] .usage:not([data-level=B1]),#mine[data-level=B2] .usage:not([data-level=B2]),#mine[data-level=C1] .usage:not([data-level=C1]),#mine[data-level=C2] .usage:not([data-level=C2]){display:none}