/* Create page: a studio with a scene stepper. Shared shell, tokens and buttons come from storefront.css. */
@font-face { font-family: 'Onest'; src: url('/assets/fonts/Onest-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

.cr { --surface: var(--panel); --ink: var(--text); --peach: #fff6f0; --sage: #dde4d7; --ok: #5d7a58; }
.cr [hidden] { display: none !important; }

/* Buttons */
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; font: 600 16px/1 'Onest', 'Manrope', 'Segoe UI', sans-serif; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .25s, box-shadow .25s, opacity .25s; }
.cr-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.cr-btn-p { background: var(--accent); color: var(--ink) !important; box-shadow: 0 10px 30px -12px rgba(181,83,61,.55); }
.cr-btn-p:hover:not(:disabled) { background: #ef9479; transform: translateY(-2px); }
.cr-btn-d { background: var(--ink); color: var(--bg) !important; }
.cr-btn-d:hover:not(:disabled) { background: #3a443f; }
.cr-btn-o { background: none; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.cr-btn-o:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cr-btn.is-muted { opacity: .55; }

/* Heading */
.cr .sf-crumbs { margin: 4px 0 10px; }
.cr .sf-crumbs a { color: var(--muted); }
.cr-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; padding-block: 0 28px; }
.cr-top h1 { margin: 0; font-size: clamp(36px, 4.4vw, 64px); font-weight: 760; line-height: .96; letter-spacing: -.045em; }
.cr-top p { margin: 0; max-width: 44ch; color: var(--muted); font-size: 17px; line-height: 1.55; }
.cr-top b { color: var(--ink); }

/* Stepper */
.cr-stepper { position: relative; margin: 0 0 28px; }
.cr-stepper ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cr-track { position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: var(--line); }
.cr-track i { position: absolute; inset: 0; border-radius: 3px; background: var(--accent-2); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.cr-node { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.cr-node button { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--muted); font: 700 16px 'Onest', 'Manrope', sans-serif; transition: transform .4s var(--spring), background .4s, border-color .4s, color .4s, box-shadow .4s; }
.cr-node button:disabled { cursor: default; }
.cr-node.is-complete button { border-color: var(--accent-2); background: var(--accent-2); color: var(--bg); cursor: pointer; }
.cr-node.is-complete button span { font-size: 0; }
.cr-node.is-complete button span::before { content: '✓'; font-size: 16px; }
.cr-node.is-complete button:not(:disabled):hover { transform: scale(1.08); }
.cr-node.is-current button { border-color: var(--ink); background: var(--ink); color: var(--bg); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(41,49,45,.08); }
.cr-node b { font-size: 15px; }
.cr-node small { color: var(--muted); font-size: 13px; }
.cr-node:not(.is-current):not(.is-complete) b { color: var(--muted); }

/* Studio */
.cr-studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.cr-panels { padding: clamp(22px, 2.6vw, 34px); border-radius: 30px; background: var(--surface); border: 1.5px solid var(--line); }
.cr-panel { animation: cr-panel-in .45s var(--ease); }
@keyframes cr-panel-in { from { opacity: 0; transform: translateX(-16px); } }
.cr-panel h2 { margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 740; letter-spacing: -.03em; line-height: 1.1; }
.cr-panel h2:focus { outline: none; }
.cr-lead { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.cr-navrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 26px; }
.cr-navrow #backButton { margin-right: auto; }
.cr-status { min-height: 1em; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cr-status.is-error { color: #8a3a28; font-weight: 600; }
.cr-status:empty { min-height: 0; margin: 0; }
.cr-fine { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Step 1: photo */
.cr-drop { position: relative; display: grid; place-items: center; min-height: 200px; padding: 24px; border: 2px dashed #cfc6b6; border-radius: 22px; background: #fbf6ef; text-align: center; cursor: pointer; transition: border-color .25s, background .25s; }
.cr-drop:hover, .cr-drop.is-dragging { border-color: var(--accent-2); background: var(--peach); }
.cr-drop.is-busy { cursor: progress; opacity: .7; }
.cr-drop-empty { display: grid; justify-items: center; gap: 10px; color: var(--accent-2); }
.cr-drop-empty b { color: var(--ink); font-size: 17px; }
.cr-drop-empty span { color: var(--muted); font-size: 14px; }
.cr-drop:has(.cr-okline:not([hidden])) { min-height: 0; padding: 0; border: 0; background: none; cursor: default; }
.cr-okline { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border-radius: 18px; background: #eef3ea; text-align: left; }
.cr-okline img { flex: none; width: 52px; height: 64px; object-fit: cover; border-radius: 10px; }
.cr-okline-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-okline-copy > span { display: grid; gap: 2px; min-width: 0; }
.cr-okline small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cr-tick { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: var(--bg); font-size: 12px; font-style: normal; animation: cr-pop .45s var(--spring); }
@keyframes cr-pop { from { transform: scale(.2); } }
.cr-photo-actions { display: flex; gap: 8px; margin-top: 6px; }
.cr-linkbtn { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 500 14px 'Onest', 'Manrope', sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cr-linkbtn:hover { color: var(--accent-2); }
/* What the base price covers: one line by default, the full rule on tap. */
.cr-rule { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--sage); color: var(--ink); font-size: 14px; line-height: 1.45; }
.cr-rule summary { display: grid; gap: 4px; cursor: pointer; list-style: none; }
.cr-rule summary::-webkit-details-marker { display: none; }
.cr-rule summary i { justify-self: start; color: #4b524c; font-style: normal; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cr-rule summary i::after { content: '+'; text-decoration: none; display: inline-block; margin-left: 4px; }
.cr-rule[open] summary i::after { content: '−'; }
.cr-rule summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 8px; }
.cr-rule p { margin: 8px 0 0; color: #4b524c; }
.cr-tips { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.cr-tips li { display: flex; gap: 10px; align-items: baseline; }
.cr-tips i { font-style: normal; font-weight: 700; }
.cr-tips .is-yes i { color: var(--ok); }
.cr-tips .is-no i { color: var(--accent-2); }

/* Step 2: style */
.cr-opts { display: grid; gap: 10px; }
.cr-opt { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 10px 14px 10px 10px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--spring); }
.cr-opt:hover { transform: translateX(4px); }
.cr-opt[aria-pressed="true"] { border-color: var(--accent-2); background: var(--peach); }
.cr-opt img { width: 64px; height: 76px; object-fit: cover; object-position: 50% 8%; border-radius: 12px; background: #ebe4dd; }
.cr-opt b { display: block; font-size: 18px; }
.cr-opt small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.cr-opt i { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--line); border-radius: 50%; font-style: normal; font-size: 12px; color: transparent; transition: all .35s var(--spring); }
.cr-opt[aria-pressed="true"] i { border-color: var(--accent-2); background: var(--accent-2); color: var(--bg); }

/* Step 3: size */
.cr-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cr-sizes button { display: grid; gap: 4px; min-height: 84px; place-content: center; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); font: 700 24px 'Onest', 'Manrope', sans-serif; cursor: pointer; transition: background .3s var(--ease), color .3s, border-color .3s; }
.cr-sizes button small { font-size: 12px; font-weight: 500; color: var(--muted); }
.cr-sizes button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.cr-sizes button[aria-pressed="true"] small { color: #c9ccc4; }

/* Step 4: confirmation, progress and result */
.cr-tg { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--sage); }
.cr-tg-head { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.cr-tg p { margin: 0; color: #4b524c; font-size: 14px; line-height: 1.5; }
.cr-tg .cr-tg-state { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 600; }
.cr-tg-state .cr-spin, .cr-tg-state .cr-tick { display: none; }
.cr-tg[data-state="wait"] .cr-spin, .cr-tg[data-state="ok"] .cr-tick { display: grid; }
.cr-tg[data-state="off"] .cr-tg-state { color: var(--accent-2); }
.cr-tg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cr-tg[data-state="ok"] .cr-tg-actions { display: none; }
.cr-spin { width: 18px; height: 18px; border: 2px solid rgba(41,49,45,.2); border-top-color: var(--ink); border-radius: 50%; animation: cr-spin .8s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.cr-consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent-2); }
.cr-consent.is-alert { color: #8a3a28; }
.cr-consent.is-alert input { outline: 2px solid #c4573f; outline-offset: 2px; }
/* Confirmed in Telegram: one calm line instead of the whole block. */
.cr-quota { margin: 0; padding: 12px 16px; border-radius: 16px; background: #eef3ea; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; }
.cr-quota.is-limit { background: #fbe9e3; color: #8a3a28; }
/* Why «Создать эскиз» cannot start yet. */
.cr-hint { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: right; }
.cr-hint.is-alert { color: #8a3a28; font-weight: 600; animation: cr-nudge .4s var(--ease); }
@keyframes cr-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cr-error .cr-linkbtn { display: block; min-height: 32px; margin-top: 4px; padding: 0; color: #8a3a28; font-weight: 600; }
.cr-btn-s { min-height: 40px; padding: 0 16px; font-size: 14px; }
.cr-prog { display: grid; gap: 8px; margin-top: 20px; }
.cr-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.cr-bar i { display: block; width: 0; height: 100%; background: var(--accent-2); transition: width .6s var(--ease); }
.cr-prog-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; }
.cr-prog .cr-fine { margin: 0; }
.cr-error { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #fbe9e3; color: #8a3a28; font-size: 14px; line-height: 1.5; }
.cr-result { display: grid; gap: 12px; margin-top: 20px; padding: 20px; border-radius: 20px; background: var(--peach); border: 1.5px solid #f0cbb9; animation: cr-panel-in .5s var(--ease); }
.cr-result h3 { margin: 0; font-size: 20px; }
.cr-result p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 15px; }
.cr-result .cr-result-note { padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; }
.cr-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cr-result h3:focus { outline: none; }
/* Wide screens keep the original order: text first, then the buttons (the views are in the scene there). */
@media (min-width: 981px) { .cr-result-actions, #addPersonalStatus { order: 1; } .cr-result > .cr-fine { order: 2; } }
/* Big swipeable views of the result (narrow screens, where the scene thumbnails are tiny). */
.cr-gal, .cr-gal-dots { display: none; }
.cr-gal-slide { position: relative; display: block; aspect-ratio: 420 / 628; border-radius: 18px; overflow: clip; background: #efe2d4; scroll-snap-align: center; text-decoration: none; }
.cr-gal-slide img { width: 100%; height: 100%; object-fit: cover; }
.cr-gal-slide span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255,253,250,.94); color: var(--ink); font-size: 13px; font-weight: 600; }
.cr-gal-dots { justify-content: center; gap: 6px; }
.cr-gal-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e3c6b4; transition: background .25s, transform .25s; }
.cr-gal-dots i.is-on { background: var(--accent-2); transform: scale(1.25); }
/* Earlier sketches of this session, each can go to the cart. */
.cr-sketches { display: grid; gap: 10px; margin-top: 18px; }
.cr-sketches h3 { margin: 0; font-size: 17px; }
.cr-sketches ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-sk-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); }
.cr-sk-item img { width: 44px; height: 60px; object-fit: cover; object-position: 50% 12%; border-radius: 10px; background: #efe2d4; }
.cr-sk-item span { display: grid; gap: 2px; min-width: 0; }
.cr-sk-item small { color: var(--muted); font-size: 13px; }
.cr-sk-item .cr-linkbtn { min-height: 40px; }
.cr-saved { display: block; margin: 10px auto 0; color: var(--accent-2); font-weight: 600; }
/* Phone-only pieces of the page; shown in the max-width: 640px block below. */
.cr-h1-more, .cr-hero, .cr-trust, .cr-drop-cta, .cr-pick { display: none; }
.cr-scene.s1:not(.is-away) { cursor: pointer; }

/* The scene: the figurine is assembled here step by step. */
.cr-side { position: sticky; top: calc(var(--header-h) + 16px); }
.cr-scene { position: relative; height: 660px; border-radius: 34px; overflow: clip; background: radial-gradient(110% 80% at 60% 20%, #fcf4ea 0%, #f3e4d5 60%, #ecd7c5 100%); }
.cr-plank { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(#ead9c6 0 12px, #d7bea4 12px 100%); }
.cr-pol { position: absolute; z-index: 4; left: 50%; top: 50%; width: 300px; margin: 0; padding: 14px 14px 46px; background: #fff; border-radius: 6px; box-shadow: 0 30px 50px -28px rgba(41,49,45,.55); transform: translate(-50%, -56%) rotate(-3deg); transition: transform .9s var(--spring), opacity .4s; animation: cr-pol-in .9s var(--spring); }
.cr-pol::before { content: ''; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; background: rgba(235,135,105,.45); transform: translateX(-50%) rotate(2deg); }
.cr-pol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: #eee; }
.cr-pol figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 14px; color: var(--muted); }
@keyframes cr-pol-in { from { opacity: 0; transform: translate(-50%, -120%) rotate(-14deg); } }
.cr-scene.is-away .cr-pol { transform: translate(-50%, -50%) translate(-235px, -205px) rotate(-8deg) scale(.42); }
.cr-pol-empty { position: absolute; z-index: 4; left: 50%; top: 46%; display: grid; justify-items: center; gap: 14px; width: max-content; max-width: 90%; transform: translate(-50%, -50%); color: var(--accent-2); text-align: center; font-weight: 600; transition: opacity .4s; }
.cr-pol-empty span { max-width: 22ch; color: var(--muted); font-weight: 500; line-height: 1.45; }
.cr-scene:not(.s1) .cr-pol-empty { opacity: 0; }
.cr-style-card { position: absolute; z-index: 3; left: 50%; bottom: 70px; width: 270px; aspect-ratio: 2 / 3; background: #ebe4dd; border-radius: 24px 24px 6px 6px; overflow: clip; box-shadow: 0 30px 50px -30px rgba(41,49,45,.6); transform: translateX(-36%) translateY(30px); opacity: 0; transition: opacity .5s var(--ease), transform .8s var(--spring); }
.cr-style-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s var(--ease); }
.cr-style-card img.is-on { opacity: 1; }
.cr-scene.s2 .cr-style-card { opacity: 1; transform: translateX(-36%); }
.cr-size-set { position: absolute; z-index: 3; left: 0; right: 0; bottom: 70px; top: 120px; opacity: 0; transition: opacity .5s var(--ease); }
.cr-scene.s3 .cr-size-set { opacity: 1; }
.cr-ruler { position: absolute; right: 40px; bottom: 0; width: 40px; height: 100%; border-left: 1.5px solid var(--ink); }
.cr-ruler span { position: absolute; left: -1.5px; display: flex; align-items: center; gap: 6px; transform: translateY(50%); color: var(--muted); font-size: 12px; white-space: nowrap; }
.cr-ruler span::before { content: ''; width: 8px; height: 1.5px; background: var(--ink); }
.cr-sz-row { position: absolute; left: 120px; right: 120px; bottom: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 56px; }
.cr-mug { position: relative; height: 50%; aspect-ratio: .9; display: flex; justify-content: center; }
.cr-mug-body { position: relative; width: 78%; height: 100%; border-radius: 8px 8px 18px 18px; background: #dfe6d9; border: 1.5px solid #9fae99; }
.cr-mug-body::after { content: ''; position: absolute; right: -30%; top: 22%; width: 34%; height: 44%; border: 6px solid #dfe6d9; border-left: 0; border-radius: 0 40px 40px 0; box-shadow: 1.5px 0 0 #9fae99; }
.cr-sfig { position: relative; height: 80%; aspect-ratio: 416 / 941; transition: height .8s var(--spring); }
.cr-sfig img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 52%, transparent 96%); mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 52%, transparent 96%); }
.cr-fan { position: absolute; z-index: 3; left: 50%; bottom: 110px; display: flex; gap: 14px; transform: translateX(-50%) translateY(30px); opacity: 0; transition: opacity .5s var(--ease), transform .8s var(--spring); }
.cr-scene.s4 .cr-fan { opacity: 1; transform: translateX(-46%); }
.cr-vc { position: relative; display: block; width: 130px; aspect-ratio: 416 / 700; border-radius: 16px; overflow: clip; background: #efe2d4; border: 4px solid #fff; box-shadow: 0 20px 30px -20px rgba(41,49,45,.6); transition: transform .8s var(--spring); --p: 0%; }
.cr-vc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.cr-vc .cr-sk { filter: grayscale(1) contrast(1.2) brightness(1.15); opacity: .3; }
.cr-vc .cr-col { clip-path: inset(0 0 calc(100% - var(--p)) 0); transition: clip-path .9s var(--ease); }
.cr-vc .cr-ln { position: absolute; left: 0; right: 0; top: var(--p); height: 2px; background: var(--accent-2); box-shadow: 0 0 16px 4px rgba(235,135,105,.55); transition: top .9s var(--ease); }
.cr-fan.is-wait .cr-ln, .cr-vc.is-complete .cr-ln { display: none; }
.cr-vc > span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(255,253,250,.92); color: var(--ink); font-size: 11px; font-weight: 600; }
.cr-vc.is-complete > span::before { content: '✓ '; color: var(--ok); }
a.cr-vc:hover { transform: translateY(-6px); }
.cr-fan.is-wait .cr-vc:nth-child(1) { transform: rotate(-7deg) translateY(10px); }
.cr-fan.is-wait .cr-vc:nth-child(2) { transform: rotate(-2deg); }
.cr-fan.is-wait .cr-vc:nth-child(3) { transform: rotate(3deg); }
.cr-fan.is-wait .cr-vc:nth-child(4) { transform: rotate(8deg) translateY(12px); }
.cr-badge { position: absolute; z-index: 5; right: 28px; top: 28px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ok); color: var(--bg); font-weight: 700; animation: cr-pop .6s var(--spring); }
.cr-cap { position: absolute; z-index: 5; left: 24px; right: 24px; bottom: 16px; margin: 0; color: #5b4d40; font-size: 14px; font-weight: 600; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cr-chips > span { padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-size: 14px; }

/* SEO block */
.cr-how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); margin-top: 90px; padding-top: 48px; border-top: 1px solid var(--line); }
.cr-how h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.02em; }
.cr-how > div > p { max-width: 62ch; margin: 0 0 20px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.cr-how .sf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-how .sf-faq p { color: var(--muted); line-height: 1.6; }
.cr-how .sf-faq > p { margin-top: 18px; }

@media (max-width: 980px) {
  .cr-studio { grid-template-columns: 1fr; }
  .cr-side { position: relative; top: auto; order: -1; }
  .cr-scene { height: 420px; }
  .cr-pol { width: 200px; }
  .cr-scene.is-away .cr-pol { transform: translate(-50%, -50%) translate(-120px, -130px) rotate(-8deg) scale(.42); }
  .cr-style-card { width: 170px; }
  .cr-vc { width: 74px; border-width: 3px; border-radius: 12px; }
  .cr-vc > span { left: 4px; bottom: 4px; padding: 3px 5px; font-size: 9px; }
  .cr-fan { gap: 8px; bottom: 96px; }
  .cr-scene.s4 .cr-fan { transform: translateX(-50%); }
  .cr-sz-row { left: 40px; right: 90px; gap: 32px; }
  .cr-ruler { right: 20px; }
  .cr-node small { display: none; }
  .cr-node b { font-size: 13px; }
  .cr-how { grid-template-columns: 1fr; }
  .cr-gal { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); gap: 10px; margin: 0 -20px; padding: 2px 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .cr-gal::-webkit-scrollbar { display: none; }
  .cr-gal-dots { display: flex; }
}
@media (max-width: 640px) {
  .cr-top h1 { font-size: 34px; }
  .cr-top p { font-size: 16px; }
  .cr-panels { border-radius: 24px; }
  .cr-how .sf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-navrow .cr-btn { flex: 1 1 auto; }
  .cr-sizes button { font-size: 20px; }
  .cr-cap { left: 16px; right: 16px; font-size: 13px; }
  .cr-badge { right: 16px; top: 16px; padding: 8px 12px; font-size: 14px; }
  /* Compact preview so the step form starts on the first screen. */
  .cr-scene { height: 320px; border-radius: 26px; }
  .cr-pol { width: 150px; }
  .cr-style-card { width: 128px; bottom: 54px; }
  .cr-fan { bottom: 60px; gap: 6px; }
  .cr-vc { width: 64px; }
  .cr-sz-row { left: 32px; right: 76px; gap: 24px; }

  /* Phones (the Instagram ad audience): the first screen repeats the ad — three styles and one big «Загрузить фото». */
  .sf-create { --header-h: 60px; }
  .sf-create .sf-header-in { flex-wrap: nowrap; min-height: 60px; padding-block: 8px; }
  .sf-create .sf-nav, .sf-create .sf-header .sf-cta { display: none; }
  html:has(body.sf-create) { scroll-padding-top: 70px; }
  .cr .sf-crumbs { display: none; }
  .cr-top { gap: 14px; padding-block: 6px 16px; }
  .cr-top h1 { font-size: 30px; line-height: 1.04; letter-spacing: -.035em; }
  .cr-h1-more { display: inline; }
  .cr-top > p { display: none; }
  .cr-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .cr.has-photo .cr-hero, .cr.is-step-4 .cr-hero { display: none; }
  .cr-hero-style { position: relative; display: block; padding: 0; border: 0; border-radius: 18px; overflow: clip; background: #e6e3de; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cr-hero-style img { width: 100%; height: auto; aspect-ratio: 786 / 1060; object-fit: cover; object-position: 50% 0; }
  .cr-hero-style span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 9px; border-radius: 999px; background: rgba(255,253,250,.95); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
  .cr-hero-style[aria-pressed="true"] { outline: 3px solid var(--accent-2); outline-offset: -3px; }
  .cr-hero-style:active { transform: scale(.98); }
  .cr-stepper, .cr-side { display: none; }
  .cr-studio { gap: 0; }
  .cr-panels { padding: 0; border: 0; border-radius: 0; background: none; }
  .cr-panel { animation: none; }
  .cr-panel:not([hidden]) ~ .cr-panel:not([hidden]) { margin-top: 16px; }
  .cr-panel h2 { margin-bottom: 10px; font-size: 21px; }
  .cr.is-step-1 .cr-panel[data-step="1"] > h2, .cr.is-step-1 .cr-lead, .cr-panel[data-step="3"] .cr-fine { display: none; }
  .cr-lead { margin-bottom: 14px; font-size: 14px; }
  /* Step 1: the drop zone becomes the big button. */
  .cr-drop { min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; }
  .cr-drop:hover { background: none; }
  .cr-drop-empty { width: 100%; justify-items: stretch; }
  .cr-drop-empty > svg, .cr-drop-empty > b, #uploadRules { display: none; }
  .cr-drop-empty .cr-drop-cta { color: var(--ink); font-size: 18px; }
  .cr-drop-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 18px/1 'Onest', 'Manrope', sans-serif; box-shadow: 0 12px 28px -14px rgba(181,83,61,.7); }
  .cr-drop:active .cr-drop-cta { transform: scale(.98); }
  .cr-drop.is-busy .cr-drop-cta::after { content: ''; width: 16px; height: 16px; border: 2px solid rgba(41,49,45,.25); border-top-color: var(--ink); border-radius: 50%; animation: cr-spin .8s linear infinite; }
  .cr-trust { display: grid; gap: 3px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; text-align: center; }
  .cr-trust b { color: var(--ink); font-size: 14px; }
  .cr.has-photo .cr-trust, .cr.has-photo .cr-tips, .cr.has-photo .cr-rule, .cr.has-photo .cr-status:not(.is-error) { display: none; }
  .cr-status { font-size: 13px; text-align: center; }
  .cr.has-photo .cr-status { text-align: left; }
  .cr-consent { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
  .cr-rule { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
  .cr-rule summary { display: block; }
  .cr-rule summary i { margin-left: 4px; }
  .cr-tips { gap: 6px; margin-top: 12px; font-size: 13px; }
  .cr-okline { padding: 8px 12px 8px 8px; }
  .cr-okline img { width: 44px; height: 54px; }
  .cr-photo-actions { margin-top: 2px; }
  /* Style and height share one screen under the photo. */
  .cr-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cr-opt { position: relative; grid-template-columns: 1fr; gap: 6px; padding: 5px 5px 8px; border-radius: 16px; text-align: center; }
  .cr-opt:hover { transform: none; }
  .cr-opt img { width: 100%; height: auto; aspect-ratio: 1; object-position: 50% 3%; border-radius: 12px; }
  .cr-opt b { font-size: 14px; line-height: 1.2; }
  .cr-opt small { display: none; }
  .cr-opt i { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; background: rgba(255,253,250,.9); }
  .cr-sizes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .cr-sizes button { min-height: 56px; }
  .cr-navrow { margin-top: 18px; }
  .cr-navrow .cr-btn { flex: 1 1 100%; min-height: 56px; }
  .cr.is-step-4 #backButton { display: none; }
  .cr-hint { text-align: center; }
  /* Step 2 of 2: confirmation, progress, result. */
  .cr-pick { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 14px; }
  .cr-pick img { width: 36px; height: 46px; object-fit: cover; border-radius: 8px; }
  .cr-pick .cr-linkbtn { min-height: 40px; margin-left: auto; }
  .cr-tg { gap: 10px; padding: 14px; }
  .cr-tg-actions .cr-btn { flex: 1 1 100%; min-height: 56px; font-size: 17px; }
  .cr-result { gap: 10px; margin-top: 14px; padding: 16px; }
  .cr-result h3 { font-size: 18px; line-height: 1.3; }
  .cr-result p { font-size: 14px; }
  .cr-gal { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; grid-auto-columns: 84%; }
  .cr-result-actions .cr-btn { flex: 1 1 100%; }
  .cr-sk-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cr-sk-item .cr-btn { grid-column: 2 / -1; }
  .cr-how { margin-top: 56px; padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr *, .cr *::before, .cr *::after { animation: none !important; transition: none !important; }
}