.tool-root{--t-from:#22d3ee;--t-to:#a78bfa;--t-glow:#22d3ee59;--t-panel:linear-gradient(160deg, #161a30eb, #0a0c18f5);--t-edge:#ffffff17;--t-text:#eef1ff;--t-muted:#9aa3c7;--t-radius:16px;--t-mono:ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;color:var(--t-text)}.tool-root[data-tool=password-generator]{--t-from:#22d3ee;--t-to:#34d399;--t-glow:#34d39959}.tool-root[data-tool=word-unscrambler]{--t-from:#a78bfa;--t-to:#f472b6;--t-glow:#f472b659}.tool-root[data-tool=word-maker]{--t-from:#fbbf24;--t-to:#fb7185;--t-glow:#fb718559}.tool-root[data-tool=maths-quiz]{--t-from:#e879f9;--t-to:#22d3ee;--t-glow:#e879f94d}.tool-root[data-tool=level-3-quiz]{--t-from:#fb923c;--t-to:#e879f9;--t-glow:#fb923c4d}.tool-root>:not(.tool-loading){background:var(--t-panel);border:1px solid var(--t-edge);border-radius:var(--t-radius);padding:clamp(14px,4vw,32px);position:relative;overflow:hidden;box-shadow:0 30px 80px #0000008c,inset 0 0 0 1px #ffffff05}.tool-root>:not(.tool-loading):before{content:"";aspect-ratio:1;background:radial-gradient(closest-side, var(--t-glow), transparent);pointer-events:none;width:70%;position:absolute;inset:-40% -40% auto auto}.tool-root button,.tool-root input[type=text]{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font-family:inherit}.tool-root button{cursor:pointer;touch-action:manipulation}.tool-root button:disabled{cursor:not-allowed}.tool-root .t-input{min-width:0;font:700 1.35rem/1.2 var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--t-text);border:1px solid var(--t-edge);background:#00000059;border-radius:12px;padding:14px 16px;transition:border-color .2s,box-shadow .2s}.tool-root .t-input::placeholder{color:#9aa3c780;letter-spacing:.12em}.tool-root .t-input:focus{border-color:var(--t-from);box-shadow:0 0 0 4px var(--t-glow);outline:none}.tool-root .t-btn{letter-spacing:.04em;color:#0b0d18;background:linear-gradient(135deg, var(--t-from), var(--t-to));box-shadow:0 8px 24px var(--t-glow);border:0;border-radius:12px;padding:14px 22px;font-family:inherit;font-size:1rem;font-weight:700;line-height:1;transition:transform .15s,box-shadow .2s,filter .2s}@media (hover:hover){.tool-root .t-btn:hover:not(:disabled){box-shadow:0 12px 30px var(--t-glow);filter:brightness(1.08);transform:translateY(-1px)}}.tool-root .t-btn:active:not(:disabled){transform:translateY(1px)}.tool-root .t-btn:disabled{opacity:.45;box-shadow:none}.tool-root .t-btn:focus-visible{outline-offset:3px;outline:2px solid #fff}.tool-root .t-intro{color:var(--t-muted);text-align:center;margin:0 0 18px}.tool-root .t-error{color:#fb7185;text-align:center}.rare-toggle{color:var(--t-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;gap:10px;margin-top:14px;font-size:.9rem;display:inline-flex;position:relative}.rare-toggle input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.rare-track{border:1px solid var(--t-edge);background:#ffffff1a;border-radius:999px;flex-shrink:0;width:42px;height:24px;transition:background .2s;position:relative}.rare-thumb{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px}.rare-toggle input:checked+.rare-track{background:linear-gradient(135deg, var(--t-from), var(--t-to));border-color:#0000}.rare-toggle input:checked+.rare-track .rare-thumb{transform:translate(18px)}.rare-toggle input:focus-visible+.rare-track{outline-offset:2px;outline:2px solid #fff}.rare-toggle input:checked~.rare-label{color:var(--t-text)}.rare-busy{font-family:var(--t-mono);font-size:.8rem}.tiles{flex-wrap:wrap;gap:.2em;min-width:0;display:inline-flex}.tiles-sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tile{width:1.75em;height:2em;font:800 1em/1 var(--t-mono);color:#0b0d18;background:linear-gradient(160deg,#fff,#dfe4ff);border-radius:6px;place-items:center;animation:.35s cubic-bezier(.2,.9,.3,1.3) both tile-in;display:inline-grid;box-shadow:0 3px #00000059,inset 0 0 0 1px #fff9}@keyframes tile-in{0%{opacity:0;transform:rotateX(-90deg)translateY(6px)}}@media (prefers-reduced-motion:reduce){.tile{animation:none}}.tool-loading{text-align:center;color:var(--muted,#9a9a9a)}
