/* Stage 6 / first three sections. Source: accepted system, revision 5. */
/* Редакция 5, подключена через opening.css. Материал стикеров уточнён 2026-10-30. */
:root {
  --surface-page: #FCFBF8;
  --surface-paper: #FFFFFF;
  --surface-soft: #EEF4FB;
  --surface-selected: #D9E7FC;
  --text-primary: #071A31;
  --text-secondary: #52647A;
  --text-onDark: #FFFFFF;
  --action-primary: #071A31;
  --action-hover: #123559;
  --action-pressed: #041326;
  --action-disabled: #DCE3EC;
  --text-disabled: #526178;
  --link: #2356C8;
  --focus: #2356C8;
  --border-decorative: #D8E1EC;
  --border-control: #718096;
  --accent-blue: #7BAFF9;
  --accent-ice: #CFE2FF;
  --accent-cyan: #B7E6ED;
  --state-error: #B42318;
  --surface-error: #FFF0ED;
  --state-success: #1F6448;
  --surface-success: #E9F6EF;
  --light-blue: #73A2D9;
  --light-cyan: #9AC7DB;
  --light-lavender: #C8BEF4;
  --motion-pink: #EBA9D2;
  --sticker-blue: #7BAFF9;
  --sticker-pink: #F2CEE6;
  --sticker-cream: #FCFBF8;
  --content-max: 1200px;
  --desktop-gutter: 64px;
  --mobile-gutter: 24px;
  --small-mobile-gutter: 16px;
  --section-gap-desktop: 120px;
  --section-gap-mobile: 72px;
  --radius-stage: 40px;
  --radius-stage-mobile: 24px;
  --radius-panel: 28px;
  --radius-screenshot: 14px;
  --radius-button: 16px;
  --radius-icon: 20px;
  --radius-field: 12px;
  --button-height: 56px;
  --button-height-mobile: 52px;
  --glass-inset: 22px;
  --glass-inset-mobile: 16px;
  --glass-blur: 20px;
  --grid-columns-desktop: 12;
  --grid-columns-mobile: 4;
  --grid-gap-desktop: 24px;
  --grid-gap-mobile: 16px;
  --minimum-target: 44px;
  --photo-radius: 24px;
  --photo-tilt-max-deg: 6deg;
  --sticker-tilt-max-deg: 10deg;
  --sticker-max-per-scene: 2;
  --sticker-max-photo-overlap-percent: 15%;
  --control-border-width: 1.5px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --light-peach: #E7C4AB;
  --light-rose: #ECB3DC;
  --light-warm: #FAE9CA;
  --light-deep: #10334D;
  --sticker-lime: #DDF2BA;
  /* Shared sticker material: rectangular tile, white cut edge, soft lifted shadow. */
  --sticker-radius: 22px;
  --sticker-border: 5px solid #FFFFFF;
  --sticker-shadow: 0 6px 0 #071A3108, 0 14px 28px #173B5B18;
}

