/* The original ten logo nodes live inside the stage again. The guide has its
   own photographed title art, so reading it cannot move the editor rotary. */
html:not(.has-prints) .stage .wheel { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:1;mask-image:none;-webkit-mask-image:none; }
html:not(.has-prints) .stage .wheel .tool-title { position:absolute;left:var(--x);top:var(--y);width:clamp(145px,16vw,242px);height:clamp(64px,8vw,98px);padding:0;transform:translate(-50%,-50%)!important;pointer-events:auto;filter:drop-shadow(0 6px 7px #24345347); }
html:not(.has-prints) .stage .wheel .brand-art { width:100%;height:100%; }
html:not(.has-prints) .stage .wheel .orbit-label { display:none; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(1) { --x:12%;--y:15%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(2) { --x:88%;--y:16%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(3) { --x:11%;--y:32%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(4) { --x:89%;--y:33%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(5) { --x:10%;--y:49%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(6) { --x:90%;--y:50%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(7) { --x:11%;--y:66%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(8) { --x:89%;--y:67%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(9) { --x:12%;--y:83%; }
html:not(.has-prints) .stage .wheel .tool-title:nth-child(10) { --x:88%;--y:84%; }
html:not(.has-prints) .stage .wheel .tool-title:hover,
html:not(.has-prints) .stage .wheel .tool-title:focus-visible { filter:drop-shadow(0 12px 13px #263b6b83) brightness(1.06); }
html:not(.has-prints) .stage .wheel .tool-title[aria-selected=true] { filter:drop-shadow(0 9px 12px rgb(var(--accent-rgb)/.44)); }
html.has-prints:not(.editor-overview) .stage .wheel { position:absolute;top:auto;bottom:0; }
html.in-story .stage .wheel { pointer-events:none; }

html .story.story-effects { position:relative;z-index:5;min-height:100vh;padding:0;color:#27354d;background:transparent;overflow:clip;scroll-margin-top:0; }
.guide-world { position:sticky;top:0;z-index:0;width:100%;height:100svh;margin-bottom:-100svh;overflow:hidden;background:#eee9df;pointer-events:none;isolation:isolate; }
.guide-world-base,.guide-world-next,.guide-world-morph,.guide-world-veil { position:absolute;inset:0;display:block;width:100%;height:100%; }
.guide-world-base,.guide-world-next { object-fit:cover;object-position:center;transform:scale(1.015); }
.guide-world-morph { z-index:1;opacity:0;transition:opacity .22s ease; }
.guide-world-morph.is-ready { opacity:1; }
.guide-world-veil { z-index:2;background:linear-gradient(90deg,#f9f7f094,transparent 47%,#f9f7f05c),linear-gradient(#faf8f129,#faf8f16e); }
.guide-opening,.guide-chapters,.guide-ending { position:relative;z-index:1;max-width:1400px;margin-inline:auto; }
.guide-opening { min-height:100svh;display:flex;align-items:center;padding:8vh clamp(22px,6vw,100px) 12vh;border-bottom:1px solid #fff8; }
.guide-opening-copy { position:relative;z-index:2;max-width:min(76vw,900px);padding:clamp(26px,3.5vw,50px);border:1px solid #fffd;border-radius:34px;background:linear-gradient(135deg,#fffdf3ed,#f7f4ebd9);box-shadow:0 2px 0 #fff9 inset,0 25px 75px #28344d2d;backdrop-filter:blur(15px);color:#27354d; }
.guide-kicker,.guide-chapter-number { color:#667793;font:700 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase; }
.guide-opening h2 { margin:22px 0 24px;font:400 clamp(50px,6.3vw,96px)/.98 Georgia,serif;letter-spacing:-.073em;text-wrap:balance; }
.guide-opening h2 em,.guide-ending h2 em { color:#627bac;font-weight:400; }
.guide-opening p { max-width:590px;margin:0;color:#64718a;font:500 clamp(17px,1.6vw,21px)/1.53 var(--font); }
.guide-opening-steps { display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin-top:48px;padding-top:18px;border-top:1px solid #bac3d0;color:#4b5c78;font:700 11px/1.4 var(--font);letter-spacing:.015em; }
.guide-opening-steps i { color:#8293af;font-style:normal; }
.guide-quick { display:flex;flex-wrap:wrap;gap:8px;margin-top:28px; }
.guide-quick a { display:inline-flex;align-items:center;gap:15px;padding:10px 13px;border:1px solid #b8c4d599;border-radius:100px;background:#fff9;color:#314769;font:700 11px/1.2 var(--font);text-decoration:none;box-shadow:0 3px 9px #24365412;transition:transform .25s ease,background .25s ease; }
.guide-quick a:hover,.guide-quick a:focus-visible { transform:translateY(-3px);background:#fff; }
.guide-model-object { position:absolute;right:3%;top:6%;width:clamp(100px,13vw,200px);filter:drop-shadow(0 20px 22px #1c29494b);transform:rotate(10deg);animation:guide-pebble-float 5s ease-in-out infinite; }
.guide-opening-scroll { position:absolute;left:clamp(22px,6vw,100px);bottom:8%;color:#8090a8;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; }
.guide-opening-scroll b { display:inline-block;margin-left:12px;font-size:18px;animation:guide-arrow 1.8s ease-in-out infinite; }
@keyframes guide-pebble-float { 50% { transform:translateY(-11px) rotate(7deg); } }
@keyframes guide-arrow { 50% { transform:translateY(7px); } }

.guide-chapters { max-width:1600px; }
.guide-stage { position:sticky;top:0;z-index:1;display:grid;place-items:center;width:100%;height:100svh;margin-bottom:-100svh;pointer-events:none; }
.guide-stage-shell { position:relative;width:min(46vw,720px);aspect-ratio:1.24;max-height:70svh;overflow:hidden;border:12px solid #fffdf6;border-radius:26px;background:#e8e5dc;box-shadow:0 32px 64px -34px #182b498c,0 2px 0 #fff9 inset;isolation:isolate; }
.guide-stage-shell::after { content:"";position:absolute;z-index:4;inset:0;border-radius:inherit;box-shadow:inset 0 1px 1px #fff9,inset 0 -12px 25px #1828401c;pointer-events:none; }
.guide-scene-layer { position:absolute;inset:0;display:block;opacity:0;filter:blur(10px);transform:translateY(20px) scale(.965);transition:opacity .48s ease,filter .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.guide-scene-layer.is-active { z-index:1;opacity:1;filter:none;transform:none; }
.guide-scene-layer::before { content:"";position:absolute;z-index:3;inset:-35%;background:linear-gradient(105deg,transparent 37%,#fff9 49%,transparent 61%);mix-blend-mode:screen;opacity:0;pointer-events:none;transform:translateX(-90%) rotate(8deg); }
.guide-scene-layer.is-active::before { animation:guide-scene-sheen .95s cubic-bezier(.16,1,.3,1) both; }
@keyframes guide-scene-sheen { 15% { opacity:.62; } 80% { opacity:.4; } 100% { opacity:0;transform:translateX(95%) rotate(8deg); } }
.guide-scene-layer::after { content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff69,transparent 40%,#00000016); }
.guide-stage-track { position:absolute;bottom:7%;left:50%;display:flex;align-items:center;gap:12px;padding:9px 15px;border:1px solid #fff9;border-radius:99px;background:#fffdf3c9;box-shadow:0 5px 18px #28344d22;white-space:nowrap;transform:translateX(-50%);color:#52617b;font:700 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;backdrop-filter:blur(9px); }
.guide-stage-track i { position:relative;width:60px;height:1px;background:#aab5c2; }
.guide-stage-track i::after { content:"";position:absolute;inset:0 auto 0 0;width:var(--chapter-progress,0%);background:#526fac;box-shadow:0 0 9px #526fac88; }
.guide-steps { position:relative;z-index:2;margin-top:-100svh;padding:35svh 0;pointer-events:none; }
.guide-chapter { position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46vw) minmax(0,1fr);align-items:center;min-height:70svh;padding:0 clamp(16px,3vw,50px);scroll-margin-top:20svh; }
.guide-chapter-copy { grid-column:1;position:relative;z-index:2;box-sizing:border-box;max-width:410px;padding:22px 24px;border:1px solid #fff9;border-radius:24px;background:linear-gradient(145deg,#fffdf3e8,#f5f4efda);box-shadow:0 14px 45px #28344d24;backdrop-filter:blur(14px);color:#27354d;opacity:.18;filter:blur(8px);transform:translateY(42px) scale(.97);transition:opacity .5s ease,filter .65s ease,transform .75s cubic-bezier(.16,1,.3,1);pointer-events:auto; }
.guide-chapter:nth-child(even) .guide-chapter-copy { grid-column:3;justify-self:end; }
.guide-chapter.is-visible .guide-chapter-copy { opacity:1;filter:none;transform:none; }
.guide-chapter-number { display:flex;align-items:center;gap:12px;color:#8b94a2;font-size:10px; }
.guide-chapter-number i { width:40px;height:1px;background:#aeb9c8; }
.guide-chapter-logo { display:block;width:min(100%,290px);height:120px;margin:12px 0 3px; }
.guide-chapter-logo .brand-art { width:100%;height:100%; }
.guide-chapter-logo .logo-img { filter:drop-shadow(0 9px 9px #24365d38); }
.guide-chapter h2 { max-width:410px;margin:0;font:400 clamp(32px,3.2vw,54px)/1.07 Georgia,serif;letter-spacing:-.061em;text-wrap:balance; }
.guide-try,.guide-home { appearance:none;display:inline-flex;align-items:center;gap:23px;min-height:49px;margin-top:32px;padding:13px 21px;border:1px solid #bdc8d7;border-radius:999px;background:#fffef9;color:#2d4265;box-shadow:0 3px 0 #d4d8d8,0 13px 20px #1a315020;font:700 12px/1 var(--font);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease; }
.guide-try:hover,.guide-home:hover { transform:translateY(-3px);box-shadow:0 5px 0 #d4d8d8,0 18px 28px #1a31502c; }
.guide-try:focus-visible,.guide-home:focus-visible { outline:2px solid #516fb0;outline-offset:4px; }

.guide-demo { position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:hidden;background:#dfe4e7;isolation:isolate; }
.guide-demo-before,.guide-demo-after,.guide-demo-backing,.guide-demo-treatment { position:absolute;inset:0; }
.guide-demo-before img,.guide-after-image,.guide-focus,.guide-object { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover; }
.guide-demo-after { clip-path:inset(0 0 0 var(--wipe));will-change:clip-path; }
.guide-demo-backing { background:#e6e6e2; }
.guide-object { object-fit:contain;transform:translateX(15%) scale(.92); }
.guide-focus { display:none; }
.guide-demo-sweep { position:absolute;z-index:4;top:0;bottom:0;left:var(--line-x);width:2px;background:#fff;box-shadow:0 0 0 1px #6480b6a3,0 0 20px 5px #ffffffb8;opacity:.8;pointer-events:none; }
.guide-demo-sweep i { position:absolute;top:24%;left:-10px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 0 24%,#b9cbff 38%,#a4bcff3d 64%,transparent 70%);box-shadow:0 0 18px #fff; }
.guide-demo-corner { position:absolute;z-index:4;width:26px;height:26px;border-color:#ffffffd0;border-style:solid;pointer-events:none; }
.guide-demo-corner-a { left:11px;top:11px;border-width:2px 0 0 2px;border-radius:6px 0 0 0; }
.guide-demo-corner-b { right:11px;bottom:11px;border-width:0 2px 2px 0;border-radius:0 0 6px 0; }
.guide-demo-legend { position:absolute;z-index:5;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;pointer-events:none; }
.guide-demo-legend b { padding:6px 9px;border-radius:99px;background:#152039aa;color:#fff;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(8px); }

/* Each illustration uses the same physical action as its studio ceremony:
   separation, a new sweep, a die edge, focus, depth, camera, light, pixels, brush. */
[data-demo=cutout] .guide-demo-backing { background-color:#f3f5f4;background-image:linear-gradient(45deg,#d8dde3 25%,transparent 25%),linear-gradient(-45deg,#d8dde3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8dde3 75%),linear-gradient(-45deg,transparent 75%,#d8dde3 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0; }
[data-demo=cutout] .guide-object { transform:translate(18%,var(--move)) scale(.9);filter:drop-shadow(0 24px 13px #26304843); }
[data-demo=portrait] .guide-demo-backing { background:radial-gradient(circle at 63% 23%,#ffdfac,#df9b9f 42%,#6d7597 88%); }
[data-demo=portrait] .guide-after-image { mask-image:radial-gradient(ellipse 44% 58% at 50% 48%,#000 68%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 44% 58% at 50% 48%,#000 68%,transparent 92%);filter:drop-shadow(0 8px 9px #27334477); }
[data-demo=backdrop] .guide-demo-backing { background:linear-gradient(135deg,#ffc7d2,#f2d4e7 50%,#b9cdf3); }
[data-demo=backdrop] .guide-object { filter:drop-shadow(0 18px 13px #843a6673); }
[data-demo=sticker] .guide-demo-backing { background:linear-gradient(145deg,#7387ae,#c3cee2);background-image:radial-gradient(circle at 30% 30%,#ffffff6e,transparent 45%),linear-gradient(145deg,#7387ae,#c3cee2); }
[data-demo=sticker] .guide-object { transform:translate(15%,var(--move)) scale(.85) rotate(-4deg);filter:drop-shadow(4px 0 white) drop-shadow(-4px 0 white) drop-shadow(0 4px white) drop-shadow(0 -4px white) drop-shadow(0 15px 12px #26345170); }
[data-demo=sticker] .guide-demo-treatment { background:linear-gradient(111deg,transparent 28%,#aff8e450 39%,#f9d5ff79 48%,#fff9 52%,transparent 67%);background-size:250% 100%;mix-blend-mode:screen;opacity:.65; }
.guide-scene-layer.is-active [data-demo=sticker] .guide-demo-treatment { animation:guide-foil 3.5s ease-in-out infinite; }
@keyframes guide-foil { 0%,15% { background-position:130% 0; } 75%,100% { background-position:-80% 0; } }
[data-demo=blur] .guide-after-image { filter:blur(8px) saturate(.95);transform:scale(1.04); }
[data-demo=blur] .guide-focus { display:block;mask-image:radial-gradient(ellipse 54% 37% at 40% 62%,#000 70%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 54% 37% at 40% 62%,#000 70%,transparent 100%); }
[data-demo=depth] .guide-after-image { filter:contrast(1.06); }
[data-demo=depth] .guide-demo-treatment { opacity:.5;background:repeating-linear-gradient(0deg,transparent 0 29px,#ffffff3f 30px 31px);mix-blend-mode:screen; }
[data-demo=parallax] .guide-demo-backing { background:#738eb2; }
[data-demo=parallax] .guide-after-image { transform:translateX(var(--move)) scale(1.12);filter:drop-shadow(-14px 0 12px #14243b71); }
[data-demo=parallax] .guide-demo-treatment { inset:7%;border:1px solid #ffffff9a;border-radius:8px;box-shadow:0 0 0 11px #ffffff2b,0 12px 20px #0d22373d;transform:translateX(var(--move)); }
[data-demo=relight] .guide-after-image { filter:brightness(.78) contrast(1.07) saturate(.97); }
[data-demo=relight] .guide-demo-treatment { background:radial-gradient(circle at var(--line-x) 43%,#fff5d5bb 0,#ffce826b 17%,transparent 48%);mix-blend-mode:screen; }
.guide-scene-layer.is-active [data-demo=relight] .guide-demo-treatment { animation:guide-light-breathe 2.8s ease-in-out infinite alternate; }
@keyframes guide-light-breathe { to { opacity:.67;filter:brightness(1.3); } }
[data-demo=upscale] .guide-demo-before img { image-rendering:pixelated;filter:blur(1.1px);transform:scale(1.08); }
[data-demo=upscale] .guide-after-image { image-rendering:auto;filter:contrast(1.08) saturate(1.08); }
[data-demo=upscale] .guide-demo-treatment { opacity:.23;background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 14px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 14px);mix-blend-mode:screen; }
[data-demo=erase] .guide-demo-before::after { content:"";position:absolute;inset:0;background:radial-gradient(ellipse 15% 7% at 50% 79%,#f78abd 0 60%,#ed77ae 78%,transparent 100%);filter:blur(3px); }
[data-demo=erase] .guide-demo-treatment { background:radial-gradient(circle at var(--line-x) 76%,#fff9 0 2%,#f4addb66 5%,transparent 13%); }
[data-demo=erase] .guide-demo-sweep i { top:72%;width:38px;height:38px;left:-18px;background:radial-gradient(circle,#ffffffc8 0 13%,#f4a4c39e 35%,transparent 72%); }

.guide-ending { z-index:3;min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 20px;background:transparent; }
.guide-ending-copy { max-width:660px;padding:clamp(30px,5vw,65px);border:1px solid #fffd;border-radius:34px;background:linear-gradient(135deg,#fffdf3ef,#f7f4ebdd);box-shadow:0 2px 0 #fff9 inset,0 25px 75px #28344d2d;backdrop-filter:blur(15px);color:#27354d; }
.guide-ending h2 { margin:22px 0 8px;font:400 clamp(60px,8vw,110px)/.98 Georgia,serif;letter-spacing:-.07em; }
.guide-ending p { max-width:470px;margin:15px auto 0;color:#64718a;font:500 clamp(16px,1.5vw,19px)/1.5 var(--font); }
.guide-home { margin-top:40px; }
html[data-theme=dark] .story.story-effects { color:#27354d;background:transparent; }
html[data-theme=dark] .guide-opening,html[data-theme=dark] .guide-stage-shell { border-color:#ffffffb9; }

@media(max-width:1100px) and (min-width:720px) {
  html:not(.has-prints) .stage .wheel .tool-title { width:145px;height:68px; }
  .guide-stage-shell { width:47vw; }
  .guide-chapter { grid-template-columns:minmax(0,1fr) 46vw minmax(0,1fr);padding-inline:8px; }
  .guide-chapter-logo { height:90px; }
  .guide-chapter h2 { font-size:clamp(30px,3.5vw,40px); }
}
@media(max-width:719px) {
  html:not(.has-prints) .stage .wheel { top:auto;bottom:0;height:112px;display:flex;align-items:center;gap:3px;padding:0 13px;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;pointer-events:auto;touch-action:pan-x;scrollbar-width:none; }
  html:not(.has-prints) .stage .wheel::-webkit-scrollbar { display:none; }
  html:not(.has-prints) .stage .wheel .tool-title { position:relative;left:auto;top:auto;flex:0 0 115px;width:115px;height:68px;transform:none!important;touch-action:pan-x; }
  html:not(.has-prints) .stage .wheel .brand-art { width:100%;height:100%; }
  html:not(.has-prints) .stage .wheel .orbit-label { display:none; }
  html .story.story-effects { padding:0; }
  .guide-opening { min-height:90svh;align-items:flex-start;padding:115px 9px 120px; }
  .guide-opening-copy { max-width:100%;padding:24px 22px;border-radius:27px; }
  .guide-opening h2 { margin-top:18px;font-size:clamp(47px,11.5vw,70px); }
  .guide-opening p { font-size:16px; }
  .guide-opening-steps { gap:9px;font-size:9px;margin-top:35px; }
  .guide-quick { gap:7px;margin-top:20px; }
  .guide-quick a { padding:9px 11px;font-size:10px; }
  .guide-model-object { width:100px;top:auto;bottom:20px;right:12px;opacity:.68; }
  .guide-opening-scroll { left:9px;bottom:42px; }
  .guide-stage { align-items:start;padding-top:2svh;box-sizing:border-box; }
  .guide-stage-shell { width:min(66vw,350px);aspect-ratio:1.2;max-height:31svh;border-radius:23px; }
  .guide-stage-track { display:none; }
  .guide-steps { padding:25svh 0; }
  .guide-chapter { display:flex;align-items:end;min-height:72svh;padding:0 10px 8svh;box-sizing:border-box; }
  .guide-chapter-copy,.guide-chapter:nth-child(even) .guide-chapter-copy { top:24px;max-width:100%;margin:0;padding:18px 20px;transform:translateY(24px); }
  .guide-chapter-logo { height:75px;width:200px;margin:6px 0 2px; }
  .guide-chapter h2 { font-size:clamp(30px,8vw,43px); }
  .guide-try { margin-top:15px;min-height:43px; }
  .guide-demo { width:100%;height:100%;border-radius:0; }
  .guide-ending { min-height:68svh; }
  .guide-ending-copy { padding:30px 22px;border-radius:27px; }
}
@media(prefers-reduced-motion:reduce) {
  .guide-model-object,.guide-opening-scroll b,.guide-scene-layer.is-active::before,.guide-scene-layer.is-active [data-demo=sticker] .guide-demo-treatment,.guide-scene-layer.is-active [data-demo=relight] .guide-demo-treatment { animation:none!important; }
  .guide-chapter-copy,.guide-scene-layer { filter:none;transform:none;transition:none; }
  .guide-try,.guide-home { transition:none; }
}