:root{--tt-ink: #1c1a2e;--tt-muted: #615d78;--tt-line: #e4e1f0;--tt-soft: #f6f4fc;--tt-violet: #5b3fd1;--tt-violet-dark: #4630a8;--tt-amber: #f2a93b;--tt-amber-soft: #fff4e2;--tt-green: #1f8a5b;--tt-red: #c2412d;--primary: #5b3fd1;--primary-dark: #4630a8;--border: #e4e1f0;--surface: #ffffff;--shadow-soft: 0 12px 28px rgba(28, 26, 46, 0.08);--surface-muted: #f6f4fc;--text-main: #1c1a2e;--text-muted: #615d78;}
.tt-tool{display: grid;grid-template-columns: minmax(0, 1fr);gap: 18px;margin: 8px 0 48px;padding: 20px;border: 1px solid var(--tt-line);border-radius: 18px;background: var(--tt-soft);box-shadow: var(--shadow-soft);color: var(--tt-ink);}
.tt-controls{display: flex;flex-direction: column;gap: 16px;padding: 18px;border: 1px solid var(--tt-line);border-radius: 14px;background: #fff;min-width: 0;}
.tt-field{border: 0;margin: 0;padding: 0;min-width: 0;}
.tt-legend{float: none;display: block;width: auto;margin: 0 0 6px;padding: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--tt-muted);}
.tt-toggle{display: flex;flex-wrap: wrap;border: 1px solid var(--tt-line);border-radius: 10px;overflow: hidden;background: var(--tt-soft);}
.tt-toggle label{position: relative;flex: 1 1 auto;margin: 0;cursor: pointer;}
.tt-toggle label + label{border-left: 1px solid var(--tt-line);}
.tt-toggle input,.tt-chips input{position: absolute;opacity: 0;}
.tt-toggle span{display: block;padding: 8px 10px;text-align: center;font-size: 13px;font-weight: 600;white-space: nowrap;}
.tt-toggle input:checked + span{background: var(--tt-violet);color: #fff;}
.tt-chips{display: flex;flex-wrap: wrap;gap: 8px;}
.tt-chips label{position: relative;margin: 0;cursor: pointer;}
.tt-chips span{display: block;padding: 6px 12px;border: 1px solid var(--tt-line);border-radius: 999px;background: var(--tt-soft);font-size: 13px;font-weight: 600;}
.tt-chips input:checked + span{border-color: var(--tt-violet);background: var(--tt-violet);color: #fff;}
.tt-toggle input:focus-visible + span,.tt-chips input:focus-visible + span{outline: 2px solid var(--tt-ink);outline-offset: -3px;}
.tt-go{padding: 12px 20px;border: 0;border-radius: 10px;background: var(--tt-violet);color: #fff;font-size: 16px;font-weight: 800;cursor: pointer;}
.tt-go:hover{background: var(--tt-violet-dark);}
.tt-go:disabled{opacity: 0.6;cursor: wait;}
.tt-status{min-height: 20px;margin: -6px 0 0;font-size: 13px;color: var(--tt-muted);}
.tt-status.is-error{color: var(--tt-red);font-weight: 600;}
.tt-card{--tt-tone: #5b3fd1;display: flex;flex-direction: column;gap: 16px;padding: 22px;border-radius: 14px;background: var(--tt-ink);color: #fff;min-width: 0;}
.tt-card[data-level="easy"],.tt-level[data-level="easy"]{--tt-tone: #1f8a5b;}
.tt-card[data-level="medium"],.tt-level[data-level="medium"]{--tt-tone: #2f6fd6;}
.tt-card[data-level="hard"],.tt-level[data-level="hard"]{--tt-tone: #c7651c;}
.tt-card[data-level="expert"],.tt-level[data-level="expert"]{--tt-tone: #c2412d;}
.tt-card.is-new .tt-line{animation: tt-in 0.35s ease;}
@keyframes tt-in{from{opacity: 0;transform: translateY(6px);}to{opacity: 1;transform: none;}}
.tt-tags{display: flex;flex-wrap: wrap;gap: 6px;}
.tt-tag{display: inline-block;padding: 3px 10px;border-radius: 999px;background: rgba(255, 255, 255, 0.12);font-size: 12px;font-weight: 700;letter-spacing: 0.03em;}
.tt-tag-level{background: var(--tt-tone);color: #fff;text-transform: uppercase;}
.tt-line{margin: 0;font-family: Georgia, "Times New Roman", serif;font-size: clamp(22px, 3.4vw, 32px);line-height: 1.3;font-weight: 700;}
.tt-trap{display: flex;flex-direction: column;gap: 4px;margin: 0;padding: 12px 14px;border-left: 4px solid var(--tt-amber);border-radius: 8px;background: rgba(242, 169, 59, 0.12);font-size: 15px;line-height: 1.5;}
.tt-trap span:first-child{font-size: 11px;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--tt-amber);}
.tt-drill{display: grid;gap: 10px;padding: 14px;border: 1px solid rgba(255, 255, 255, 0.14);border-radius: 12px;}
.tt-ladder{display: flex;gap: 6px;margin: 0;padding: 0;list-style: none;}
.tt-ladder li{flex: 1 1 0;padding: 6px 4px;border-radius: 8px;background: rgba(255, 255, 255, 0.08);text-align: center;font-size: 12px;font-weight: 700;color: rgba(255, 255, 255, 0.6);}
.tt-ladder li.is-done{background: rgba(31, 138, 91, 0.35);color: #fff;}
.tt-ladder li.is-on{background: var(--tt-violet);color: #fff;}
.tt-dots{display: flex;gap: 8px;}
.tt-dots i{width: 14px;height: 14px;border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.4);}
.tt-dots i.is-on{border-color: #3fcf8e;background: #3fcf8e;}
.tt-drill-note{margin: 0;font-size: 14px;color: rgba(255, 255, 255, 0.85);}
.tt-drill-btns,.tt-actions{display: flex;flex-wrap: wrap;gap: 8px;}
.tt-btn{padding: 9px 16px;border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 10px;background: transparent;color: #fff;font-size: 14px;font-weight: 700;cursor: pointer;}
.tt-btn:hover{background: rgba(255, 255, 255, 0.1);}
.tt-btn:focus-visible{outline: 2px solid var(--tt-amber);outline-offset: 2px;}
.tt-btn:disabled{opacity: 0.5;cursor: wait;}
.tt-btn-ok{border-color: var(--tt-green);background: var(--tt-green);}
.tt-btn-ok:hover{background: #18724b;}
.tt-btn-slip{border-color: rgba(194, 65, 45, 0.8);}
.tt-btn-main{border-color: #fff;background: #fff;color: var(--tt-ink);}
.tt-btn-main:hover{background: #ece9f8;}
.tt-btn.is-done{border-color: var(--tt-green);background: var(--tt-green);color: #fff;}
.tt-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 6px 16px;font-size: 13px;color: var(--tt-muted);}
.tt-byline .author-link{color: var(--tt-violet);font-weight: 700;text-decoration: none;}
.tt-byline .author-link:hover{text-decoration: underline;}
.tt-read,.tt-limits{margin: 0 0 28px;padding: 24px;border: 1px solid var(--tt-line);border-radius: 16px;background: #fff;color: var(--tt-ink);line-height: 1.7;}
.tt-read h2,.tt-limits h2{margin: 0 0 12px;font-size: clamp(21px, 2.6vw, 26px);font-weight: 800;}
.tt-read h3{margin: 0 0 6px;font-size: 17px;font-weight: 800;}
.tt-read p{margin: 0 0 12px;}
.tt-read a,.tt-limits a{color: var(--tt-violet);font-weight: 700;}
.tt-steps{counter-reset: tt;margin: 0 0 12px;padding: 0;list-style: none;}
.tt-steps li{counter-increment: tt;position: relative;padding: 10px 0 10px 44px;border-bottom: 1px dashed var(--tt-line);}
.tt-steps li:last-child{border-bottom: 0;}
.tt-steps li::before{content: counter(tt);position: absolute;left: 0;top: 10px;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;background: var(--tt-ink);color: #fff;font-size: 14px;font-weight: 800;}
.tt-table-wrap{overflow-x: auto;border: 1px solid var(--tt-line);border-radius: 12px;}
.tt-table{width: 100%;min-width: 560px;border-collapse: collapse;font-size: 15px;}
.tt-table th,.tt-table td{padding: 11px 14px;border-bottom: 1px solid var(--tt-line);text-align: left;vertical-align: top;}
.tt-table thead th{background: var(--tt-soft);font-size: 12px;letter-spacing: 0.05em;text-transform: uppercase;color: var(--tt-muted);}
.tt-table tbody th{white-space: nowrap;color: var(--tt-violet-dark);}
.tt-table tbody tr:last-child th,.tt-table tbody tr:last-child td{border-bottom: 0;}
.tt-levels{display: grid;grid-template-columns: minmax(0, 1fr);gap: 12px;}
.tt-level{padding: 16px;border: 1px solid var(--tt-line);border-top: 4px solid var(--tt-tone);border-radius: 12px;background: var(--tt-soft);}
.tt-level p:last-child{margin: 0;font-size: 15px;color: var(--tt-muted);}
.tt-level-line{margin: 10px 0 6px;font-family: Georgia, "Times New Roman", serif;font-size: 19px;font-weight: 700;}
.tt-uses{display: grid;grid-template-columns: minmax(0, 1fr);gap: 14px;}
.tt-uses > div{padding-left: 14px;border-left: 3px solid var(--tt-violet);}
.tt-uses p{margin: 0;}
.tt-limits{border-left: 5px solid var(--tt-amber);background: var(--tt-amber-soft);}
.tt-limits ul{margin: 0;padding-left: 20px;}
.tt-limits li{margin-bottom: 8px;}
.tt-closing{display: grid;grid-template-columns: minmax(0, 1fr);gap: 1.25rem;align-items: start;margin-top: 1rem;}
.tt-closing > section{margin: 0;min-width: 0;}
@media (min-width: 768px){.tt-levels,.tt-uses{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (min-width: 992px){.tt-tool{grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);padding: 24px;}.tt-byline{grid-column: 1 / -1;}.tt-closing{grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);}}
@media (prefers-reduced-motion: reduce){.tt-card.is-new .tt-line{animation: none;}}