:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;overflow-x:hidden;overscroll-behavior-x:none;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{color:#1c1c1e;background:#f9f9fa}@media(prefers-color-scheme:dark){html{color:#f5f5f7;background:#141416}}*{box-sizing:border-box}.filter .row{display:grid;grid-template-columns:fit-content(110px) 1fr;gap:10px;align-items:start;margin-bottom:8px}.filter .label{padding-top:2px;padding-right:25px}.filter .btn{position:absolute;padding:0;right:0;place-self:end}@media(max-width:640px){.filter .btn{right:-9px;top:3px}}.filter .options{display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}.filter .horizontal-scroll{display:flex;white-space:nowrap;gap:8px}:root{--bg: rgba(250, 250, 252, .72);--panel: rgba(255, 255, 255, .6);--panel-padding: clamp(14px,2.2vw,20px);--panel-blur: rgba(250, 250, 252, .01);--button: rgba(255, 255, 255, .4);--hover: rgba(227, 227, 227, .6);--input: rgb(236, 236, 236);--border: rgba(0, 0, 0, .08);--shadow: 0 10px 30px rgba(0,0,0,.08);--primary: linear-gradient(180deg, rgba(0, 122, 255, .9), rgba(0, 122, 255, .8));--ring: rgba(0, 122, 255, .5);--red: rgb(218, 55, 42);--text: #0b0b0f;--text-light: #f5f7fb;--subtle: #6b7280}@media(prefers-color-scheme:dark){:root{--bg: rgba(10, 10, 12, .6);--panel: rgba(28, 28, 32, .65);--button: rgba(28, 28, 32, .45);--hover: rgba(67, 67, 67, .6);--input: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .08);--shadow: 0 10px 30px rgba(0,0,0,.4);--primary: linear-gradient(180deg, rgba(90, 200, 250, .9), rgba(90, 200, 250, .8));--ring: rgba(90, 200, 250, .5);--text: #f5f7fb;--subtle: #a3aab8}}.is-shown{opacity:1!important}.is-hidden{opacity:0!important}.is-invisible{visibility:hidden!important}.no-margin{margin:0!important}.no-padding{padding:0!important}.half-width{width:50%!important}.full-width{width:100%!important}.fit-width{max-width:fit-content!important}.fit-height{max-height:fit-content!important}.full-height{height:100%!important}.switch-row{display:flex!important;flex-direction:row!important}.switch-col{display:flex!important;flex-direction:column!important}.inline{display:inline-block!important;padding:0!important;margin:0!important}.absolute{position:absolute!important}.relative{position:relative!important}.no-gap{gap:0!important}.gap{gap:14px!important}.row-gap{row-gap:14px!important}.col-gap{column-gap:14px!important}.gap-s{gap:7px!important}.gap-xs{gap:3px!important}.gap-bottom{margin-bottom:14px!important}.gap-top{margin-top:14px!important}.gap-left{margin-left:14px!important}.gap-right{margin-right:14px!important}.gap-bottom-s{margin-bottom:7px!important}.gap-top-s{margin-top:7px!important}.gap-left-s{margin-left:7px!important}.gap-right-s{margin-right:7px!important}.gap-bottom-xs{margin-bottom:3px!important}.gap-top-xs{margin-top:3px!important}.gap-left-xs{margin-left:3px!important}.gap-right-xs{margin-right:3px!important}.text-align-center{text-align:center!important}.text-align-left{text-align:left!important}.text-align-right{text-align:right!important}.place-center{place-items:center!important;place-content:center!important;place-self:center!important}.place-left{place-items:start!important;place-content:start!important;place-self:start!important}.place-right{place-items:end!important;place-content:end!important;place-self:end!important}.space-evenly{justify-content:space-evenly!important;gap:14px!important}.space-between{justify-content:space-between!important;white-space:nowrap!important}.overflow-hidden{overflow:auto!important;white-space:nowrap!important}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px}.ok{border-color:#34c759b3!important}.ring{border-color:var(--ring)!important;border-width:3px!important}.bad{border-color:var(--red)!important}.red{color:var(--red)!important}.float{background:transparent!important;box-shadow:none!important;outline:none!important;border:none!important;resize:none!important}.only-mobile{display:none!important}.invisible-desktop{background:transparent!important;border:none!important;box-shadow:none!important}@media(max-width:640px){.only-desktop{display:none!important}.only-mobile{display:inherit!important}.invisible-mobile{background:transparent!important;border:none!important;box-shadow:none!important}}.screen{margin-top:env(safe-area-inset-top);min-height:calc(100dvh - env(safe-area-inset-top));padding:clamp(16px,3vw,28px);-webkit-backdrop-filter:saturate(140%) blur(20px);backdrop-filter:saturate(140%) blur(20px);background:linear-gradient(135deg,var(--bg),transparent 60%),radial-gradient(60% 80% at 10% 10%,rgba(180,200,255,.2),transparent 40%),radial-gradient(80% 60% at 100% 0%,rgba(255,180,220,.16),transparent 40%);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.panel{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:var(--panel-padding);color:var(--text);margin-bottom:14px}.pill{padding:4px 8px;border-radius:999px;border:2px solid var(--border);background:var(--panel);font-size:12px;height:28px}.pill.active{border:2px solid var(--ring)}.overlay{position:fixed;inset:0;background:#00000059;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;display:flex;place-content:center;place-items:start}.overlay>div:first-child{margin-top:10vh}.title{font-weight:700;letter-spacing:-.02em;margin:0;font-size:clamp(26px,2.6vw,32px)}.subtitle{font-weight:700;letter-spacing:-.01em;margin:0;font-size:clamp(18px,2.6vw,24px)}.paragraph{color:var(--text);font-size:clamp(10px,2.2vw,16px)}.small-paragraph{color:var(--text);font-size:clamp(8px,2.2vw,14px)}.subtle{color:var(--subtle)}.bold{font-weight:700}@media(max-width:640px){.title{font-size:38px}.paragraph{font-size:16px}.small-paragraph{font-size:14px}}.icon-paragraph svg{width:13px;height:13px}.toolbar{display:flex;position:relative;place-content:center;margin:4px 0 18px}.toolbar-left{display:flex;flex-direction:column;place-items:start}.toolbar-center{display:flex;flex-direction:column;place-items:center}.toolbar-right{display:flex;gap:8px;position:absolute;right:0}@media(max-width:640px){.toolbar{flex-direction:column;gap:8px}.toolbar-right{position:relative;place-content:center}}.btn{border:1px solid var(--border);background:var(--button);box-shadow:var(--shadow);color:var(--text);padding:10px 14px;border-radius:12px;flex-wrap:nowrap;font-weight:600;font-size:100%;cursor:pointer;text-align:center;align-items:center;justify-content:center;text-decoration:none;transition:transform .06s ease,box-shadow .2s ease,background .2s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn[disabled],.btn[aria-disabled=true]{opacity:.6;cursor:not-allowed}.btn.primary{background:var(--primary);color:var(--text-light);border-color:transparent}.btn.ghost{background:transparent;color:var(--subtle)}.btn.red{color:var(--red)}.btn.red:active{color:#bf2820}.btn.tiny{padding:4px 8px;place-self:center;border-radius:8px}.half-btn-left{border-top-right-radius:0!important;border-bottom-right-radius:0!important;margin-right:0!important;border-right:1px solid rgba(135,135,135,.3)}.half-btn-right{border-top-left-radius:0!important;border-bottom-left-radius:0!important;margin-left:0!important;border-left:1px solid rgba(135,135,135,.3)}textarea{resize:none}.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--input);outline:none;font-size:16px}.input:focus{box-shadow:0 0 0 4px var(--ring)}.listview .stage{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}.flashcard{--height: auto;cursor:pointer}.flashcard .panel{position:absolute;transition:transform .5s ease;backface-visibility:hidden;aspect-ratio:var(--aspect-ratio)}.flashcard .panel.flipped{transform:rotateY(.5turn)}.flashcard .front{grid-auto-rows:1fr;cursor:pointer}.flashcard .back{grid-auto-rows:3fr .8fr 1.5fr;cursor:inherit;position:relative}.flashcard .back .term{align-self:end}.flashcard .back .pronunciation,.flashcard .back .example{align-self:start}.flashcard .rate-label{position:absolute;left:50%;top:-30%;transform:translate(-50%)}.flashcard .rate-sub-label{position:absolute;left:50%;top:-20%;transform:translate(-50%)}.draggable{background:transparent;border:none;cursor:grab;touch-action:none;width:100%;height:var(--height);aspect-ratio:var(--aspect-ratio)}.draggable:active{cursor:grabbing}.report-button{position:absolute;padding:0;color:var(--red);background:none;border:none}.report-button:hover{cursor:pointer!important}.screen.practice{display:grid;grid-template-rows:auto auto 1fr;gap:14px;touch-action:none;overflow:hidden}.practice .hint.only-mobile{position:fixed;place-self:center;bottom:5%}.rate-buttons{display:flex;flex-direction:row}@media(max-width:640px){.rate-buttons{position:absolute;top:65%;flex-direction:column}}.practice{--aspect-ratio: 10 / 6}.screen.practice{display:grid;grid-template-rows:auto auto 1fr;gap:14px;touch-action:none}.practice .stage{display:flex;flex-direction:column;margin:auto;width:100%;gap:16px}.practice .end-screen{width:50%}@media(max-width:640px){.practice .end-screen{width:100%}}.container{position:relative;width:clamp(40vw,700px,80vw);place-items:center;transition:transform .3s ease,opacity .3s ease}@media(max-width:640px){.container{position:absolute;top:38%}}.progress{height:8px;background:#0000000f;border-radius:999px;overflow:hidden;border:1px solid var(--border)}@media(prefers-color-scheme:dark){.progress{background:#ffffff0f}}.bar{height:100%;background:#007affe6}.practice .panel{display:grid;place-items:center;inset:0;margin:0}.container.exit{transform:translateY(-100px);opacity:0}.container.exit.left{transform:translate(-100px,100px)}.container.exit.right{transform:translate(100px,100px)}@media(max-width:640px){.container.exit.left,.container.exit.right{transform:none;opacity:0}}.lang-label{position:absolute;top:12px;left:14px;font-size:12px;opacity:.75}.term{font-size:clamp(28px,5vw,40px);font-weight:700;text-align:center;letter-spacing:-.01em}.btn.mode{z-index:4;position:absolute;right:12px;top:12px;transition:opacity .5s ease .3s}.btn.mode.is-hidden{transition-duration:0ms;transition-delay:0ms}.write-card{aspect-ratio:var(--aspect-ratio)}@media(max-width:640px){.write-card{aspect-ratio:10 / 8}}.write-card .panel{grid-auto-rows:1fr auto auto;gap:8px;height:100%;width:100%}.write-card .term{translate:0 18px}.write-card .special-chars{display:flex;justify-self:start;gap:6px;flex-wrap:wrap;width:100%}.write-card .char{padding:6px 10px}.write-card .override{position:absolute;left:50%;transform:translate(-50%);white-space:nowrap;margin-left:auto;place-items:center}.write-card .override:hover .tooltip{opacity:1;transform:scale(1) translateY(100%)}.write-card .override .tooltip{transition:transform .3s ease,opacity .3s ease-out;opacity:0;transform:scale(0%);padding:5px 0;position:absolute;z-index:1}.write-card .answer-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;width:100%}@media(max-width:640px){.write-card .answer-row{grid-column-gap:8px;grid-row-gap:8px;grid-template:"input buttons" "articles articles" / 1fr auto}.write-card .answer-row .input{grid-area:input}.write-card .answer-row .article-prompt{grid-area:articles;place-content:center}.write-card .answer-row .next-button{grid-area:buttons}}.write-card .article-prompt{display:grid;grid-template-columns:auto auto auto auto auto;gap:3px}.write-card .input.bad::placeholder{opacity:0}.write-card .btn:disabled{opacity:1}.write-card .ghost{opacity:.6}.select{position:relative;display:inline-block}.select .btn{width:100%;height:100%;display:flex;justify-content:space-between;gap:4px}.select.bad .btn{color:var(--red)}.select .arrow{translate:0 3px}.select .dropdown{z-index:1;position:absolute;display:flex;flex-direction:column;align-items:start;min-width:100%;width:fit-content;border:1px solid var(--border);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px) drop-shadow(0 0 0 rgba(255,255,255));background:var(--panel-blur);box-shadow:var(--shadow);color:var(--text);padding:10px 14px;border-radius:12px;transition:transform .06s ease,box-shadow .2s ease,background .2s ease}.select .option{text-align:left;background-color:transparent;border:none;width:100%;white-space:nowrap;cursor:pointer;padding:4px;border-radius:6px}.select .option:hover{background:var(--hover);transform:translateY(-1px)}.select .option:active{transform:translateY(0)}.select .option.selected{background:var(--hover)}.dynamic-input{display:flex;position:relative;translate:.22em}.dynamic-input .bad,.dynamic-input .bad::placeholder{color:var(--red)!important}.dynamic-input .column{display:grid;flex-direction:column}.dynamic-input .column input{translate:0 1.5px}.dynamic-input .width-ref{visibility:hidden;position:absolute;width:fit-content;white-space:nowrap}.dynamic-input .icon-btn{position:absolute;padding:0;cursor:pointer}.dynamic-input .icon-btn.right{right:0;translate:150% .3vh}.dynamic-input .icon-btn.left{left:0;translate:-150% .3vh}.card{position:relative;display:grid;grid-template:"front back delete" / 1fr 1fr 20px;grid-column-gap:var(--panel-padding)}.card:has(.input-article){grid-template:"front back article delete" / 1fr 1fr 60px 20px}.card:has(.input-pronunciation){grid-template:"front back pronunciation delete" / 1fr 1fr 1fr 20px}.card:has(.input-example){grid-template:"front back example delete" / 1fr 1fr 1fr 20px}.card:has(.input-article):has(.input-pronunciation){grid-template:"front back article pronunciation delete" / 1fr 1fr 60px 1fr 20px}.card:has(.input-article):has(.input-example){grid-template:"front back article example delete" / 1fr 1fr 60px 1fr 20px}.card:has(.input-pronunciation):has(.input-example){grid-template:"front back pronunciation example delete" / 1fr 1fr 1fr 1fr 20px}.card:has(.input-article):has(.input-pronunciation):has(.input-example){grid-template:"front back article pronunciation example delete" / 1fr 1fr 60px 1fr 1fr 20px}.input-front{grid-area:front}.input-back{grid-area:back}.input-article{grid-area:article}.input-pronunciation{grid-area:pronunciation}.input-example{grid-area:example}.delete-btn{grid-area:delete}.card input{background-color:var(--input);border:none;outline:none;padding:10px;border-radius:3px;width:100%}.drag{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;cursor:grab;padding:8px 10px;font-size:18px;line-height:1;opacity:.7;-webkit-user-select:none;user-select:none}.drag:active{cursor:grabbing}.panel.card.dragging{box-shadow:0 10px 30px #00000026}@media(min-width:640px){.card{padding-right:34px}}@media(max-width:640px){.card{padding-bottom:0;grid-template:"front" "back" "pronunciation" "example" / 100%!important}.card.article{grid-column-gap:var(--panel-padding);grid-template:"front front" "article back" "pronunciation pronunciation" "example example" / 60px 1fr!important}.input-front,.input-back,.input-article,.input-pronunciation,.input-example{margin-left:0;margin-bottom:var(--panel-padding)}.drag{right:-12%}.delete-btn{position:absolute;top:calc(50% + 15px);right:-10%}}.create .stage{display:flex;flex-direction:column;margin:auto 10%;gap:14px}.option-bar{display:flex;justify-content:space-between}@media(max-width:640px){.option-bar{flex-direction:column}}.option-bar-left,.option-bar-right{display:flex;gap:6px}.pill-options{display:flex;gap:4px;place-items:center}.savetext{opacity:1;transition-duration:0s}.savetext.hidden{opacity:0;transition:opacity 3s 2s ease}.savetext .red{color:var(--red)}.import{width:clamp(780px,4vw,4vw)}.import-grid{display:flex;flex-direction:column;height:30vh;overflow:auto;width:100%;gap:4px}.import-row{display:flex;gap:4px}.import-cell{width:100%;padding:6px;border-radius:12px;border:1px solid var(--border);background:var(--input);outline:none;font-size:16px;overflow:auto;white-space:nowrap}.create .listview{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}:root{--line: rgba(0, 122, 255, .9);--grid: rgba(202, 202, 202, .7);--chart-border: rgba(255, 255, 255, 1);--color1: rgba(175, 82, 222, .5);--color2: rgba(90, 200, 250, .5);--color3: rgba(52, 199, 89, .5);--color4: rgba(255, 149, 0, .5);--color5: rgba(255, 45, 85, .5)}@media(prefers-color-scheme:dark){:root{--line: rgba(90, 200, 250, .9);--grid: rgba(202, 202, 202, .58);--chart-border: rgb(25, 25, 28, .3);--color1: rgba(191, 90, 242, .5);--color2: rgba(100, 210, 255, .5);--color3: rgba(48, 209, 88, .5);--color4: rgba(255, 159, 10, .5);--color5: rgba(255, 55, 95, .5)}}.chart-tooltip{pointer-events:none;transition:all .15s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 14px;opacity:0;z-index:999;width:fit-content}
