.ybf12[data-tool="ttt"]{--ttt-line:#2b3a55;--ttt-accent:#1f6feb;--ttt-ok:#1a7f37;--ttt-warn:#9a6700;--ttt-bg:#f6f8fb;--ttt-panel:#ffffff;--ttt-soft:#eef2f8;box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1b2430;max-width:520px;margin:0 auto;padding:8px}
.ybf12[data-tool="ttt"] *,.ybf12[data-tool="ttt"] *::before,.ybf12[data-tool="ttt"] *::after{box-sizing:border-box}
.ybf12[data-tool="ttt"] .ttt-frame{border:3px solid var(--ttt-accent);border-radius:14px;background:var(--ttt-bg);padding:12px;display:flex;flex-direction:column;gap:10px}
.ybf12[data-tool="ttt"] .ttt-head{display:flex;flex-direction:column;gap:2px}
.ybf12[data-tool="ttt"] .ttt-title{margin:0;font-size:18.4px;line-height:1.3}
.ybf12[data-tool="ttt"] .ttt-sub{margin:0;font-size:13.6px;color:#4a5568}
.ybf12[data-tool="ttt"] .ttt-controls{display:flex;gap:8px;flex-wrap:wrap}
.ybf12[data-tool="ttt"] .ttt-btn{min-height:44px;min-width:88px;padding:10px 16px;font-size:16px;border-radius:10px;border:2px solid var(--ttt-line);background:#fff;color:#1b2430;cursor:pointer;font-weight:600}
.ybf12[data-tool="ttt"] .ttt-btn:hover{border-color:var(--ttt-accent)}
.ybf12[data-tool="ttt"] .ttt-btn:focus-visible{outline:3px solid var(--ttt-accent);outline-offset:2px}
.ybf12[data-tool="ttt"] .ttt-btn[disabled]{opacity:.5;cursor:not-allowed}
.ybf12[data-tool="ttt"] .ttt-start{border-color:var(--ttt-ok);color:var(--ttt-ok)}
.ybf12[data-tool="ttt"] .ttt-reset{border-color:var(--ttt-warn);color:var(--ttt-warn)}
.ybf12[data-tool="ttt"] .ttt-panel{background:var(--ttt-panel);border:1px solid #d7dee8;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.ybf12[data-tool="ttt"] .ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:330px;margin:0 auto}
.ybf12[data-tool="ttt"] .ttt-cell{aspect-ratio:1/1;min-height:64px;font-size:32px;font-weight:700;line-height:1;border:2px solid var(--ttt-line);border-radius:10px;background:var(--ttt-soft);color:#1b2430;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ybf12[data-tool="ttt"] .ttt-cell:focus-visible{outline:3px solid var(--ttt-accent);outline-offset:2px}
.ybf12[data-tool="ttt"] .ttt-cell[disabled]{cursor:not-allowed;opacity:.85}
.ybf12[data-tool="ttt"] .ttt-cell.ttt-win{border-color:var(--ttt-ok);border-width:3px;background:#e6f4ea}
.ybf12[data-tool="ttt"] .ttt-summary{font-size:16px;font-weight:600;text-align:center;min-height:1.4em}
.ybf12[data-tool="ttt"] .ttt-status{font-size:14.4px;text-align:center;color:#4a5568;min-height:1.3em}
@media (max-width:390px){.ybf12[data-tool="ttt"]{padding:6px}.ybf12[data-tool="ttt"] .ttt-frame{padding:10px}.ybf12[data-tool="ttt"] .ttt-cell{font-size:25.6px;min-height:56px}.ybf12[data-tool="ttt"] .ttt-btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.ybf12[data-tool="ttt"] *{transition:none!important;animation:none!important}}
.ybf12[data-tool="ttt"]{--ttt-accent:#cb623e}
.ybf12[data-tool="ttt"] .ttt-frame{background:linear-gradient(135deg,#cc623e,#f3ac5e);border:none;padding:22px;border-radius:22px}
.ybf12[data-tool="ttt"] .ttt-title,.ybf12[data-tool="ttt"] .ttt-sub{color:#fff}
.ybf12[data-tool="ttt"] .ttt-start{background:#fff6e8;color:#8f3d22;border-color:transparent}
.ybf12[data-tool="ttt"] .ttt-reset{border-color:transparent;color:#78331d}