:root{--paper: #f7f5f0;--ink: #14110c;--ruled: #c9d4e4;--edge: #e2ddd2;--muted: #6d675c;--accent: #1d4ed8;--p0: #1d4ed8;--p1: #047857;--p2: #b02a8f;--p3: #b45309;--p4: #0e7490;--chrome: 7.5rem;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--paper: #14130f;--ink: #efeade;--ruled: #2f3b4d;--edge: #2a2720;--muted: #9a9384;--accent: #90b4ff;--p0: #8ab4ff;--p1: #4dd4a4;--p2: #f39ada;--p3: #f0b45e;--p4: #57d1e8}}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}.bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:1rem;padding:max(.5rem,env(safe-area-inset-top)) 1rem .5rem;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}.view:not([hidden]){display:flex;flex-direction:column}.viewport{overflow:hidden;height:calc(100dvh - var(--chrome));padding:0 max(1rem,env(safe-area-inset-left))}.page{padding-top:1rem;background-image:linear-gradient(to bottom,transparent calc(var(--rule) - 1px),var(--ruled) calc(var(--rule) - 1px),var(--ruled) var(--rule),transparent var(--rule));background-size:100% var(--box);background-position:0 1rem;line-height:var(--box);transition:transform .18s ease-out}.indent{display:inline-block}#card:not([hidden]){display:block;padding:.5rem 0 2rem}.card-tools{display:flex;justify-content:center;gap:.75rem;padding-bottom:.75rem}.card-tools .ghost{background:none;color:var(--accent);border:1px solid var(--edge);border-radius:8px;padding:.25rem .9rem;font:inherit;font-size:.9rem;text-decoration:none;cursor:pointer}#card .page{border:1px solid var(--edge);box-shadow:0 1px 8px #0000002e}#card .page+.page{margin-top:.6rem}.pager{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.4rem 1rem calc(.4rem + env(safe-area-inset-bottom));border-top:1px solid var(--edge);color:var(--muted);font-variant-numeric:tabular-nums}.word{position:relative;display:inline-block;vertical-align:top;height:var(--box);margin:0;padding:0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent}.word svg{display:block}.word.longhand{font-family:Georgia,Palatino,serif;font-style:italic;font-size:1.05rem;line-height:var(--rule);padding:0 .15em;vertical-align:top}.marks{display:inline-block;vertical-align:top;height:var(--box);line-height:var(--rule);font-family:Georgia,Palatino,serif}.marks .stop{display:inline-block;vertical-align:top}.marks svg{display:block}.word:focus-visible,.word:hover{outline:0;background:color-mix(in srgb,var(--accent) 14%,transparent)}.word.unwritten{width:.9rem;border-bottom:1px dotted var(--muted);height:var(--rule)}.word .parts{font-family:ui-monospace,monospace;font-weight:500;stroke:var(--paper);stroke-width:.55px;paint-order:stroke fill;opacity:0;pointer-events:none}.word.probe{z-index:1}.word.probe .parts{opacity:1}.parts .p0{fill:var(--p0)}.parts .p1{fill:var(--p1)}.parts .p2{fill:var(--p2)}.parts .p3{fill:var(--p3)}.parts .p4{fill:var(--p4)}.word.probe .signs{opacity:0}.word .signs,.word .parts{transition:opacity .12s linear}.word.named:before{content:attr(data-word);position:absolute;left:50%;bottom:calc(100% + .2rem);transform:translate(-50%);z-index:2;padding:.1rem .45rem;border-radius:5px;background:var(--ink);color:var(--paper);font:500 .8rem/1.5 system-ui,sans-serif;white-space:nowrap;pointer-events:none}.word.named.below:before{top:calc(100% + .2rem);bottom:auto}.note,.hint{color:var(--muted);line-height:1.5;font-size:.85rem}.tabs{display:flex;gap:.25rem}.tab{min-height:2.25rem;padding:0 .9rem;border-radius:999px;background:none;color:var(--muted);font-weight:500}.tab[aria-selected=true]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}#write{padding:.75rem max(1rem,env(safe-area-inset-left));gap:.5rem}#write textarea{height:calc(100dvh - var(--chrome) - 2.5rem);font:15px/1.6 ui-monospace,monospace;resize:none}.sheet{width:min(32rem,100%);max-height:86vh;margin:auto auto 0;padding:.35rem 1rem calc(.75rem + env(safe-area-inset-bottom));border:0;border-radius:16px 16px 0 0;background:var(--paper);color:var(--ink);overflow-y:auto;font:13px/1.45 system-ui,-apple-system,sans-serif}.sheet::backdrop{background:#0006}.grab{width:2.5rem;height:4px;margin:.25rem auto .75rem;border-radius:2px;background:var(--edge)}.sheet h2{margin:.15rem 0 .2rem;font-size:1.15rem}.sounds{margin:0 0 .6rem}.form{font-weight:600;font-variant-caps:small-caps;letter-spacing:.02em}.ipa{font-family:ui-monospace,monospace;color:var(--p0);background:color-mix(in srgb,var(--p0) 10%,transparent);padding:0 .25em;border-radius:3px}.badge{display:inline-block;margin-left:.45rem;padding:0 .4rem;border:1px solid var(--edge);border-radius:999px;color:var(--muted);font-size:.85em}.big{position:relative;margin:0 0 .75rem;overflow-x:auto}.big svg{display:block;color:var(--ink)}.big .line{position:absolute;left:0;right:0;border-top:1px solid var(--ruled)}.position{margin:0 0 .5rem}.sheet h3{margin:.9rem 0 .25rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.sheet ul,.sheet ol{margin:0;padding:0;list-style:none}.sheet li{padding:.25rem 0}.built{counter-reset:stroke}.built>li{padding:.3rem 0;border-top:1px solid var(--edge);counter-increment:stroke}.built>li:before{content:counter(stroke);display:inline-block;width:1.2em;color:var(--muted);font-variant-numeric:tabular-nums}.head{display:inline-flex;gap:.4rem;align-items:baseline}.about{margin:.1rem 0 0 1.2em;color:var(--muted)}.about li{padding:.1rem 0}.about.loose{margin-left:0;padding-top:.2rem}.passed li{display:flex;gap:.4rem;align-items:baseline;color:var(--muted)}.rule{color:var(--muted)}.sheet code{margin-left:.4rem;font-size:.85em;color:var(--muted);opacity:.6}label{display:block;margin:.5rem 0 .35rem;color:var(--muted)}textarea{width:100%;padding:.75rem;border:1px solid var(--edge);border-radius:8px;background:color-mix(in srgb,var(--paper) 92%,var(--ink));color:inherit;font:inherit;resize:vertical}.row{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}button{min-height:2.75rem;padding:0 1.1rem;border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-weight:500;cursor:pointer}button.ghost{background:none;color:var(--accent);border:1px solid var(--edge)}