.tyt-page { --brand:#b4d9ff; --panel:#17253a; --panel2:#213c58; --stroke:#516f8f; --text:#f1f5fb; --muted:#b8c7dc; --tyt-correct:#8cc9b4; --tyt-wrong:#ffa7ae; --tyt-blank:#97aec9; width:100%; max-width:820px; margin:auto; padding:24px 24px max(36px,env(safe-area-inset-bottom)); color:var(--text); font-family:"Segoe UI",Arial,sans-serif; accent-color:var(--brand); caret-color:var(--brand); scrollbar-width:thin; scrollbar-color:var(--stroke) transparent; }
html[data-theme=light] .tyt-page { --brand:#223e68; --panel:#fff; --panel2:#e0f1ff; --stroke:#adcce8; --text:#1b2d48; --muted:#45617d; --tyt-correct:#28725d; --tyt-wrong:#ae4654; --tyt-blank:#6d88a5; }
.tyt-page ::selection { background:color-mix(in srgb,var(--brand) 24%,var(--panel)); color:var(--text); }
.tyt-page-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tyt-page .tyt-page-head .btn,.tyt-link { min-height:44px; padding:10px 12px; border:1px solid var(--stroke); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:none; font:600 14px/1.4 "Segoe UI",Arial,sans-serif; cursor:pointer; }
.tyt-link { border-color:transparent; background:none; }
.tyt-page h1 { margin:0 0 24px; font-size:28px; line-height:1.25; letter-spacing:-.02em; }
.tyt-summary { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px 24px; padding:0 0 20px; }
.tyt-net { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; }
.tyt-net>span { font-size:16px; font-weight:600; }.tyt-net>strong { font-size:36px; letter-spacing:-.02em; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }.tyt-net small { font-size:16px; color:var(--muted); font-weight:400; letter-spacing:0; margin-left:8px; }
.tyt-sample,.tyt-note { margin:0; color:var(--muted); font-size:13px; line-height:1.65; max-width:65ch; overflow-wrap:anywhere; }.tyt-sample b { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.tyt-section-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin:28px 0 4px; }.tyt-section-head h2 { font-size:18px; margin:0; line-height:1.4; }.tyt-section-head>span { font-size:12px; color:var(--muted); }
.tyt-area { padding:18px 0; border-bottom:1px solid var(--stroke); }.tyt-area-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }.tyt-area h3 { font-size:16px; line-height:1.4; margin:0; overflow-wrap:anywhere; }.tyt-area-head>strong { font-size:20px; font-variant-numeric:tabular-nums; }
.tyt-meter { display:flex; height:7px; border-radius:3px; background:var(--panel2); overflow:hidden; margin:12px 0 8px; }.tyt-meter i { height:100%; }.tyt-meter-correct { background:var(--tyt-correct); }.tyt-meter-wrong { background:var(--tyt-wrong); }.tyt-meter-blank { background:var(--tyt-blank); }
.tyt-area-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font-size:12px; line-height:1.65; color:var(--muted); }.tyt-area-foot b { color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; }
.tyt-details { border-bottom:1px solid var(--stroke); padding:8px 0; font-size:14px; }.tyt-details summary { display:list-item; cursor:pointer; font-weight:600; min-height:44px; padding:12px 0; line-height:20px; }.tyt-details p { color:var(--muted); line-height:1.7; max-width:65ch; margin:12px 0; }.tyt-details p strong { color:var(--text); font-weight:600; }
.tyt-calculation { border:1px solid var(--stroke); border-radius:12px; padding:0 16px; margin-bottom:20px; background:var(--panel2); }.tyt-calculation summary { padding:12px 0; }.tyt-calculation>div { padding-bottom:4px; }
.tyt-lesson-list { margin:0 0 8px; }.tyt-lesson-list>div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; padding:10px 0; }.tyt-lesson-list>div>span:last-child { color:var(--muted); font-size:13px; }
.tyt-empty { padding:20px 0 4px; color:var(--muted); font-size:14px; line-height:1.7; }
.tyt-own-rank { display:flex; flex-wrap:wrap; gap:24px 60px; background:var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:22px; margin:24px 0 32px; }.tyt-own-rank>div { display:flex; flex-direction:column; gap:8px; }.tyt-own-rank span { color:var(--muted); font-size:12px; }.tyt-own-rank strong { font-size:32px; font-variant-numeric:tabular-nums; }.tyt-own-rank p { flex-basis:100%; margin:0; font-size:12px; color:var(--muted); line-height:1.6; }
.tyt-ranking-head { display:flex; justify-content:space-between; padding:0 10px 14px; font-size:11px; color:var(--muted); }.tyt-ranking-list { list-style:none; margin:0; padding:0; }.tyt-ranking-list li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:80px; padding:12px 10px; border-top:1px solid var(--stroke); }.tyt-ranking-list li.is-me { background:var(--panel2); }.tyt-rank-number { color:var(--muted); font-variant-numeric:tabular-nums; font-size:14px; }
.tyt-ranked-player { display:flex; gap:14px; align-items:center; background:none; color:var(--text); border:0; padding:0; font:inherit; text-align:left; min-width:0; cursor:pointer; }.tyt-ranked-player>span:last-child { min-width:0; }.tyt-ranked-player b { font-size:14px; overflow-wrap:anywhere; }.tyt-ranked-player small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }.tyt-avatar { width:42px; height:42px; flex-shrink:0; border-radius:50%; border:1px solid var(--stroke); display:grid; place-items:center; font-size:24px; background:var(--panel); overflow:hidden; }.tyt-avatar img { width:100%; height:100%; object-fit:cover; }.tyt-ranked-net { font-size:20px; font-variant-numeric:tabular-nums; }
.tyt-error { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:20px; padding:12px 16px; color:var(--text); background:var(--panel2); border:1px solid var(--stroke); border-radius:12px; font-size:14px; line-height:1.6; }.tyt-error .btn { min-height:44px; background:var(--panel); color:var(--text); font:inherit; }.tyt-page button:focus-visible,.tyt-details summary:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
body.dd-pro .qq-choice.is-pending { background:var(--panel2)!important; border-color:var(--brand)!important; box-shadow:0 0 0 2px var(--brand); color:var(--text)!important; }
.qq-choice-progress { margin-left:auto; display:flex; align-items:center; gap:7px; font-size:11px; color:inherit; white-space:nowrap; }.qq-choice-spinner { width:18px; height:18px; display:block; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:choice-spin .75s linear infinite; }
body.dd-pro .qq-choice .qq-choice-progress { display:flex; align-items:center; font-size:11px; }
body.dd-pro .qq-choice.is-pending { transition:none; }
@keyframes choice-spin { to { transform:rotate(360deg); } }
.qq-choices:not(.has-text) .qq-choice-progress { margin:0; }.qq-choices:not(.has-text) .qq-choice-progress>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.qq-choices:not(.has-text) .qq-choice-spinner { width:12px; height:12px; }
.qq-choices:not(.has-text) .qq-choice { position:relative; }.qq-choices:not(.has-text) .qq-choice-progress { position:absolute; top:5px; right:5px; }
@media(max-width:600px){.tyt-page{padding:20px 16px max(28px,env(safe-area-inset-bottom))}.tyt-page h1{font-size:24px}.tyt-net{gap:6px 12px}.tyt-net>strong{font-size:32px}.tyt-ranking-list li{grid-template-columns:24px minmax(0,1fr) auto;gap:8px}.tyt-ranked-player{gap:9px}.tyt-ranked-net{font-size:18px}.tyt-own-rank{gap:20px 32px;padding:16px}.qq-choice-progress{font-size:10px}}
@media(prefers-reduced-motion:reduce){.qq-choice-spinner{animation:none;border-style:dotted}}