.step-doodle .lobby-action-icon { width:32px;height:32px; }
.landing-page .skip-link:not(:focus) { clip-path:inset(50%); }
.feature-story { padding:88px max(24px,calc((100vw - 1160px)/2));display:grid;grid-template-columns:1fr 1.15fr;gap:48px 60px;align-items:center;overflow:hidden; }
.feature-copy { min-width:0; }
.feature-copy p { font-size:19px;line-height:1.6;max-width:36ch;margin:20px 0 0;color:#52647e; }
.feature-chapters { background:#e8dff5;border-block:2px solid #203653; }
.chapter-product-preview { margin:0;min-width:0;padding:22px;background:#fffdf8;border:2px solid #203653;border-radius:22px 17px 24px 18px;box-shadow:7px 8px 0 #203653;transform:rotate(2deg); }
.chapter-preview-heading { display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:800;margin-bottom:22px; }
.chapter-preview-count { font-size:12px;padding:7px 12px;border-radius:20px;background:#e8dff5; }
.preview-levels { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px; }
.preview-level { position:relative;aspect-ratio:1;background:#edf1f8;border:2px dashed #a0aac0;border-radius:12px; }
.preview-level-number { position:absolute;left:8px;top:-10px;width:28px;height:28px;display:grid;place-items:center;border:2px solid #203653;border-radius:50%;background:#ffde76;font-size:13px;font-weight:700; }
.preview-level-empty { position:absolute;inset:0;display:grid;place-items:center;font-size:35px;color:#7d8ca4; }
.preview-level-drawing { position:absolute;inset:-2px;border:2px solid #203653;border-radius:12px;background:#b6ddc6;display:grid;place-items:center;overflow:hidden; }
.preview-level-drawing svg { width:100%;height:100%; }
.preview-level-check { position:absolute;right:-7px;bottom:-8px;display:grid;place-items:center;width:27px;height:27px;background:#203653;color:#fff;border-radius:50%;font-size:14px; }
.chapter-product-preview figcaption { margin:22px 0 0;text-align:center;color:#52647e;font-size:13px; }
.feature-saves { display:block;background:#fffdf8; }
.feature-saves>.feature-copy { text-align:center; }.feature-saves .feature-copy p { max-width:none; }
.landing-save-preview.saved-library { margin:38px 0 0; }
.landing-save-preview .saved-grid { padding:16px 8px 16px; }
.landing-save-preview .saved-card { transition:transform .2s ease; }
.landing-save-preview .saved-card:hover,.landing-save-preview .saved-card:focus-within { transform:translateY(-7px); }
.landing-save-preview a { text-decoration:none;text-align:center; }
.landing-save-preview .saved-card--empty .save-button { display:grid;place-items:center; }
.preview-shelf-footer { display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px;color:#52647e; }
.preview-shelf-footer nav { display:flex;gap:10px; }
.preview-shelf-footer button { width:44px;height:44px;display:grid;place-items:center;background:#ffde76;border:2px solid #203653;border-radius:12px;color:#203653; }
.preview-shelf-footer button:disabled { opacity:.4;cursor:default; }
.feature-equipment { background:#e7f1ed;position:relative; }
.feature-text-link { display:inline-block;margin-top:24px;color:#2559ce;text-decoration:none;border-bottom:2px solid currentColor;font-weight:700;padding:10px 0; }
.asset-cloud { position:relative;height:440px;min-width:0;isolation:isolate; }
.asset-cloud::before { content:'';position:absolute;inset:18% 10%;border:2px dashed #adbfba;border-radius:50%;transform:rotate(-20deg); }
.asset-float { --tilt:0deg;position:absolute;display:grid;place-items:center;padding:0;border:0;background:none;overflow:visible;transform:rotate(var(--tilt));transition:transform .22s;z-index:2; }
.asset-float:hover,.asset-float:focus-visible,.asset-float[aria-pressed=true] { transform:translateY(-8px) rotate(0) scale(1.13);z-index:4; }
.asset-float:focus-visible { outline:3px solid #2559ce;outline-offset:8px;border-radius:16px; }
.floating-art { display:block;width:100%;aspect-ratio:1;filter:drop-shadow(0 14px 9px #20365326); }
.floating-art>img { width:100%;height:100%;object-fit:contain;display:block; }
.floating-art--sheet { aspect-ratio:320/427;overflow:hidden; }
.floating-art--sheet>img { width:400%;max-width:none;height:100%;object-fit:fill; }
.asset-float--0 { width:145px;left:34%;top:22%;--tilt:-6deg; }
.asset-float--1 { width:164px;left:0;top:10%;--tilt:-16deg; }
.asset-float--2 { width:115px;right:0;top:26%;--tilt:12deg; }
.asset-float--3 { width:104px;right:16%;top:0;--tilt:9deg; }
.asset-float--4 { width:168px;left:12%;bottom:0;--tilt:12deg; }
.asset-float.is-distant { z-index:-1;filter:blur(3px);opacity:.36;pointer-events:none; }
.asset-float--5 { width:125px;left:32%;top:-8%;--tilt:25deg; }
.asset-float--6 { width:98px;left:-8%;top:55%;--tilt:-12deg; }
.asset-float--7 { width:94px;right:18%;bottom:0;--tilt:-15deg; }
.asset-float--8 { width:120px;right:-8%;top:-3%;--tilt:20deg; }
.asset-float-name { position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border-radius:8px;background:#203653;color:#fff;font-size:12px;opacity:0;pointer-events:none; }
.asset-float:is(:hover,:focus-visible,[aria-pressed=true]) .asset-float-name { opacity:1; }
.asset-transformation { grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr;gap:16px 50px;align-items:center;margin:12px 0 0;padding-top:40px;border-top:1px dashed #9eb5ad; }
.transformation-copy h3 { font-size:30px;letter-spacing:-.025em; }.transformation-copy p { font-size:16px;line-height:1.6;margin-top:12px;max-width:32ch;color:#52647e; }
.transformation-stage { display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:16px;position:relative; }
.transformation-before,.transformation-after { display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;font-size:13px;font-weight:600;text-align:center; }
.transformation-before>svg { height:190px;width:100%;max-width:180px; }
.transformation-after .floating-art { width:142px;height:190px; }
.transformation-morph { position:relative; }.transformation-ink { position:absolute;inset:0;width:100%;height:100%;opacity:0; }
.transformation-arrow svg { width:36px;height:36px; }
.asset-transformation figcaption { grid-column:2;font-size:12px;color:#52647e;text-align:center;margin-top:8px; }
.feature-community { grid-template-columns:1.7fr 1fr;background:#203653;color:#fffdf8;gap:40px; }
.feature-community>.feature-copy { grid-column:1/-1;text-align:center; }.feature-community .feature-copy p { color:#cedaea;max-width:none; }
.feature-community-visual { min-width:0; }
.feature-community-unlock { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:20px;border-top:1px solid #52647e; }
.feature-community-unlock p { color:#cedaea;font-size:14px;line-height:1.6;max-width:48ch; }
.feature-community-unlock .primary-button { background:#ffde76;color:#203653;box-shadow:0 5px 0 #0f253e;flex:none; }
.feature-community .community-product-preview>figcaption { color:#cedaea; }
.landing-page .preview-social-stories { display:grid;gap:24px; }
.preview-social-stories>section { padding:20px;background:#fffdf8;color:#203653;border:2px solid #0f253e;border-radius:18px;box-shadow:5px 6px 0 #0f253e; }
.preview-social-stories h3 { font-size:23px;letter-spacing:-.025em;margin:0 0 18px; }
.preview-request { display:flex;gap:10px;align-items:center; }.preview-request strong,.preview-request small { display:block; }.preview-request small { color:#52647e;font-size:11px; }
.preview-accept { margin-left:auto;background:#2559ce;color:white;border:0;border-radius:8px;padding:8px 12px;min-height:44px;font-size:12px; }
.is-accepted .preview-accept { background:#b6ddc6;color:#203653; }
.preview-friend-activity { margin-top:16px;display:flex;align-items:center;gap:12px;border-top:1px solid #d4dfec;padding-top:12px;opacity:.45;transition:opacity .3s; }
.preview-friend-activity svg { width:95px;height:60px;border:1px solid #bdccdf;border-radius:6px;flex:none; }.preview-friend-activity span { font-size:12px; }
.is-accepted .preview-friend-activity { opacity:1; }
.preview-share-mini { display:flex;align-items:center;gap:14px;margin-bottom:16px; }.preview-share-mini svg { width:95px;border:1px solid #bdccdf;border-radius:6px; }.preview-share-mini strong { font-size:14px; }
.preview-audience { display:flex;flex-wrap:wrap;gap:8px; }.preview-audience button { display:flex;align-items:center;gap:6px;min-height:44px;border:1px solid #b5c5da;border-radius:8px;background:#fff;color:#203653;padding:8px;font-size:12px; }.preview-audience button[aria-pressed=true] { border-color:#2559ce;background:#e6efff; }.preview-audience svg { width:18px;height:18px; }
.feature-story :focus-visible { outline:3px solid #2871d6;outline-offset:4px; }
@media(prefers-reduced-motion:no-preference) {
  .asset-cloud.scene-on :is(.asset-float--0,.asset-float--3)>.floating-art { animation:float-art 2s ease-in-out 2; }
  @keyframes float-art { 50%{transform:translateY(-7px);} }
  .scene-on .preview-level-drawing,.scene-on .preview-level-check { animation:level-added .6s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:var(--level-delay); }
  @keyframes level-added { from { opacity:0;transform:translateY(-22px) scale(.7) rotate(-7deg); } to { opacity:1;transform:none; } }
  .scene-on .transformation-after .floating-art { animation:asset-equipped 4s ease both; }
  .scene-on .transformation-ink { animation:ink-replaced 4s ease both; }
  @keyframes ink-replaced { 0%,25%{opacity:1;}55%,100%{opacity:0;} }
  .scene-on .transformation-arrow { animation:asset-arrow 4s ease both; }
  @keyframes asset-equipped { 0%,25%{opacity:0;transform:scale(.7);}55%{opacity:1;transform:scale(1.08);}80%,100%{opacity:1;transform:none;} }
  @keyframes asset-arrow { 0%,20%{opacity:.25;transform:translateX(-10px);}50%,100%{opacity:1;transform:none;} }
}
@media(max-width:900px) { .feature-story { gap:36px;padding-block:64px; }.asset-cloud { height:390px; }.asset-float--0 { width:120px; }.asset-float--1,.asset-float--4 { width:135px; }.asset-float--2 { width:95px; }.feature-community { grid-template-columns:1fr; }.feature-community-visual { width:min(700px,100%);justify-self:center; }.preview-social-stories { grid-template-columns:1fr 1fr; }.feature-community-unlock { flex-wrap:wrap; } }
@media(max-width:650px) { .feature-story { grid-template-columns:1fr;padding:56px 22px;gap:32px; }.feature-copy p { font-size:17px; }.chapter-product-preview { margin-right:8px; }.asset-cloud { height:380px;max-width:470px;width:100%;justify-self:center; }.asset-float--0 { width:130px; }.asset-float--1,.asset-float--4 { width:145px; }.asset-transformation { grid-template-columns:1fr;gap:28px; }.asset-transformation figcaption { grid-column:1; }.transformation-copy { text-align:center; }.transformation-copy p { margin-inline:auto; }.transformation-stage { gap:8px;grid-template-columns:1fr 30px 1fr; }.transformation-after .floating-art { width:115px;height:154px; }.transformation-before>svg { height:154px; }.preview-social-stories { grid-template-columns:1fr; }.feature-community-unlock .primary-button { width:100%;text-align:center; } }
@media(max-width:380px) {
  .landing-page .topbar { gap:10px;padding-inline:12px; }
  .landing-page .brand { gap:6px; }
  .landing-page .brand strong { font-size:20px; }
  .landing-page .brand-mark { width:34px;height:34px; }
}
@media(prefers-reduced-motion:reduce) { .feature-story * { animation:none!important;transition:none!important; }.landing-save-preview .saved-card:hover,.asset-float:hover,.asset-float:focus-visible,.asset-float[aria-pressed=true] { transform:none; }.asset-float:is(:hover,:focus-visible,[aria-pressed=true]) { outline:2px solid #2559ce;outline-offset:5px; } }