#trivinews-kanji-course { --tvk-line: rgba(128,128,128,.35); --tvk-soft: rgba(128,128,128,.12); --tvk-accent: #2a5db0; --tvk-ok: #2e8b57; --tvk-ng: #c0392b; max-width: 560px; margin: 0 auto; }
.tvk-h { margin: 0 0 .2em; }
.tvk-sub { margin: 0 0 1em; opacity: .75; font-size: .9em; }
.tvk-units { display: grid; gap: .6em; }
.tvk-unit { display: flex; align-items: center; gap: .8em; width: 100%; text-align: left; padding: .8em 1em; border: 1px solid var(--tvk-line); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.tvk-unit:hover:not(:disabled) { background: var(--tvk-soft); }
.tvk-unit.is-locked { opacity: .5; cursor: not-allowed; }
.tvk-unit.is-done { border-color: var(--tvk-ok); }
.tvk-unit-no { flex: none; width: 2em; height: 2em; line-height: 2em; text-align: center; border-radius: 50%; background: var(--tvk-soft); font-weight: 700; }
.tvk-unit-body { flex: 1; display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.tvk-unit-title { font-weight: 700; }
.tvk-unit-kanji { font-size: 1.05em; letter-spacing: .1em; opacity: .85; overflow-wrap: anywhere; }
.tvk-unit-state { flex: none; font-size: .8em; opacity: .8; }
.tvk-unit.is-done .tvk-unit-state { color: var(--tvk-ok); font-weight: 700; opacity: 1; }
.tvk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6em 1em; margin: 0 0 .8em; }
.tvk-head-label { font-size: .9em; opacity: .8; }
.tvk-link { background: none; border: 0; padding: 0; color: var(--tvk-accent); cursor: pointer; font: inherit; font-size: .9em; text-decoration: underline; }
.tvk-card { border: 1px solid var(--tvk-line); border-radius: 12px; padding: 1.2em 1em; text-align: center; }
.tvk-big { font-size: 6rem; line-height: 1.15; margin: 0 0 .15em; }
.tvk-row { display: flex; gap: .8em; text-align: left; padding: .5em 0; border-top: 1px solid var(--tvk-line); }
.tvk-row-k { flex: none; width: 5.5em; font-size: .85em; opacity: .7; padding-top: .15em; }
.tvk-row-v { flex: 1; font-size: 1.15em; line-height: 1.9; }
.tvk-on { letter-spacing: .05em; }
.tvk-words { display: flex; flex-wrap: wrap; gap: .2em 1.2em; }
.tvk-ruby rt { font-size: .55em; }
.tvk-nav { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-top: 1em; }
.tvk-btn { padding: .65em 1.4em; border: 0; border-radius: 999px; background: var(--tvk-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.tvk-btn-sub { background: transparent; color: inherit; border: 1px solid var(--tvk-line); font-weight: 400; }
.tvk-note { font-size: .9em; opacity: .75; }
.tvk-qword { font-size: 3rem; line-height: 1.4; margin: .2em 0 .5em; overflow-wrap: anywhere; }
.tvk-form { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; }
.tvk-input { flex: 1 1 12em; max-width: 18em; padding: .6em .8em; font: inherit; font-size: 1.3rem; border: 2px solid var(--tvk-line); border-radius: 10px; background: transparent; color: inherit; text-align: center; }
.tvk-input:focus { outline: none; border-color: var(--tvk-accent); }
.tvk-hint { display: inline-block; margin-top: .8em; }
.tvk-hintbox { margin-top: .8em; padding: .6em .8em; border-radius: 8px; background: var(--tvk-soft); text-align: left; font-size: .95em; }
.tvk-hintline + .tvk-hintline { margin-top: .2em; }
.tvk-fb { margin-top: 1em; padding: .8em; border-radius: 10px; }
.tvk-fb.is-ok { background: rgba(46,139,87,.14); }
.tvk-fb.is-ng { background: rgba(192,57,43,.12); }
.tvk-fb-head { font-weight: 700; font-size: 1.1em; }
.tvk-fb.is-ok .tvk-fb-head { color: var(--tvk-ok); }
.tvk-fb.is-ng .tvk-fb-head { color: var(--tvk-ng); }
.tvk-fb-ans { font-size: 1.8rem; margin-top: .3em; }
.tvk-result-h { font-size: 1.5em; font-weight: 700; }
@media (max-width: 480px) { .tvk-big { font-size: 5rem; } .tvk-qword { font-size: 2.4rem; } }
.tvk-grade { margin: 0 0 .8em; }
.tvk-grade-h { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: .6em .2em; font-weight: 700; font-size: 1.1em; }
.tvk-grade-count { font-size: .8em; font-weight: 400; opacity: .7; }
.tvk-credit { max-width: 560px; margin: 1.5em auto 0; font-size: .75em; opacity: .65; line-height: 1.7; }
.tvk-cont { justify-content: flex-start; margin: 0 0 1em; }
.tvk-cont .tvk-btn { text-align: left; }
.tvk-badge { display: inline-block; margin-right: .5em; padding: 0 .5em; border-radius: 4px; background: var(--tvk-soft); font-size: .75em; font-weight: 400; vertical-align: .1em; }
.tvk-unit-kanji.is-small { font-size: .85em; letter-spacing: 0; }
.tvk-rds { display: inline-flex; flex-wrap: wrap; gap: .1em 1em; }
.tvk-okuri { opacity: .55; }
.tvk-okuri::before { content: '-'; opacity: .6; }
.tvk-rd.is-new { color: var(--tvk-accent); font-weight: 700; }
.tvk-top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4em 1.2em; margin-bottom: .3em; }
.tvk-top .tvk-big { margin: 0; }
.tvk-stroke { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.tvk-svg { width: 140px; height: 140px; border: 1px solid var(--tvk-line); border-radius: 8px; touch-action: none; }
.tvk-svg.is-trace { width: 220px; height: 220px; cursor: crosshair; }
.tvk-svg path, .tvk-svg polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tvk-svg-grid { stroke: var(--tvk-line); stroke-width: .5; stroke-dasharray: 2 2; }
.tvk-svg-guide path { stroke: currentColor; stroke-width: 3; opacity: .18; }
.tvk-svg-ink path { stroke: currentColor; stroke-width: 3; }
.tvk-svg-ink path.is-ok { stroke: var(--tvk-accent); }
.tvk-svg-ink path.is-hint { stroke: var(--tvk-ng); opacity: .7; }
.tvk-svg-user { stroke: var(--tvk-accent); stroke-width: 4; opacity: .6; }
.tvk-svg-num { font-size: 8px; fill: var(--tvk-ng); }
.tvk-stroke-msg { font-size: .8em; opacity: .75; }
.tvk-stroke-bar { display: flex; gap: 1em; }
.tvk-mid { font-size: 3rem; line-height: 1.3; margin: .1em 0; }
.tvk-yomi { font-size: 1.2em; opacity: .85; letter-spacing: .05em; }
.tvk-yomi-q { font-size: 1.5em; }
.tvk-yomi-s { font-size: 1.1em; }
.tvk-idiom { font-size: 1.8rem; line-height: 1.4; margin: .2em 0; overflow-wrap: anywhere; }
.tvk-badge-line { display: inline-block; padding: 0 .6em; border-radius: 4px; background: var(--tvk-soft); font-size: .8em; }
.tvk-mean { text-align: left; line-height: 2; margin: .8em 0 0; }
.tvk-mean-q { font-size: 1.1em; }
.tvk-ask { margin: .4em 0 .8em; }
.tvk-blank { display: inline-block; width: 1em; border: 2px dashed var(--tvk-accent); border-radius: 4px; line-height: 1.1; margin: 0 .05em; }
.tvk-opts { display: grid; gap: .5em; margin-top: .4em; text-align: left; }
.tvk-opts-k { grid-template-columns: repeat(4, 1fr); text-align: center; }
.tvk-opt { padding: .7em .9em; border: 1px solid var(--tvk-line); border-radius: 10px; background: transparent; color: inherit; font: inherit; line-height: 1.8; cursor: pointer; text-align: inherit; }
.tvk-opt:hover:not(:disabled) { background: var(--tvk-soft); }
.tvk-opt:disabled { cursor: default; }
.tvk-opt-k { font-size: 2rem; padding: .3em 0; line-height: 1.3; }
.tvk-opt.is-ok { border-color: var(--tvk-ok); background: rgba(46,139,87,.14); }
.tvk-opt.is-ng { border-color: var(--tvk-ng); background: rgba(192,57,43,.12); }
.tvk-fb-ex { text-align: left; }
.tvk-fb-ex p { margin: .4em 0 0; line-height: 1.9; }
.tvk-fb-idiom { font-size: 1.4rem; }