.trial-section { padding: 32px 0 84px; background: var(--cream); }
.trial-shell { display: grid; grid-template-columns: minmax(0,.72fr) minmax(420px,1fr); gap: 56px; align-items: start; }
.trial-copy { position: sticky; top: 120px; }
.trial-note { margin-top: 22px; color: var(--muted); line-height: 1.6; }
.trial-card { min-height: 480px; padding: 34px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.trial-step[hidden] { display: none; }
.trial-step h3 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.03em; }
.trial-step > p { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.trial-form { display: grid; grid-template-columns: minmax(150px,1fr) minmax(180px,1.4fr); gap: 14px; align-items: end; }
.trial-form label, .trial-auth-form label, .trial-child-form label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 800; }
.trial-form input, .trial-auth-form input, .trial-child-form input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; }
.trial-form input:focus, .trial-auth-form input:focus, .trial-child-form input:focus { outline: 3px solid rgba(242,196,122,.7); border-color: var(--green); }
.trial-form .button { min-height: 52px; border: 0; cursor: pointer; }
.trial-progress { display: flex; gap: 7px; margin-bottom: 24px; }
.trial-progress span { height: 7px; flex: 1; border-radius: 999px; background: #e7dfd2; }
.trial-progress span.active { background: var(--coral); }
.trial-text-card { margin: -8px 0 20px; border: 1px solid var(--line); border-radius: 20px; background: #fffdf8; overflow: hidden; }
.trial-text-card summary { display: flex; min-height: 68px; padding: 14px 17px; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.trial-text-card summary::-webkit-details-marker { display: none; }
.trial-text-card summary::marker { content: ""; }
.trial-text-card summary::after { display: none; content: none; }
.trial-text-card summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.trial-text-card summary > span:first-child { display: grid; gap: 3px; }
.trial-text-card summary strong { color: var(--ink); }
.trial-text-card summary small, .trial-text-heading span { color: var(--muted); font-size: 13px; }
.trial-text-toggle { color: var(--green); font-weight: 800; }
.trial-text-card[open] .trial-text-toggle::after { content: "Скрыть"; }
.trial-text-card[open] .trial-text-toggle { font-size: 0; }
.trial-text-card[open] .trial-text-toggle::after { font-size: 15px; }
.trial-text-content { padding: 0 17px 17px; border-top: 1px solid var(--line); }
.trial-text-heading { display: flex; padding: 16px 0 12px; align-items: start; justify-content: space-between; gap: 14px; }
.trial-text-heading h4 { margin: 0 0 3px; font-size: 20px; }
.trial-text-another { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.trial-text-another:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.trial-text-another:disabled { cursor: wait; opacity: .6; }
.trial-text-scroll { max-height: min(42vh,390px); padding: 16px 18px; border-radius: 15px; background: #f8f1e6; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.trial-text-scroll p { margin: 0 0 1em; color: var(--ink); font-size: 18px; line-height: 1.7; }
.trial-text-scroll p:last-child { margin-bottom: 0; }
.trial-text-source { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.record-control { display: grid; justify-items: center; gap: 16px; padding: 28px 18px; border-radius: 24px; background: #f8f1e6; text-align: center; overflow: hidden; }
.record-live { display: flex; align-items: center; gap: 9px; color: #a93a31; }
.record-live[hidden], .record-signal[hidden], .trial-congratulation-fallback[hidden] { display: none; }
.record-live time { min-width: 52px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 850; }
.record-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #bd3d33; animation: live-dot 2.2s ease-in-out infinite; }
.record-signal { display: flex; width: min(100%, 330px); height: 58px; align-items: center; justify-content: center; gap: 7px; padding: 8px 18px; border-radius: 18px; background: rgba(255,255,255,.72); }
.record-signal span { width: 7px; height: 38px; border-radius: 999px; background: linear-gradient(180deg,#f09a79,#df604d); transform: scaleY(.24); transition: transform .28s ease-out; }
.record-signal[data-reactive="false"] span { animation: signal-breathe 2.8s ease-in-out infinite alternate; }
.record-signal[data-reactive="false"] span:nth-child(2), .record-signal[data-reactive="false"] span:nth-child(8) { animation-delay: -.4s; }
.record-signal[data-reactive="false"] span:nth-child(3), .record-signal[data-reactive="false"] span:nth-child(7) { animation-delay: -.8s; }
.record-signal[data-reactive="false"] span:nth-child(4), .record-signal[data-reactive="false"] span:nth-child(6) { animation-delay: -1.2s; }
.record-signal[data-reactive="false"] span:nth-child(5) { animation-delay: -1.6s; }
.record-button { display: inline-grid; min-width: 124px; min-height: 88px; padding: 16px 22px; place-items: center; border: 0; border-radius: 44px; background: var(--coral); color: white; font: inherit; font-weight: 850; cursor: pointer; box-shadow: 0 12px 28px rgba(239,118,93,.28); }
.record-button[data-recording="true"] { background: #b73c32; box-shadow: 0 10px 24px rgba(183,60,50,.24); }
.record-button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.record-button:disabled { cursor: wait; opacity: .72; }
.record-hint { max-width: 360px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.record-status { min-height: 24px; margin: 0; color: var(--muted); }
.book-loader { display: grid; min-height: 330px; place-items: center; align-content: center; gap: 16px; padding: 28px 18px; text-align: center; }
.book-loader > strong { font-size: 24px; }
.book-loader > span { max-width: 390px; color: var(--muted); line-height: 1.55; }
.trial-secondary { min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--green); font: inherit; font-weight: 800; cursor: pointer; }
.trial-secondary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.book-loader-art { position: relative; width: 190px; height: 144px; perspective: 900px; }
.book-loader-glow { position: absolute; inset: 24px 20px 5px; border-radius: 50%; background: radial-gradient(circle,rgba(241,189,98,.33),rgba(241,189,98,0) 68%); animation: loader-glow 3.4s ease-in-out infinite; }
.book-loader-book { position: absolute; left: 18px; top: 43px; width: 154px; height: 82px; filter: drop-shadow(0 16px 13px rgba(51,70,61,.18)); animation: book-float 3.4s ease-in-out infinite; }
.book-page { position: absolute; top: 0; width: 77px; height: 76px; border: 1px solid rgba(41,61,54,.12); background-color: #fffdf7; background-image: repeating-linear-gradient(to bottom,transparent 0 12px,rgba(47,111,93,.16) 12px 14px); background-size: 45px 100%; background-position: center; background-repeat: no-repeat; }
.book-page-left { left: 0; border-radius: 12px 3px 8px 15px; transform: skewY(6deg); box-shadow: inset 7px -5px 0 rgba(239,118,93,.16); }
.book-page-right { right: 0; border-radius: 3px 12px 15px 8px; transform: skewY(-6deg); box-shadow: inset -7px -5px 0 rgba(239,118,93,.16); }
.book-page-turning { left: 77px; z-index: 2; border-radius: 3px 12px 15px 8px; transform-origin: left center; animation: turn-page 2.9s cubic-bezier(.55,.08,.35,.98) infinite; backface-visibility: hidden; }
.book-spine { position: absolute; z-index: 3; left: 75px; top: 2px; width: 4px; height: 76px; border-radius: 99px; background: linear-gradient(#da6854,#ef9175); box-shadow: 0 2px 6px rgba(47,111,93,.16); }
.book-loader-spark { position: absolute; color: var(--yellow); animation: loader-spark 3.4s ease-in-out infinite; }
.book-loader-spark-one { left: 17px; top: 30px; color: var(--coral); font-size: 22px; }
.book-loader-spark-two { right: 18px; top: 10px; font-size: 27px; animation-delay: -.8s; }
.book-loader-spark-three { right: 5px; bottom: 12px; color: var(--green); font-size: 28px; animation-delay: -1.6s; }
.trial-congratulation { display: grid; grid-template-columns: 156px 1fr; align-items: stretch; min-height: 156px; margin: 0 0 16px; border-radius: 22px; background: #e6efdf; overflow: hidden; }
.trial-congratulation img, .trial-congratulation-fallback { display: block; width: 156px; height: 156px; object-fit: cover; }
.trial-congratulation-fallback { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #fff5d9 0 18%, transparent 19%), linear-gradient(145deg,#dcebd8,#f4d9a8); }
.congratulation-book { font-size: 54px; filter: drop-shadow(0 10px 10px rgba(47,111,93,.18)); transform: rotate(-4deg); }
.congratulation-star { position: absolute; color: var(--coral); font-size: 22px; animation: star-pop 2.6s ease-in-out infinite; }
.star-one { left: 20%; top: 23%; }
.star-two { right: 20%; top: 17%; color: var(--yellow); animation-delay: .35s; }
.star-three { right: 24%; bottom: 23%; color: var(--green); font-size: 18px; animation-delay: .7s; }
.trial-congratulation figcaption { display: grid; align-content: center; gap: 5px; padding: 16px 20px; text-align: left; }
.trial-congratulation figcaption strong { font-size: 21px; }
.trial-congratulation figcaption span { color: var(--muted); line-height: 1.45; }
.trial-result-content > p { margin: 0; color: var(--muted); line-height: 1.55; }
.trial-result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0; }
.trial-result-grid div { padding: 13px 15px; border-radius: 16px; background: #f3eadb; }
.trial-result-grid strong { display: block; font-size: 23px; }
.trial-result-grid span { color: var(--muted); font-size: 12px; }
.trial-feedback { display: grid; gap: 12px; }
.trial-feedback article { padding: 13px 15px; border-left: 4px solid var(--green); border-radius: 0 15px 15px 0; background: #eef4eb; }
.trial-feedback strong { display: block; margin-bottom: 5px; }
.save-gate { display: grid; grid-template-columns: minmax(170px,.78fr) minmax(300px,1.45fr); gap: 18px; align-items: start; margin-top: 16px; padding: 18px; border-radius: 20px; background: #2f6f5d; color: #fff; }
.save-gate h4 { margin: 0 0 8px; font-size: 22px; }
.save-gate p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.45; }
.save-copy { display: grid; align-content: start; gap: 0; }
.save-flow { display: grid; gap: 12px; }
.trial-child-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.trial-child-form[hidden] { display: none; }
.trial-child-form label { color: rgba(255,255,255,.8); }
.trial-child-form input { min-height: 48px; }
.trial-child-form .button { min-height: 48px; border: 0; }
.trial-registration-options { display: grid; gap: 12px; }
.trial-registration-options[hidden] { display: none; }
.trial-registration-options > p { font-size: 14px; }
.trial-auth-form { display: grid; grid-template-columns: 1fr; gap: 9px; }
.trial-auth-form label { color: rgba(255,255,255,.8); }
.trial-auth-form input { min-height: 48px; }
.trial-auth-form button { border: 0; }
.save-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: center; }
.save-actions > span { color: rgba(255,255,255,.6); font-size: 13px; text-align: center; }
.save-actions .button { width: 100%; min-height: 50px; padding-inline: 14px; }
.save-success { padding: 18px; border-radius: 18px; background: #dbeadd; color: #255346; font-weight: 800; }
.trial-again { width: 100%; margin-top: 16px; }
.trial-again:disabled { cursor: wait; opacity: .72; }
.save-login { margin-top: 16px !important; font-size: 14px; }
.save-login a { color: #fff; font-weight: 800; }
.trial-error { margin: 16px 0 0; color: #a94635; line-height: 1.45; }
@keyframes live-dot { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes signal-breathe { 0% { transform: scaleY(.24); } 100% { transform: scaleY(.68); } }
@keyframes book-float { 0%,100% { transform: translateY(2px) rotate(-.5deg); } 50% { transform: translateY(-5px) rotate(.5deg); } }
@keyframes loader-glow { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes loader-spark { 0%,100% { opacity: .35; transform: translateY(3px) scale(.9); } 50% { opacity: 1; transform: translateY(-3px) scale(1.08); } }
@keyframes turn-page { 0%,22% { transform: rotateY(0deg) skewY(-6deg); } 72%,100% { transform: rotateY(-180deg) skewY(6deg); } }
@keyframes star-pop { 50% { transform: scale(1.25) rotate(8deg); opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .record-live-dot, .record-signal span, .book-loader-glow, .book-loader-book, .book-page-turning, .book-loader-spark, .congratulation-star { animation: none; } }
@media (max-width: 900px) { .trial-shell { grid-template-columns: 1fr; } .trial-copy { position: static; } }
@media (max-width: 620px) { .trial-section { padding: 20px 0 64px; } .trial-card { min-height: 0; padding: 24px 18px; } .trial-form, .trial-auth-form, .trial-child-form { grid-template-columns: 1fr; } .trial-text-card { margin-top: -4px; } .trial-text-heading { align-items: center; } .trial-text-heading h4 { font-size: 18px; } .trial-text-scroll { max-height: 38vh; padding: 14px; } .trial-text-scroll p { font-size: 17px; line-height: 1.65; } .trial-congratulation { grid-template-columns: 112px 1fr; min-height: 112px; } .trial-congratulation img, .trial-congratulation-fallback { width: 112px; height: 112px; } .trial-congratulation figcaption { padding: 12px 14px; } .trial-congratulation figcaption strong { font-size: 18px; } .trial-congratulation figcaption span { font-size: 13px; } .trial-result-grid { grid-template-columns: repeat(3,1fr); } .trial-result-grid div { padding: 11px 8px; } .trial-result-grid strong { font-size: 20px; } .save-gate { grid-template-columns: 1fr; gap: 16px; } .save-actions { grid-template-columns: 1fr; } .save-actions > span { text-align: center; } }