html{scroll-behavior:smooth;color-scheme:light;scroll-padding-top:32px}
body{background:var(--surface-page);color:var(--text-primary);font-size:18px;line-height:1.55;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}button{font-synthesis:none}a{color:inherit}
img{display:block;max-width:100%}figure{margin:0}h1,h2,h3{font-weight:500}p{margin:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.container{width:min(1200px,calc(100% - 128px));margin-inline:auto}
html[data-preview="first-three"] main>section:nth-of-type(n+4),html[data-preview="first-three"] body>footer{display:none}
.skip-link{position:fixed;left:20px;top:12px;padding:12px;background:white;z-index:100;transform:translateY(-160%)}.skip-link:focus{transform:none}
.site-header{display:flex;align-items:center;justify-content:space-between;height:104px;padding:0;border:0;gap:20px}
.wordmark{font:500 23px/1.2 Unbounded,sans-serif;letter-spacing:-.05em;text-decoration:none;display:flex;align-items:center;gap:9px}

.site-header nav{display:flex;align-items:center;gap:36px}.site-header nav>a{font-size:15px;text-decoration:none;display:flex;gap:12px;align-items:center}.site-header nav>a:hover{text-decoration:underline;text-underline-offset:5px}
.motion-toggle{display:flex;align-items:center;gap:8px;border:1px solid var(--border-decorative);background:transparent;color:var(--text-secondary);padding:9px 12px;border-radius:12px;min-height:44px;font-size:13px}.motion-toggle:hover{background:var(--surface-soft)}
/* Hero A: independent masses; the two flat unfilled shapes reserve future photographs. */
main>.hero-section{padding:68px 0 100px;border:0;min-height:714px;display:grid;grid-template-columns:1.08fr 1fr;gap:28px;align-items:center}
.hero-copy{min-width:0;position:relative;z-index:3;padding-bottom:4px}.eyebrow{font-size:15px;line-height:1.4;color:var(--text-secondary);margin-bottom:26px}
.hero-copy h1{font-size:clamp(42px,4.15vw,60px);line-height:1.16;letter-spacing:-.035em;margin:0 0 30px;max-width:none}
.underlined{position:relative;white-space:nowrap}.underlined:after{content:'';position:absolute;left:0;right:-6px;bottom:-4px;height:7px;border-top:3px solid var(--text-primary);border-radius:50%;transform:rotate(-2deg)}
.hero-copy .lead{font-size:20px;line-height:1.55;max-width:490px;margin-bottom:30px}
.button{min-height:56px;border:0;border-radius:16px;padding:16px 23px;background:var(--action-primary);color:white;font-size:17px;line-height:1.4;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:25px;box-shadow:0 5px 12px #071a310d;transition:background 180ms,transform 240ms cubic-bezier(.22,1,.36,1)}
.button:hover{background:var(--action-hover)}.button:active{background:var(--action-pressed);transform:translateY(0)}.button span[aria-hidden]{font-size:24px;line-height:1}
html[data-motion-input="keyboard"] .button{transform:none!important;transition:none!important}
.hero-collage{position:relative;height:535px;margin-right:-10px;isolation:isolate}
.hero-photo{position:absolute;inset:66px 18px 30px 68px;transform:rotate(4deg);border-radius:26px;overflow:hidden;z-index:2;transition:transform 650ms cubic-bezier(.22,1,.36,1)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:68% center}
.collage-blank{position:absolute}.blank-circle{width:178px;height:178px;left:0;top:0;background:var(--accent-ice);border-radius:50%;z-index:1}
.blank-small{width:180px;height:137px;right:-9px;bottom:0;background:var(--accent-cyan);border-radius:20px;transform:rotate(-7deg);z-index:3}
.sticker{position:absolute;z-index:4;display:grid;place-items:center;background:var(--sticker-pink);border:5px solid var(--surface-page);box-shadow:0 4px 0 #071a3110;transition:transform 400ms cubic-bezier(.22,1,.36,1)}
.sticker-smile{width:106px;height:106px;right:-10px;top:26px;border-radius:48% 45% 44% 49%;transform:rotate(9deg)}
.sticker-hand{width:110px;height:110px;left:13px;bottom:2px;background:#DDF2BA;border-radius:40% 48% 44% 35%;transform:rotate(-10deg)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:not(.motion-paused):not([data-motion-input="keyboard"]) .button:hover:not(:active){transform:translateY(-2px)}
 html:not(.motion-paused):not([data-motion-input="keyboard"]) .hero-collage:hover .hero-photo{transform:rotate(1deg) translateY(-5px)}
 html:not(.motion-paused):not([data-motion-input="keyboard"]) .hero-collage:hover .sticker-hand{transform:rotate(4deg) translateY(-3px)}
}
.doodle{position:absolute;fill:none;stroke:var(--text-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hero-marks{width:82px;height:82px;left:-7px;top:175px;z-index:3;transform:rotate(-15deg)}
.hero-arrow{width:130px;height:90px;right:15px;bottom:135px;z-index:4;transform:rotate(55deg)}
/* Four questions frame a single document. Readable, opaque text and UI. */
main>.problems-section{padding:60px 0 0;border:0}
.problems-section h2{font-size:44px;line-height:1.2;letter-spacing:-.025em;margin:0 0 44px;max-width:900px}
.problem-scene{position:relative;isolation:isolate;height:680px;border-radius:40px;background:#D9E7FC}
.color-field{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:-1;background:#dce8f7;isolation:isolate}
.blur-shape{display:block;position:absolute;filter:blur(44px);border-radius:48% 52% 38% 60%;animation:gradient-orbit var(--duration,18s) ease-in-out infinite alternate;animation-play-state:paused;transform-origin:center}
.b1{width:68%;height:70%;left:-20%;top:25%;background:#ad9adf;--duration:16s;animation-delay:-4s}
.b2{width:65%;height:88%;right:-16%;top:-24%;background:#9ac7db;--duration:20s;animation-delay:-9s;animation-direction:alternate-reverse}
.b3{width:50%;height:65%;left:32%;top:35%;background:#73a2d9;--duration:14s;animation-delay:-2s}
.b4{width:78%;height:22%;left:-15%;top:8%;background:#fcfbf8;filter:blur(55px);--duration:22s;animation-delay:-13s;animation-direction:alternate-reverse}
.color-field.in-view .blur-shape{animation-play-state:running}
@keyframes gradient-orbit{0%{translate:-14% 9%;rotate:-16deg;scale:1.06}50%{translate:6% -12%;rotate:5deg;scale:1.14}100%{translate:16% 7%;rotate:20deg;scale:1.04}}
.document-track{position:absolute;width:430px;left:calc(50% - 215px);top:54px;perspective:1200px}
.document-glass{padding:22px;background:rgb(255 255 255 / 26%);border:1.5px solid rgb(255 255 255 / 93%);border-radius:34px;box-shadow:inset 0 2px 1px #fff,inset 0 -2px 2px #ffffff70,0 24px 55px #15385735;backdrop-filter:blur(20px);position:relative}
.document-glass:before{content:'';position:absolute;inset:6px;border:1px solid #ffffff80;border-radius:28px;pointer-events:none}
.document-crop{display:block;border:0;padding:0;position:relative;width:100%;aspect-ratio:.78;border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in}
.document-crop img{height:100%;width:181%;max-width:none;object-fit:cover;object-position:center;transform:translateX(-27.35%);opacity:1}
.document-caption{text-align:center;font-size:13px;color:#334961;margin-top:16px}.document-caption span{margin-left:8px}
.problem-question{position:absolute;width:230px;z-index:3}.problem-question p{font-size:21px;line-height:1.45;letter-spacing:-.02em;margin:16px 0 0}.question-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fcfbf8;border:2px solid #ffffffdd;transform:rotate(-5deg)}
.question-footnote{left:48px;top:66px}.question-footnote .question-icon{background:#F2CEE6}.question-figures{right:38px;top:70px}.question-figures .question-icon{background:#CFE2FF;transform:rotate(6deg)}
.question-lines{left:48px;bottom:74px}.question-lines .question-icon{background:#DDF2BA;transform:rotate(5deg)}.question-sources{right:38px;bottom:74px}.question-sources .question-icon{background:#DED2F5;transform:rotate(-6deg)}
.question-arrow{width:94px;height:65px;right:-34px;bottom:-48px;transform:rotate(-28deg)}
.question-figures .question-arrow,.question-sources .question-arrow{right:auto;left:-46px;transform:scaleX(-1) rotate(-18deg)}
.question-lines .question-arrow{bottom:85px;right:-48px;transform:rotate(-40deg)}.question-sources .question-arrow{bottom:90px;left:-114px}
/* Story beat. One photo example is deliberately reused, text sits on opaque paper. */
main>.edit-section{padding:120px 0 104px;border:0}
.edit-scene{height:680px;position:relative;border-radius:32px;background:#dbe4e8;isolation:isolate}
.edit-photo{width:100%;height:100%;object-fit:cover;object-position:60% center;border-radius:32px}
.edit-copy{position:absolute;bottom:38px;left:-1px;width:545px;padding:36px 38px 38px 0;background:var(--surface-page);border-radius:0 28px 28px 0}
.edit-copy h2{font-size:36px;line-height:1.23;letter-spacing:-.03em;margin:0 0 22px}.edit-copy p{font-size:18px;line-height:1.55;max-width:430px}
.chat-message{position:absolute;top:52px;left:55px;padding:20px 28px;background:var(--sticker-pink);border:5px solid var(--surface-page);border-radius:22px;transform:rotate(-6deg);box-shadow:0 6px 0 #071a3112;font-size:28px;line-height:1.2;font-family:Unbounded,sans-serif}
.chat-message svg{position:absolute;width:30px;height:26px;bottom:-23px;left:32px;fill:var(--sticker-pink);stroke:var(--surface-page);stroke-width:4;stroke-linejoin:round}
.message-marks{width:75px;height:75px;left:340px;top:29px;transform:rotate(100deg);stroke:var(--surface-page)}
/* Motion uses the accepted native adaptation of Magic UI blurInUp, once per heading. */
.reveal-word{white-space:nowrap;display:inline-block}.reveal-char{display:inline-block}
.text-enter .reveal-char{animation:character-in 320ms cubic-bezier(.22,1,.36,1) calc(var(--char)*var(--char-step,8ms)) both}
@keyframes character-in{0%{opacity:0;filter:blur(10px);transform:translateY(20px);text-shadow:-7px 0 10px #77acff}28%{opacity:.7;filter:blur(6px);transform:translateY(10px);text-shadow:-5px 0 10px #6d9fff}53%{opacity:1;filter:blur(2px);transform:translateY(3px);text-shadow:4px 0 9px #eaa3d6}100%{opacity:1;filter:none;transform:none;text-shadow:none}}
.collage-enter .hero-photo{animation:photo-in 450ms cubic-bezier(.22,1,.36,1) both}.collage-enter .blank-circle,.collage-enter .blank-small,.collage-enter .sticker{animation:shape-in 380ms cubic-bezier(.22,1,.36,1) 60ms both}
@keyframes photo-in{from{translate:40px 40px;rotate:5deg;opacity:0}to{translate:0 0;rotate:0deg;opacity:1}}
@keyframes shape-in{from{scale:.85;translate:0 20px;opacity:0}to{scale:1;translate:0 0;opacity:1}}
.reveal-enter{animation:section-in 380ms cubic-bezier(.22,1,.36,1) calc(var(--order,0)*60ms) both}
@keyframes section-in{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
.document-track.reveal-enter{animation:document-in 500ms cubic-bezier(.22,1,.36,1) both}
@keyframes document-in{from{transform:translateY(70px) rotateY(-12deg) rotateZ(4deg)}to{transform:translateY(0) rotateY(0) rotateZ(0)}}
.reveal-enter .question-arrow path{animation:draw-in 320ms ease calc(120ms + var(--order,0)*60ms) both}
@keyframes draw-in{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.motion-paused{scroll-behavior:auto}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-paused .reveal-char,.motion-paused [data-reveal],.motion-paused .hero-collage>*{animation:none!important}
/* Media preview dialog styles. */
dialog{color:var(--text-primary);border:1px solid var(--border-decorative);border-radius:24px;padding:32px;background:var(--surface-paper);box-shadow:0 24px 80px #071a3130;max-height:calc(100dvh - 48px)}
dialog::backdrop{background:#071a315c;backdrop-filter:blur(5px)}.screen-close{border:0;border-radius:50%;width:44px;height:44px;background:var(--surface-soft);color:var(--text-primary);font-size:26px;top:14px;right:14px}
#screen-dialog{width:min(1300px,calc(100% - 48px));padding:60px 20px 20px}#screen-dialog img{width:auto;max-height:calc(100dvh - 180px);margin:auto;object-fit:contain;border-radius:8px}#screen-dialog p{text-align:center;font-size:13px;color:var(--text-secondary);margin-top:14px}.screen-close{position:absolute}
@supports not (backdrop-filter:blur(20px)){.document-glass{background:#e8eff9}}
@media(prefers-reduced-transparency:reduce){.document-glass{background:#e8eff9;backdrop-filter:none}}
@media(min-width:1600px){main>.hero-section{min-height:760px}.hero-copy h1{font-size:60px}}
@media(max-width:1199px){.container{width:calc(100% - 80px)}.hero-copy h1{font-size:46px}.hero-copy .lead{font-size:18px}.hero-collage{height:480px}.hero-photo{inset:60px 12px 30px 30px}.blank-circle{width:148px;height:148px}.blank-small{width:145px;height:120px}.sticker-smile{right:-16px;width:92px;height:92px}.sticker-hand{left:-5px;width:92px;height:92px}.sticker img{width:65px;height:65px}.hero-marks{left:-30px}.document-track{width:360px;left:calc(50% - 180px);top:84px}.problem-question{width:195px}.problem-question p{font-size:19px}.question-footnote,.question-lines{left:28px}.question-figures,.question-sources{right:20px}.question-arrow{width:72px;right:-12px}.question-figures .question-arrow,.question-sources .question-arrow{left:-16px}.question-lines .question-arrow{right:-20px}.question-sources .question-arrow{left:-88px}.problem-scene{height:660px}.edit-copy{width:475px}.edit-copy h2{font-size:32px}}
@media(max-width:999px){.container{width:calc(100% - 64px)}main>.hero-section{grid-template-columns:minmax(0,1fr);gap:44px;padding:48px 0 64px;min-height:0}.hero-copy{max-width:650px}.hero-copy h1{font-size:56px}.hero-copy .lead{max-width:540px;font-size:20px}.hero-collage{width:540px;max-width:100%;height:535px;margin:0 auto}.hero-photo{inset:66px 18px 30px 68px}.hero-marks{left:-7px}.blank-circle{width:178px;height:178px}.blank-small{width:180px;height:137px}.problem-scene{height:880px}.document-track{top:40px;width:370px;left:calc(50% - 185px)}.problem-question{width:calc(50% - 70px)}.problem-question p{font-size:18px;margin-top:10px}.question-footnote,.question-figures{top:575px;bottom:auto}.question-lines,.question-sources{top:725px;bottom:auto}.question-footnote,.question-lines{left:40px}.question-figures,.question-sources{right:40px}.question-icon{width:44px;height:44px}.question-arrow{display:none}.edit-scene{height:800px}.edit-copy{width:85%;bottom:-1px;left:-1px;padding:32px 32px 8px 0;border-radius:0 24px 0 0}.edit-copy h2{font-size:34px}.edit-copy p{max-width:530px}.edit-photo{object-position:66% center}.chat-message{left:32px;top:40px;font-size:24px}.message-marks{left:280px}}
@media(max-width:760px){.container{width:calc(100% - 48px)}.site-header{height:88px;gap:12px}.wordmark{font-size:18px;gap:5px}.brand-dot{font-size:30px;transform:translateY(5px)}.site-header nav{gap:12px}.site-header nav>a{font-size:13px;gap:5px}.motion-toggle{padding:10px;border-color:transparent}.motion-toggle span{display:none}main>.hero-section{padding-top:34px;padding-bottom:44px;gap:34px}.eyebrow{font-size:13px;margin-bottom:21px}.hero-copy h1{font-size:34px;line-height:1.18;letter-spacing:-.035em;margin-bottom:24px}.underlined:after{border-top-width:2px;bottom:-5px}.hero-copy .lead{font-size:17px;line-height:1.55;margin-bottom:25px}.hero-copy .button{width:100%;font-size:15px;gap:15px;min-height:54px;padding:14px 16px}.hero-collage{height:360px}.hero-photo{inset:42px 12px 22px 36px;border-radius:20px}.blank-circle{width:118px;height:118px;left:0}.blank-small{width:112px;height:90px;right:-4px;border-radius:16px}.sticker-smile{width:76px;height:76px;top:10px;right:-7px;border-width:4px}.sticker-hand{width:78px;height:78px;left:0;bottom:0;border-width:4px}.sticker img{width:51px;height:51px}.hero-marks{width:56px;height:56px;top:105px;left:-12px}.hero-arrow{width:80px;height:60px;right:0;bottom:92px}.problems-section h2{font-size:28px;line-height:1.22;margin-bottom:28px}main>.problems-section{padding-top:40px}.problem-scene{height:auto;display:flex;flex-direction:column;gap:0;padding:28px 22px 24px;border-radius:24px}.document-track{position:relative;width:100%;left:auto;top:auto;margin:0 0 28px}.document-glass{padding:16px;border-radius:28px}.document-glass:before{border-radius:22px}.document-crop{border-radius:12px}.document-caption{font-size:12px;margin-top:12px}.problem-question{position:relative;inset:auto;width:auto;display:flex;align-items:center;gap:16px;padding:16px 0;min-height:88px}.problem-question p{font-size:17px;line-height:1.4;margin:0;letter-spacing:0}.problem-question p br{display:none}.question-icon{flex:none;width:44px;height:44px;border-radius:13px}.question-icon img{width:28px;height:28px}.blur-shape{filter:blur(34px)}main>.edit-section{padding:72px 0 64px}.edit-scene{height:auto;background:transparent}.edit-photo{height:410px;border-radius:24px;object-position:67% center}.chat-message{left:16px;top:22px;font-size:18px;padding:16px 18px;border-width:4px;border-radius:16px}.message-marks{left:210px;top:8px;width:50px;height:50px}.edit-copy{position:relative;inset:auto;width:100%;padding:30px 0 0;border-radius:0}.edit-copy h2{font-size:28px;line-height:1.24;margin-bottom:18px}.edit-copy p{font-size:17px}.document-track.reveal-enter{animation-name:section-in}dialog{padding:24px 20px;border-radius:20px}}
@media(max-width:360px){.container{width:calc(100% - 32px)}.hero-copy h1{font-size:30px}.site-header nav>a{font-size:12px}.site-header nav{gap:2px}.wordmark{font-size:16px}.problems-section h2,.edit-copy h2{font-size:25px}.hero-collage{height:335px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.blur-shape{translate:none;rotate:none;scale:none}.reveal-char{opacity:1;filter:none;transform:none}.button{transition:background-color 160ms ease!important}}

/* Persistent entry point with a softly blurred wordmark backdrop. */
.site-header .wordmark{position:fixed;top:32px;left:max(58px,calc((100vw - 1212px)/2));z-index:50;color:var(--text-primary);padding:6px;border-radius:10px;background:rgb(252 251 248 / 62%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-login{position:fixed;top:32px;right:max(64px,calc((100vw - 1200px)/2));z-index:51;min-height:40px;height:40px;padding:0 18px;border-radius:10px;font-size:14px;line-height:1;box-shadow:0 4px 14px #071a3133}
.header-login::before{content:"";position:absolute;inset:-6px}
@media(max-width:1199px){.site-header .wordmark{left:34px}.header-login{right:40px}}
@media(max-width:999px){.site-header .wordmark{left:26px}.header-login{right:32px}}
@media(max-width:760px){.site-header{height:0}.site-header .wordmark{display:none}.header-login{top:auto;right:24px;bottom:max(20px,env(safe-area-inset-bottom));z-index:51}.site-footer{padding-bottom:76px}}
@media(max-width:360px){.header-login{right:16px}}