/* Симулятор идей Reels в языке «Рикко» (16.10.2026): кремовый лист, пастельные плитки, «наклеечные» поля с жёсткой тенью, ночной блок с контактом.
   Общее движение (вход блоков, кольцо вокруг Рикко, свечение карточек) даёт static/css/ricco/fx.css; здесь только то, что есть у симулятора.
   Все id и тексты неизменны: на них держатся тесты и скрипт idea-simulator.js. */
@layer pages {
 .sim {padding-block:12px 32px;max-width:1120px}
 .sim [hidden] {display:none!important}

 /* Первый экран */
 .sim-intro {display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);align-items:center;gap:20px 40px;margin:20px 0 28px}
 .sim h1 {font-size:clamp(2.4rem,6vw,4.75rem);line-height:1.02;letter-spacing:-.045em;margin:6px 0 16px}
 .sim-lead {font-size:var(--t-lead);max-width:52ch;color:var(--ink-2)}
 /* Рикко: круг, реплика, переливающееся пятно. Кольцо с орбитальной звездой рисует fx.css на .sim-stage-art */
 .sim-stage {position:relative;display:grid;justify-items:center;margin:0;min-width:0}
 .sim-stage-art {position:relative;width:min(100%,320px);aspect-ratio:1;display:grid;place-items:center}
 .sim-blob {position:absolute;inset:7% 3% 5%;border-radius:50% 50% 48% 52% / 52% 48% 52% 48%;background:var(--butter);transition:background-color .5s var(--ease-out)}
 .sim-stage[data-pose=happy] .sim-blob {background:var(--mint)}
 .sim-stage[data-pose=idea] .sim-blob {background:var(--rose)}
 .sim-stage[data-pose=laptop] .sim-blob {background:var(--lilac)}
 .sim-ricco {position:relative;z-index:1;width:88%}
 .sim-ricco .ricco-actor,.sim-ricco .mascot {width:100%;height:auto}
 .sim-ricco.is-swapping {animation:sim-swap .6s var(--ease-pop)}
 .sim-say {position:absolute;z-index:2;top:-4%;right:-3%;max-width:min(76%,240px);padding:11px 18px;background:var(--card);border:1.5px solid var(--ink);border-radius:24px;
  font:700 clamp(.875rem,.8rem + .3vw,1.0625rem)/1.2 var(--font-text);letter-spacing:-.01em;rotate:3deg;text-wrap:balance}
 .sim-say::after {content:'';position:absolute;left:24px;bottom:-9px;width:15px;height:15px;background:var(--card);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
 .sim-intro .sim-say {top:-17%;right:-6%}
 .sim-say.is-new {animation:sim-say .5s var(--ease-pop)}
 @media (prefers-reduced-motion:no-preference) {
  .sim-blob {animation:sim-morph 11s ease-in-out infinite alternate}
 }

 .sim-note-line {margin:18px 4px 0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.5}
 /* Форма: «наклеечная» карточка с жёсткой тенью, как поле поиска на главной */
 .sim fieldset {border:0;margin:0;padding:0;min-width:0}
 .sim fieldset.sim-card {padding:clamp(22px,3.2vw,40px);background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-xl);box-shadow:6px 6px 0 var(--ink)}
 .sim-step {display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:9px 15px;border-radius:var(--r-pill);background:var(--butter);font:700 var(--t-xs)/1 var(--font-text);letter-spacing:.12em;text-transform:uppercase}
 .sim-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:32px;clear:both}
 .sim label {display:block;font-weight:700;margin-bottom:10px}
 .sim select,.sim textarea {display:block;width:100%;min-width:0;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:18px;padding:15px 17px;font:inherit;line-height:1.5;
  box-shadow:3px 3px 0 var(--ink);transition:box-shadow var(--d-2),translate var(--d-2)}
 .sim textarea {resize:vertical;min-height:132px}
 .sim textarea:focus {box-shadow:5px 5px 0 var(--accent);translate:-1px -1px}
 .sim select {min-height:52px}
 .sim [aria-invalid=true] {border-color:var(--bad);box-shadow:3px 3px 0 var(--bad)}
 .sim :focus-visible {outline:3px solid var(--focus-ring-solid);outline-offset:4px}
 .sim-help,.sim-field-meta {font-size:var(--t-sm);color:var(--ink-3);line-height:1.5}
 .sim-field-meta {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
 .sim-example {display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font:600 .9375rem/1 var(--font-text);color:var(--action);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent);text-underline-offset:4px;cursor:pointer}
 .sim-example:hover {color:var(--action-press)}
 .sim-field-meta p {margin:0}
 #sim-count {white-space:nowrap;font-variant-numeric:tabular-nums}
 .sim-meter {display:block;height:6px;margin-top:10px;border-radius:6px;background:var(--paper-sunken);overflow:hidden}
 .sim-meter i {display:block;width:100%;height:100%;border-radius:6px;background:var(--c-rest);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .3s var(--ease-out),background-color .3s}
 .sim-meter[data-state=ok] i {background:var(--ok)}
 .sim-meter[data-state=over] i {background:var(--bad)}
 .sim-error {color:var(--bad);font-size:var(--t-sm);margin:8px 0}
 .sim-error:empty,.sim-status:empty,#sim-storage:empty,#sim-copy-status:empty {display:none}
 .sim-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
 .sim .button {min-height:52px;white-space:normal;text-align:center}
 #sim-run {min-height:58px;padding-inline:34px;font-size:1rem}
 #sim-run::after {content:'→';font-size:1.15em;line-height:1;transition:translate var(--d-2) var(--ease-out)}
 #sim-run:hover::after {translate:4px 0}
 #sim-run:disabled::after {content:none}
 #sim-run:disabled::before {content:'';width:16px;aspect-ratio:1;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sim-spin .7s linear infinite}
 .sim button:disabled {opacity:.7;cursor:wait}
 .sim-status {padding:16px 0 0;font-weight:600}

 /* Результат */
 .sim-result {margin-top:56px}
 .sim-result::before {content:'';display:block;height:18px;margin-bottom:34px;background:var(--ink);opacity:.22;-webkit-mask:var(--fx-wave) 0 50%/100px 20px repeat-x;mask:var(--fx-wave) 0 50%/100px 20px repeat-x}
 .sim-result-head {display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,270px);gap:20px 40px;align-items:start}
 .sim-result-copy {min-width:0}
 .sim h2 {font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1.12;max-width:26ch;letter-spacing:-.035em;margin-bottom:18px;scroll-margin-top:100px}
 .sim-result-meta {color:var(--ink-2)}
 #sim-result-idea {position:relative;margin:22px 0 8px;padding:20px 24px 20px 56px;background:var(--sky);border:0;border-radius:var(--r-lg);white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-body)}
 #sim-result-idea::before {content:'“';position:absolute;left:18px;top:6px;font:800 3.4rem/1 var(--font-display);color:var(--action)}
 .sim-rstage .sim-stage-art {width:min(100%,250px)}
 .sim-rstage .sim-say {top:-6%;right:0;max-width:min(88%,210px)}
 .sim-stream {position:relative;height:44px;margin-top:10px;overflow:hidden}
 .sim-source {position:absolute;left:50%;top:17px;width:8px;height:8px;border-radius:50%;background:var(--ink-3);translate:-50% 0}
 .sim-ballot {position:absolute;left:50%;top:10px;display:block;padding:3px 9px;font:700 12px/1.2 var(--font-text);border-radius:12px;background:var(--mint);color:var(--ok);opacity:0;pointer-events:none}
 .sim-ballot[data-side=against] {background:var(--rose);color:#8a3f3b}
 .sim-votes {display:grid;grid-template-columns:1fr 1fr;gap:18px}
 .sim-votes>div {display:grid;gap:2px;padding:22px 26px 24px;background:var(--mint);border-radius:var(--r-xl)}
 .sim-votes>div+div {background:var(--rose)}
 .sim-votes span {font-weight:700;color:var(--ink-2)}
 .sim-votes strong {font:800 clamp(2.75rem,6vw,4.75rem)/1.05 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
 .sim-votes small {justify-self:start;margin-top:8px;padding:5px 13px;border-radius:var(--r-pill);background:rgb(255 255 255 / .62);font:700 .9375rem/1.2 var(--font-text);font-variant-numeric:tabular-nums}

 /* «Толпа»: 1000 точек, по одной на условный голос */
 .sim-crowd-wrap {margin-top:18px;padding:clamp(12px,2vw,20px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg)}
 .sim-crowd {display:block;width:100%;height:240px;--crowd-empty:var(--paper-deep);--crowd-for:#3d8b63;--crowd-against:#cf6a64}
 .sim-progress {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;min-height:44px}
 .sim-tally {display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:var(--t-sm);font-variant-numeric:tabular-nums}
 .sim-tally b {color:var(--ink)}
 .sim-pulse {width:10px;aspect-ratio:1;border-radius:50%;background:var(--ok)}
 .is-counting .sim-pulse {animation:sim-pulse .65s ease-in-out infinite alternate}
 .sim-skip {font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink);background:transparent;border:0;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;min-height:44px;cursor:pointer;padding:0 4px}
 .sim-phase {color:var(--ink-3);font-size:var(--t-sm);margin:0 0 6px}
 .sim-bar {position:relative;height:16px;background:var(--paper-sunken);border-radius:10px;overflow:hidden;margin:10px 0 28px}
 .sim-bar span {position:absolute;inset:0;display:block;height:100%;width:100%;background:var(--ok);transform:scaleX(0);transform-origin:left;border-radius:10px}
 .sim-bar #sim-bar-for {background:repeating-linear-gradient(135deg,rgb(255 255 255 / .2) 0 6px,transparent 6px 12px),var(--ok)}
 .sim-bar #sim-bar-against {background:#b66d6a;transform-origin:right}

 /* Итог: цвет по исходу, в углу вращается звезда бренда */
 @media (prefers-reduced-motion:no-preference) {
  #sim-result:not([hidden]),#sim-verdict:not([hidden]),#sim-draft-panel:not([hidden]) {animation:sim-reveal .24s var(--ease-out) both}
  .sim-method[open]:not(:has(summary:focus-visible)) > :not(summary) {animation:sim-reveal .2s var(--ease-out) both}
 }
 .sim-advice {position:relative;overflow:hidden;max-width:none;margin:0 0 20px;padding:clamp(20px,3vw,32px);border-radius:var(--r-xl);background:var(--butter);font-size:var(--t-lead);line-height:1.55;transition:background-color .5s}
 .sim-result[data-outcome=positive] .sim-advice {background:var(--mint)}
 .sim-result[data-outcome=mixed] .sim-advice {background:var(--butter)}
 .sim-result[data-outcome=negative] .sim-advice {background:var(--rose)}
 .sim-advice::after {content:'';position:absolute;right:-26px;top:-26px;width:120px;aspect-ratio:1;background:var(--ink);opacity:.08;-webkit-mask:var(--fx-star) center/contain no-repeat;mask:var(--fx-star) center/contain no-repeat;animation:sim-turn 40s linear infinite}
 .sim-advice p {max-width:68ch;position:relative}
 .sim-advice p+p {margin-top:20px}
 .sim-method {margin:0 0 24px;padding:6px 24px;border:1px solid var(--rule-strong);border-radius:var(--r-lg);background:var(--card)}
 .sim-method summary {display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;cursor:pointer;min-height:52px;list-style:none}
 .sim-method summary::after {content:'+';display:grid;place-items:center;width:32px;aspect-ratio:1;border-radius:50%;background:var(--paper-sunken);font:600 1.3rem/1 var(--font-text);transition:rotate var(--d-3) var(--ease-pop),background-color var(--d-2)}
 .sim-method[open] summary::after {rotate:45deg;background:var(--butter)}
 .sim-method p {line-height:1.6;margin:8px 0 14px;max-width:75ch}
 .sim-method ul {list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}
 .sim-method li {border-left:3px solid var(--rule-strong);padding-left:14px;display:grid;gap:4px;font-size:var(--t-sm)}
 .sim-method li.is-found {border-left-color:var(--ok)}
 .sim-method li:not(.is-found) b {color:var(--ink-3)}
 .sim-method li span {color:var(--ink-2);overflow-wrap:anywhere}

 /* Контакт: ночной блок с Рикко, как «Что дальше» в разборе */
 .sim-contact {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr);align-items:center;gap:20px 40px;margin:0 0 24px;padding:clamp(26px,4vw,56px);border-radius:var(--r-xl)}
 .sim-contact h3 {font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1;max-width:20ch;margin:12px 0 16px;letter-spacing:-.03em}
 .sim-contact p {max-width:60ch;margin-bottom:14px;color:var(--ink-2)}
 .sim-contact .eyebrow {color:var(--action)}
 .sim-contact .button {margin-top:10px;min-height:56px;padding-inline:32px}
 .sim-contact-art {justify-self:center;width:min(100%,300px)}
 .sim-contact-art .ricco-actor,.sim-contact-art .mascot {width:100%;height:auto}
 #sim-draft-panel {grid-column:1 / -1;margin-top:8px;border-top:1px solid var(--rule-strong);padding-top:24px}
 .sim-contact textarea {box-shadow:none}
 #sim-manual {margin-top:24px}
 .sim-secondary {margin-bottom:20px}

 /* Результат: блоки по одному вопросу на блок */
 .sim-block {margin:0 0 24px;padding:clamp(18px,2.6vw,30px);background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl)}
 .sim-block h3 {font:800 clamp(1.15rem,1rem + .8vw,1.5rem)/1.2 var(--font-display);letter-spacing:-.025em;margin:0 0 14px}
 .sim-groups,.sim-quotes,.sim-gains {list-style:none;margin:0;padding:0;display:grid;gap:12px}
 .sim-groups li {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name val' 'bar bar';gap:6px 12px;align-items:end}
 .sim-groups .g-name {grid-area:name;display:grid;min-width:0}
 .sim-groups .g-name b {font-weight:700;font-size:1rem}
 .sim-groups .g-name small {font-size:.8125rem;color:var(--ink-3)}
 .sim-groups i {grid-area:bar;position:relative;display:block;height:14px;border-radius:7px;background:var(--paper-sunken);overflow:hidden}
 .sim-groups i::after {content:'';position:absolute;inset:0;border-radius:7px;background:var(--c-rest);transform:scaleX(var(--w,0));transform-origin:left;transition:transform .9s var(--ease-out)}
 .sim-groups li[data-mood=pos] i::after {background:#3d8b63}
 .sim-groups li[data-mood=mid] i::after {background:#e0a93b}
 .sim-groups li[data-mood=neg] i::after {background:#cf6a64}
 .sim-groups em {grid-area:val;font:800 1.25rem/1 var(--font-display);font-style:normal;font-variant-numeric:tabular-nums}
 .sim-quotes li {position:relative;padding:12px 16px 14px;border-radius:20px 20px 20px 6px;background:var(--paper-sunken)}
 .sim-quotes li[data-mood=pos] {background:var(--mint)}
 .sim-quotes li[data-mood=neg] {background:var(--rose)}
 .sim-quotes li[data-mood=mid] {background:var(--butter)}
 .sim-quotes small {display:block;font:700 .75rem/1.3 var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
 .sim-quotes p {margin:0;font-size:1.0625rem;line-height:1.4;overflow-wrap:anywhere}
 .sim-gains {counter-reset:gain}
 .sim-gains li {counter-increment:gain;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule)}
 .sim-gains li:first-child {border-top:0;padding-top:0}
 .sim-gains li::before {content:counter(gain);grid-row:1 / span 2;display:grid;place-items:center;width:30px;aspect-ratio:1;border-radius:50%;background:var(--butter);font:800 .875rem/1 var(--font-display)}
 .sim-gains b {font-weight:700}
 .sim-gains em {font-style:normal;font-weight:700;color:var(--ok);font-size:.9375rem;margin-left:8px;white-space:nowrap}
 .sim-gains span {grid-column:2;color:var(--ink-2);line-height:1.5}
 .sim-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
 .sim-stats>div {display:grid;align-content:start;gap:6px;padding:14px 12px 13px;border-radius:20px;background:var(--sky)}
 .sim-stats>div:nth-child(2) {background:var(--lilac)}
 .sim-stats>div:nth-child(3) {background:var(--butter)}
 .sim-stats strong {font:800 clamp(1.45rem,1.1rem + 1.4vw,2.2rem)/1 var(--font-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
 .sim-stats span {font-size:.8125rem;line-height:1.25;color:var(--ink-2)}
 .sim-retention {height:120px;border-radius:16px;background:var(--paper-sunken);overflow:hidden}
 .sim-retention svg {display:block;width:100%;height:100%}
 .ret-area {fill:color-mix(in oklab,var(--accent) 16%,transparent)}
 .ret-line {fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
 .ret-mark {stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
 .sim-retention+.sim-help {margin-top:8px}
 .sim-advice p {font-size:var(--t-lead);margin:0}

 .sim-quick {margin:0 0 18px}
 .is-counting .sim-progress {position:sticky;bottom:12px;z-index:6;padding:4px 8px 4px 16px;background:var(--paper);border-radius:var(--r-pill);box-shadow:var(--float)}
 @keyframes sim-reveal {from {opacity:0;transform:translateY(6px)}}
 @keyframes sim-pulse {to {opacity:.3;scale:.7}}
 @keyframes sim-spin {to {rotate:1turn}}
 @keyframes sim-turn {to {transform:rotate(1turn)}}
 @keyframes sim-swap {from {opacity:0;scale:.82;rotate:-8deg}}
 @keyframes sim-say {from {opacity:0;scale:.7;translate:0 10px}}
 @keyframes sim-morph {to {border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;rotate:6deg}}

 @media (max-width:860px) {
  .sim-result-head {grid-template-columns:minmax(0,1fr) 150px;gap:16px}
  .sim-rstage .sim-say {display:none}
 }
 @media (max-width:640px) {
  .sim-block {padding:16px;border-radius:24px;margin-bottom:12px}
  .sim-result {margin-top:28px}
  .sim-result::before {height:12px;margin-bottom:20px}
  #sim-result-idea {margin-top:12px;padding:14px 16px 14px 44px;font-size:.9375rem}
  #sim-result-idea::before {left:12px;top:4px;font-size:2.6rem}
  .sim-note-line {font-size:.8125rem;margin-top:14px}
  .sim-advice {margin-bottom:12px;padding:18px}
  .sim-advice p {font-size:1.0625rem}
  .sim-quotes p {font-size:1rem}
  .sim {padding-top:12px}
  .sim-intro {position:relative;grid-template-columns:1fr;gap:0;margin:20px 0 28px}
  .sim-intro .sim-stage {position:absolute;top:-2px;right:0;width:96px;z-index:0}
  .sim-intro .sim-say {display:none}
  .sim-copy {position:relative;z-index:1}
  .sim h1 {font-size:clamp(2rem,8.6vw,2.6rem);margin-top:6px;margin-bottom:10px;padding-right:96px}
  .sim-lead {font-size:1rem;padding-right:84px;min-height:3.2em}
  .sim-steps {gap:6px;margin-top:22px}
  .sim-steps li {padding:5px 13px 5px 5px;font-size:.8125rem;gap:7px}
  .sim-steps b {width:24px;font-size:.75rem}
  .sim .eyebrow {font-size:.65rem}
  .sim-fields {grid-template-columns:1fr;gap:20px}
  .sim fieldset.sim-card {box-shadow:4px 4px 0 var(--ink)}
  .sim-note {padding:20px 18px;font-size:.9375rem}
  .sim-votes {gap:10px}
  .sim-votes>div {padding:16px 14px 18px}
  .sim-votes span {font-size:.875rem}
  .sim-votes small {font-size:.8125rem;padding:4px 10px}
  .sim-result-head {grid-template-columns:1fr}
  .sim-rstage {order:-1;justify-self:end;width:130px;margin-bottom:-52px}
  .sim-rstage .sim-stage-art {width:130px}
  .sim-actions>.button {flex:1 1 100%}
  .sim-contact {grid-template-columns:1fr;padding:24px 20px}
  .sim-contact-art {order:-1;width:150px;justify-self:end;margin-bottom:-60px}
  .sim-contact>.button,.sim-contact-copy>.button {width:100%}
  .sim h2 {scroll-margin-top:84px}
  .sim-crowd {height:auto}
  .sim-method {padding-inline:18px}
 }
 @media (prefers-reduced-motion:reduce) {.sim * {animation:none!important;transition:none!important;scroll-behavior:auto!important}}
 @media (max-width:360px) {body[data-page="/tools/idea-simulator/"] .footer-grid {grid-template-columns:1fr}}
}
