.parisArtFrame{position:relative;overflow:hidden;isolation:isolate}
.doodleMotion{position:relative;z-index:2;display:block;margin:10px auto;min-height:44px;padding:9px 15px;border:1px solid #d6dfe7;border-radius:24px;background:#fffdf8;color:#193653;font:600 12px system-ui;cursor:pointer}
.doodleMotion:focus-visible,.doodleViewButton:focus-visible{outline:3px solid #4879ad;outline-offset:3px}
#doodle-journey,body>main.wrap{animation:doodle-page-in .3s ease-out both}
.screen.active{animation:doodle-page-in .3s ease-out both}
.sheetback.show .sheet,dialog[open]{animation:doodle-page-in .25s ease-out both}
.style,.memoryItem,.dc-frame{transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.style:hover,.memoryItem:hover{transform:translateY(-2px)}}
.homeExamples{padding:28px 22px 10px;color:#193653;text-align:center}
.homeExamples h2{font:500 25px Georgia,serif;margin:0 0 10px}.homeExamples p{font:14px/1.6 system-ui;margin:8px 0 20px;color:#53677c}
.homeExamplesGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.homeExamplesGrid figure{margin:0}.homeExamplesGrid img{width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:9px;background:#f3eee7}.homeExamplesGrid figcaption{font:12px/1.45 system-ui;margin-top:8px}
.homeSteps{margin:20px 22px 32px;color:#193653;font:14px/1.6 system-ui}.homeSteps h2{font:500 24px Georgia,serif}.homeSteps li{margin:12px 0}
.launchCreator{text-align:center;padding:20px;font:12px/1.6 system-ui;color:#52687c}.launchCreator a{color:#193653}
.doodleViewButton{display:block;min-height:44px;margin:12px auto;padding:10px 18px;background:#fffdf8;color:#193653;border:1px solid #bdcbd8;border-radius:25px;font:600 13px system-ui;cursor:pointer}
#doodleFullView{width:calc(100vw - 32px);max-width:1100px;height:calc(100dvh - 40px);max-height:900px;padding:0;border:0;border-radius:14px;background:#fffdf8;color:#193653;z-index:12000}
#doodleFullView::backdrop{background:#11253ddd}.fullViewTools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 15px;border-bottom:1px solid #dbe2e8}.fullViewTools button{min-width:44px;min-height:44px;padding:8px 14px;border:1px solid #cad5df;border-radius:24px;background:#fffdf8;color:#193653;font:600 14px system-ui}.fullViewScroll{height:calc(100% - 68px);overflow:auto;text-align:center;overscroll-behavior:contain}.fullViewScroll img{display:block;width:100%;height:100%;object-fit:contain;margin:auto}.fullViewScroll.zoomed img{width:200%;max-width:none;height:auto;object-fit:initial}
@keyframes doodle-page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
html[data-doodle-motion="off"] *,html[data-doodle-motion="off"] *::before,html[data-doodle-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Launch motion: the scene stays legible while small drawn details move. */
.parisGlass h1{position:relative}.parisGlass h1::after{content:"";display:block;width:72px;height:3px;background:#c6968a;margin:12px auto;border-radius:50%;transform-origin:left;animation:doodle-ink .9s .2s ease both}
#parisWelcome.on .parisGlass{animation:doodle-keepsake .7s ease-out both}
#parisWelcome.on .parisLinks{animation:doodle-keepsake .7s .14s ease-out both}
.doodle-reveal{animation:doodle-keepsake .6s cubic-bezier(.2,.65,.3,1) both;animation-delay:var(--reveal-delay,0ms)}
.screen.active .card,.screen.active .panel,.screen.active .memoryItem,.screen.active .expandedStyles .style{animation:doodle-keepsake .45s ease-out both;animation-delay:var(--reveal-delay,0ms)}
#result.active #resultImage{animation:doodle-art-unfold .65s ease-out both}
.sheetback.show .sheet{transform-origin:center bottom;animation:doodle-keepsake .3s ease-out both}
.dc-artwork{position:relative;isolation:isolate;overflow:hidden}.dc-artwork::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff26 48%,transparent 64%);animation:doodle-paper-light 1.2s ease-out both}
#magicBack.show .magicIcon,.compareLoading{animation:doodle-breathe 1.8s ease-in-out infinite alternate}
.btn,#parisStart,.dc-btn{transition:transform .18s ease,box-shadow .18s ease}.btn:active,#parisStart:active,.dc-btn:active{transform:scale(.98)}
@keyframes doodle-ink{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes doodle-keepsake{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes doodle-art-unfold{from{opacity:.35;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes doodle-paper-light{from{opacity:0;transform:translateX(-20%)}40%{opacity:1}to{opacity:0;transform:translateX(20%)}}
@keyframes doodle-breathe{from{opacity:.6}to{opacity:1}}

#dc-studio:not([hidden]) .dc-artwork{animation:doodle-art-unfold .6s ease-out both}#dc-studio:not([hidden]) .dc-artwork::after{animation:doodle-paper-light 1.2s ease-out both}

.legalLinks{display:inline-flex;gap:.35em;margin-left:.7em;font-size:.82em}.legalLinks a{color:inherit;text-underline-offset:3px}
.privacyChoice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:99;width:min(520px,calc(100% - 24px));padding:14px 18px;background:#fffdf8;color:#443d3a;border:1px solid #d9cdbf;border-radius:18px;box-shadow:0 5px 24px #362a291f;font:14px/1.45 system-ui,sans-serif}
#parisWelcome.on~.privacyChoice{z-index:9999}
.privacyChoice[hidden]{display:none}.privacyChoice p{margin:0 0 10px}.privacyChoice div{display:flex;flex-wrap:wrap;gap:10px}.privacyChoice button{border:1px solid #d8b4a1;border-radius:20px;padding:9px 15px;background:#fff5ed;color:#3c302d;font:inherit;cursor:pointer}.privacyChoice a{color:inherit}
/* The original Paris illustration stays fixed. Only selected painted regions move. */
.parisLivingArt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sceneLive>.parisHeroFlow{visibility:hidden;animation:none!important;transform:none!important}
.creatorLogo{display:block;width:148px;height:auto;object-fit:contain}
.doodleCreator,.launchCreator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}
.doodleCreator a,.launchCreator>a{display:inline-flex;align-items:center}
.pencilArt{position:relative;display:inline-block;isolation:isolate}
.pencilPortrait{display:block;width:160px;height:132px;max-width:100%;margin-bottom:10px}
.pencilPortrait>.pencilOriginal{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;margin:0!important}
.pencilLayer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0}
.pencilArt.drawing>.pencilLayer{opacity:1}
.pencilArt.drawing>.pencilOriginal{opacity:0}
.drawingPencil{opacity:0}
.drawnWordmark{position:relative;display:inline-block;min-width:84px;min-height:32px}
.pencilWord{position:absolute;inset:0;width:112px;height:36px}
.wordDrawing>.wordmarkFallback{visibility:hidden}
html[data-doodle-motion="off"] .pencilLayer{display:none}
html[data-doodle-motion="off"] .pencilOriginal{opacity:1!important}
html[data-doodle-motion="off"] .wordmarkFallback{visibility:visible!important}
@media(prefers-reduced-motion:reduce){.pencilLayer{display:none}.pencilOriginal{opacity:1!important}.wordmarkFallback{visibility:visible!important}}

html[data-doodle-motion="off"] .parisLivingArt{display:none}
html[data-doodle-motion="off"] .sceneLive>.parisHeroFlow{visibility:visible}
@media(prefers-reduced-motion:reduce){.parisLivingArt{display:none}.sceneLive>.parisHeroFlow{visibility:visible}}

.pencilCreator{width:148px;height:49.333px;vertical-align:middle}
.pencilCreator>.pencilOriginal{display:block;width:100%!important;height:100%!important;object-fit:contain}

.creatorLiving{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.creatorReady:not(.drawing)>.creatorLiving{display:block}
.creatorReady:not(.drawing)>.pencilOriginal{opacity:0}
.creatorPiece{transform-box:view-box}
.creatorPiece.crown{transform-origin:347px 290px;animation:creatorCrown 3.6s ease-in-out infinite}
.creatorPiece.starLarge{transform-origin:1964px 311px;animation:creatorStar 4.2s ease-in-out infinite}
.creatorPiece.starSmall{transform-origin:2030px 265px;animation:creatorStar 3.4s ease-in-out -.9s infinite reverse}
@keyframes creatorCrown{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(6deg)}}
@keyframes creatorStar{0%,100%{transform:rotate(-10deg) scale(.88);opacity:.78}50%{transform:rotate(12deg) scale(1.12);opacity:1}}
html[data-doodle-motion="off"] .creatorLiving{display:none!important}
@media(prefers-reduced-motion:reduce){.creatorLiving{display:none!important}.creatorPiece{animation:none!important}}

/* Paris details, sized in artwork coordinates. Static artwork remains the fallback. */
.parisSteam .steamTrail{stroke-dasharray:115;stroke-dashoffset:115;opacity:0;animation:paris-steam 4s ease-out infinite}
.parisSteam .steam1{animation-delay:-2s}
@keyframes paris-steam{0%{stroke-dashoffset:115;opacity:0;transform:translateY(7px)}20%{opacity:.68}70%{opacity:.48}100%{stroke-dashoffset:-110;opacity:0;transform:translateY(-24px)}}
.parisRipples{animation:paris-water 3.4s ease-in-out infinite}
@keyframes paris-water{0%,100%{opacity:.2;transform:translateX(-5px)}50%{opacity:.8;transform:translateX(5px)}}
.parisLensLight{opacity:0;animation:paris-camera 8s ease-in-out infinite}
@keyframes paris-camera{0%,72%,86%,100%{opacity:0}78%{opacity:.5}}
.createCreator{display:flex;justify-content:center;align-items:center;gap:8px;margin:5px 0 10px;font:11px system-ui;color:#6c788a}
.createCreator a{display:inline-flex;min-height:44px;align-items:center}
.createCreator .pencilCreator{width:148px;height:49.333px}
.expandedStyles .style .thumb{position:relative;overflow:hidden}
.expandedStyles .style .thumb>img{transition:transform .45s ease;transform-origin:50% 50%}
.expandedStyles .style:is(:hover,:focus-visible) .thumb>img{transform:scale(1.055)}
.expandedStyles .style[aria-pressed="true"] .thumb>img{animation:style-art-breathe 5s ease-in-out infinite}
.expandedStyles .style[aria-pressed="true"] .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#fff8 49%,transparent 66%);animation:style-art-light 5s ease-in-out infinite}
@keyframes style-art-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes style-art-light{0%,25%{transform:translateX(-110%);opacity:0}40%{opacity:.55}70%,100%{transform:translateX(110%);opacity:0}}
html[data-doodle-motion="off"] .expandedStyles .style .thumb>img{transform:none!important}
@media(prefers-reduced-motion:reduce){.expandedStyles .style .thumb>img{transform:none!important}}

.parisHeart{transform-box:fill-box;transform-origin:center;animation:paris-heart-float 5s ease-in-out infinite}
.parisHeart.heart1{animation-delay:-1.7s;animation-duration:6.2s}
.parisHeart.heart2{animation-delay:-3.1s;animation-duration:5.6s}
@keyframes paris-heart-float{0%,100%{transform:translateY(3px) rotate(-7deg) scale(.95);opacity:.45}50%{transform:translateY(-15px) rotate(7deg) scale(1.06);opacity:.82}}
.parisDrawingPencil{pointer-events:none}

/* Static launch: override legacy page and third-party animation styles. */
html *,html *::before,html *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-motion-toggle],.parisLivingArt,.pencilLayer,.creatorLiving{display:none!important}
.pencilOriginal{opacity:1!important}.wordmarkFallback{visibility:visible!important}
.sceneLive>.parisHeroFlow{visibility:visible!important}

/* Mobile analytics consent: fixed, compact and with reserved page space. */
@media(max-width:430px){
  body:has(#analytics-choice:not([hidden])){padding-bottom:calc(144px + env(safe-area-inset-bottom))}
  #analytics-choice:not([hidden]){box-sizing:border-box;left:0;bottom:0;transform:none;width:100%;height:calc(144px + env(safe-area-inset-bottom));padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;overflow-y:auto;font-size:11px;line-height:1.35}
  #analytics-choice p{margin:0 0 7px}
  #analytics-choice div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #analytics-choice button{min-height:44px;padding:8px 10px;font-size:12px;font-weight:700}
  #parisWelcome.on:has(~ #analytics-choice:not([hidden])) .parisPhone{padding-bottom:calc(144px + env(safe-area-inset-bottom))!important}
}