/* Scoped tool skin. Base page styles stay owned by the design agent. */
.tool{--rand-ease:cubic-bezier(.23,1,.32,1)}
.tool-body>*{min-width:0}
.tool .tool-body{border-radius:0;overflow:hidden}
.tool .tool-result{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:24px;background:transparent;border-radius:0;box-shadow:none}
.tool .result-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tool .result-stage{position:relative;min-height:230px;padding:65px 0 36px;gap:24px;align-content:center;perspective:900px}
.ready-ring{display:block;width:94px;height:94px;border-radius:50%;border:12px solid #b070e688;border-top-color:#ec6a7e;box-shadow:inset 0 0 22px #58c6f244,0 0 36px #b070e633;transform:rotate(-28deg)}
.ready-caption{flex-basis:100%;text-align:center;font-size:16px;color:var(--muted)}
.tool .result-number{display:block;min-width:0;max-width:100%;border:0;border-radius:0;padding:0 4px;background:transparent;font-size:clamp(28px,4.4vw,64px);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.055em;line-height:1.3;overflow-wrap:anywhere}
.tool .result-name{padding:0;max-width:100%;width:100%;font-size:clamp(26px,3.5vw,44px);line-height:1.3;overflow-wrap:anywhere}
.reel-window{display:block;height:1.3em;overflow:hidden;max-width:100%;mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.reel-strip{display:block}
.reel-row{display:block;height:1.3em;line-height:1.3;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
.settled{color:var(--ink);text-shadow:0 0 32px #b070e644}
.tool .result-stage.many{gap:10px 14px;max-height:360px;padding:18px 0;overflow:auto;align-content:start}
.tool .many .result-number{font-size:20px;letter-spacing:-.035em;flex:0 1 auto;padding:6px 0;border-bottom:1px solid var(--line)}
.tool .result-meta{margin:8px 0 0;line-height:1.6;font-size:13px}
.tool .result-actions{margin-top:18px;gap:10px}
.tool .result-actions button{min-height:44px;padding:10px 16px;border-radius:100px;font-size:13px;background:var(--surface)}
.tool button{min-height:44px}
.tool button:disabled{cursor:default;opacity:.55}
.tool .generate{position:relative;overflow:hidden;transition:transform 500ms var(--rand-ease),box-shadow 500ms var(--rand-ease);transform:scale(1)}
.tool .generate:active{transform:scale(.97);transition-duration:120ms}
.tool .generate::after{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,#fff5,transparent 65%);opacity:0;transform:scale(.6);transition:transform 600ms var(--rand-ease),opacity 600ms var(--rand-ease);pointer-events:none}
.tool .generate:active::after{opacity:.7;transform:scale(1);transition-duration:120ms}
.dice-segments{padding:0;border:0;margin:0 0 17px;min-width:0}
.dice-segments legend{font-size:14px;color:var(--muted);padding:0;margin-bottom:7px}
.dice-options{display:flex;gap:4px;padding:5px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);box-shadow:var(--glass-shine)}
.dice-segments label{position:relative;flex:1;cursor:pointer}
.dice-segments input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dice-segments span{display:grid;place-items:center;min-height:46px;border-radius:12px;color:var(--muted);border:1px solid transparent;transition:background 400ms ease,color 400ms ease,border-color 400ms ease;font-size:17px}
.dice-segments input:checked+span{background:linear-gradient(120deg,#ec6a7e26,#b070e633,#58c6f21f);border-color:#b070e666;color:var(--ink);box-shadow:var(--glass-shine),0 4px 16px #b070e614}
.dice-segments input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.tool .coin{position:relative;display:block;width:128px;height:128px;border:0;background:none;box-shadow:none;padding:0;transform-style:preserve-3d}
.coin-body{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.coin-edge,.coin-face{position:absolute;inset:0;border-radius:50%}
.coin-edge{background:repeating-conic-gradient(#ac7840 0deg 4deg,#efcc91 4deg 8deg);border:1px solid #d4a76c}
.coin-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:5px double #ffe9bb;background:radial-gradient(ellipse at 30% 20%,#fff4d6,transparent 56%),linear-gradient(135deg,#f2d99c,#c8944d);color:#624019;backface-visibility:hidden;box-shadow:inset 0 0 0 5px #bd874c55,inset 0 -10px 18px #8d5d2922;font-size:18px;overflow:hidden}
.coin-face b{font-size:43px;line-height:1;font-weight:500;text-shadow:0 1px #fff6d9}
.coin-face::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#fff6 45%,transparent 65%);pointer-events:none}
.coin-front{transform:translateZ(4px)}
.coin-back{transform:rotateY(180deg) translateZ(4px)}
.object-shadow{position:absolute;left:5%;right:5%;height:17px;bottom:-30px;border-radius:50%;background:radial-gradient(ellipse,#0005,transparent 72%);pointer-events:none}
.tool .die{--die:76px;--half-die:38px;position:relative;display:block;width:var(--die);height:var(--die);padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform-style:preserve-3d}
.dice-cube{display:block;position:absolute;inset:0;transform-style:preserve-3d}
.dice-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12px;gap:5px;border:1px solid #e6dbf5;border-radius:12px;background:linear-gradient(145deg,#fffafc,#d4c1e8);box-shadow:inset 0 0 12px #fff9;backface-visibility:hidden}
.tool .dice-face i{width:100%;height:100%;display:block;background:radial-gradient(circle at 65% 65%,#715584,#392b50);border-radius:50%;box-shadow:inset 0 1px 2px #1a103c55}
.dice-value{position:absolute;bottom:-49px;left:0;right:0;text-align:center;font-size:14px;color:var(--muted)}
.tool .field input,.tool .field textarea{background:var(--bg);font-size:16px}
.history-list small{font-size:13px}
@media(hover:hover) and (pointer:fine){.tool .generate:hover:not(:disabled){box-shadow:0 6px 28px #b070e633}.dice-segments label:hover span{border-color:#b070e666}}
@media(max-width:768px){.tool .tool-result{padding:26px 14px}.tool .result-stage{gap:25px;min-height:260px;padding:70px 0 55px}.tool .die{--die:62px;--half-die:31px}.dice-face{padding:9px;gap:4px;border-radius:10px}.tool .result-number{font-size:clamp(24px,7.4vw,44px)}.tool .result-name{font-size:28px}.tool .tabs button{font-size:13px;min-width:0}.tool .result-actions button{padding:10px 14px}.tool .result-stage.many{min-height:150px}.tool .many .result-number{font-size:18px}.tool .tool-footnote{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.tool .generate,.tool .generate::after,.dice-segments span{transition:none}.tool .generate:active{transform:none}.tool .confetti{display:none}}

/* 04.11 round 2: six modes, live preview before the first run, «Да / нет» token, answer ball, confetti behind the result. */
.tool .tabs{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.tool .tabs{grid-template-columns:repeat(3,1fr);gap:4px}}
.result-stage.is-preview>*{opacity:.62;animation:preview-float 3.6s ease-in-out infinite alternate}
.result-stage.is-preview>*:nth-child(2){animation-delay:-1.2s}
.result-stage.is-preview>*:nth-child(3){animation-delay:-2.4s}
@keyframes preview-float{from{transform:translateY(4px)}to{transform:translateY(-6px)}}
.tool .preview-number{letter-spacing:-.02em}
.preview-list{display:grid;gap:8px;justify-items:center;font-size:clamp(20px,2.6vw,28px);font-weight:600}
.preview-list span:nth-child(2){opacity:.6}
.preview-list span:nth-child(3){opacity:.3}
.result-stage>.burst{position:absolute;left:50%;top:52%;width:0;height:0;z-index:0;pointer-events:none}
.result-stage>.burst i{position:absolute;width:9px;height:6px;margin:-3px -4.5px;border-radius:2px}
.result-stage>:not(.burst){position:relative;z-index:1}
.tool .token{position:relative;display:block;width:132px;height:132px;transform-style:preserve-3d}
.token-body{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.token-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;font-size:40px;font-weight:700;letter-spacing:-.02em;backface-visibility:hidden;box-shadow:inset 0 -10px 22px #0002,inset 0 6px 14px #fff6,0 10px 30px #0003}
.token-yes{background:radial-gradient(ellipse at 30% 22%,#fff9,transparent 55%),linear-gradient(135deg,#7fe3c4,#2fae8a);color:#0d3b2f;transform:translateZ(3px)}
.token-no{background:radial-gradient(ellipse at 30% 22%,#fff9,transparent 55%),linear-gradient(135deg,#f6a3b3,#d9506d);color:#4a1020;transform:rotateX(180deg) translateZ(3px)}
.tool .magic-ball{position:relative;display:block;width:224px;height:224px}
.ball-body{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 28%,#5b5470 0,#211d2c 38%,#08070c 72%);box-shadow:inset -14px -18px 34px #000c,inset 8px 10px 22px #ffffff14}
.ball-body::after{content:"";position:absolute;left:24%;top:14%;width:30%;height:18%;border-radius:50%;background:radial-gradient(ellipse,#ffffff55,transparent 70%);transform:rotate(-24deg)}
.ball-window{position:relative;display:block;width:156px;height:156px;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2b2470,#120f33 70%);box-shadow:inset 0 4px 14px #000a,0 0 0 4px #15121f}
.ball-tri{position:absolute;left:50%;top:50%;width:100px;height:86px;transform:translate(-50%,-33.333%);clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#4a57d6,#2a3196);opacity:.86}
.ball-tri::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff22,transparent 45%);pointer-events:none}
.ball-answer{position:absolute;left:0;right:0;top:9px;margin:0 auto;width:max-content;max-width:100%;padding:0;color:#eef0ff;font-weight:700;font-size:16px;line-height:1.1;text-align:center;text-shadow:0 1px 4px #12156a}
.ball-answer>span{display:block;width:max-content;margin:0 auto;white-space:nowrap}
.ball-answer.is-question{font-size:30px}
.tool .magic-ball .object-shadow{bottom:-26px}
.tool .token .object-shadow{bottom:-28px}
@media(max-width:768px){.tool .token{width:112px;height:112px}.token-face{font-size:34px}.tool .magic-ball{width:200px;height:200px}.ball-window{width:140px;height:140px}.ball-tri{width:90px;height:78px}}
@media(prefers-reduced-motion:reduce){.result-stage.is-preview>*{animation:none}}
.token-edge{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,#3b8f78,#c25068)}
.result-stage.is-preview>*{opacity:.78}
.dice-value{transform-origin:center}

/* Mode sections for search (each mode has its own heading and a link that opens it). */
.modes-seo .mode-seo{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.modes-seo .mode-seo h2{margin-bottom:12px}
.modes-seo .mode-open{margin-top:6px;min-height:46px;padding:11px 18px;font-size:14px}

/* One outer glass shell. Inner surfaces have no divider or second frame. */
.tool{overflow:hidden;background:radial-gradient(ellipse at 70% 30%,#b070e61a,transparent 65%),radial-gradient(ellipse at 90% 65%,#58c6f214,transparent 60%),var(--glass);border-color:var(--glass-line);box-shadow:var(--glass-shine),var(--shadow)}
.tool .tool-settings{border:0;background:transparent}
.tool .tool-footnote{border:0}
.tool .tabs{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shine)}
.tool .tabs button,.tool .field input,.tool .field textarea,.tool .result-actions button,.tool .copy-fallback textarea{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shine)}
.tool .tabs button[aria-selected=true]{background:linear-gradient(120deg,#ec6a7e26,#b070e633,#58c6f21f);border-color:#b070e666;color:var(--ink)}
.tool .generate{background:linear-gradient(110deg,#ec6a7e99,#b070e6aa 60%,#58c6f299),var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shine);color:var(--ink)}
:root[data-theme=light] .tool .generate{color:#291b39}
.tool .checkbox input{accent-color:var(--accent)}
.tool-page .history-list{padding:8px 18px;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);box-shadow:var(--glass-shine)}
.tool-page .history-list li{border:0}
/* Hidden panels keep their size in this grid, but remain invisible and unfocusable.
   The tallest panel defines a stable form height at each width and font size. */
.tool #random-form{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.tool #random-form>[role=tabpanel]{grid-area:1 / 1;min-width:0}
/* Override the shared [hidden]{display:none!important} only for these reserved slots. */
.tool #random-form>[role=tabpanel][hidden]{display:block!important;visibility:hidden;pointer-events:none}
.tool .generate{grid-row:2;align-self:start;margin-top:18px}
.tool .error{grid-row:3;min-height:48px;margin-top:12px}
/* Reserve the same slots for the scene, status and actions in every state. */
.tool .tool-result{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:18px 320px 32px 64px;gap:12px;align-content:center;justify-items:center}
.tool .result-label{margin:0}
.tool .result-stage,.tool .result-stage.many{height:320px;min-height:320px;max-height:320px;padding:56px 8px 44px;align-content:center}
.tool .result-stage.many{padding:16px 8px;align-content:start;overflow:auto}
.tool .many .result-number{border:0}
.tool .result-meta{margin:0;width:100%;height:32px;overflow:auto}
.tool .result-meta[hidden]{display:block!important;visibility:hidden}
.tool .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;margin:0;width:100%;max-width:420px}
.tool .result-actions button{min-width:0;padding:8px 10px}
.tool .from-link{position:absolute;top:49px;margin:0;border:0;background:var(--glass)}
.tool .copy-fallback{position:absolute;z-index:3;bottom:100px;left:16px;width:calc(100% - 32px);margin:0;padding:14px;border:1px solid var(--glass-line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.tool .copy-fallback textarea{height:96px;resize:none}
@media(hover:hover) and (pointer:fine){.tool .tabs button:hover,.tool .result-actions button:hover:not(:disabled){background:var(--glass-hover)}}
/* Blur only the outer shell and history, never each nested control. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tool,.tool-page .history-list{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}}
@media(max-width:768px){.tool .tool-result{padding:24px 14px}.tool .tool-settings{padding:22px 15px}.tool .tabs button{padding:10px 4px}.tool .result-actions button{font-size:13px}.tool .dice-segments span{font-size:13px}}
