/* DogLoop / digital cut-out workshop */
:root{--primary:#2448ff;--primary-hover:#1632c9;--background:#f4f1e8;--surface:#fffef8;--text:#151515;--muted:#51514b;--border:#151515;--accent:#166534;--error:#a71916;--radius:0;--shadow:8px 8px 0 #151515;--acid:#f3f447;--orange:#ff784f;--ink:#151515}body{font-family:Arial,Helvetica,sans-serif;background-image:radial-gradient(#15151512 .8px,transparent .8px);background-size:10px 10px}.wrap{width:min(1240px,calc(100% - 64px))}.header{height:96px;border-bottom:2px solid var(--ink)}.brand{font-size:32px;font-weight:900;letter-spacing:-2px}.brand-icon{border:2px solid var(--ink);border-radius:0;background:var(--acid);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg)}.brand-dot{color:var(--primary)}.header-tag{border:2px solid var(--ink);border-radius:0;background:var(--acid);color:var(--ink);font-family:monospace;font-size:12px;transform:rotate(2deg)}.header nav a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:5px}.hero{position:relative;text-align:left;padding-top:64px;padding-bottom:32px}.eyebrow{border:2px solid var(--ink);border-radius:0;background:var(--orange);color:var(--ink);font-family:monospace;font-size:12px;letter-spacing:1px;padding:9px 12px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}.tiny-dot{background:var(--ink);border-radius:0}.hero h1{font-family:"Arial Black",Arial,sans-serif;font-size:clamp(54px,6.7vw,94px);font-weight:900;text-transform:uppercase;letter-spacing:-5px;line-height:.96;margin:32px 0 24px;max-width:8.5ch;text-wrap:initial}.hero h1 span{color:var(--primary)}.lead{font-size:17px;max-width:36ch;line-height:1.6;margin-bottom:28px}.download-card{position:relative;border:3px solid var(--ink);border-radius:0;box-shadow:var(--shadow);padding:28px 28px 0;background:var(--surface);max-width:none;margin:0;animation:machine-enter .5s cubic-bezier(.2,.8,.3,1) both}.download-card::before{content:'';width:62px;height:18px;background:var(--acid);border:2px solid var(--ink);position:absolute;top:-12px;left:32px;transform:rotate(-8deg)}.card-heading{border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:22px}.mini-label{color:var(--muted);font-family:monospace;font-size:10px;letter-spacing:1px}.card-heading h2{font-size:25px;font-weight:850;letter-spacing:-1px;max-width:18ch}.format-pill{background:var(--ink);color:var(--acid);border-radius:0;padding:8px;font-family:monospace;transform:rotate(5deg)}.wizard-steps{border-bottom:2px solid var(--ink);gap:12px;padding-bottom:22px;margin-bottom:24px}.wizard-number{border:2px solid var(--ink);border-radius:0;background:var(--surface);color:var(--ink)}.wizard-steps [aria-current=step]{color:var(--ink)}.wizard-steps [aria-current=step] .wizard-number{border-color:var(--ink);background:var(--acid);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-5deg)}.wizard-steps .complete{color:var(--ink)}.wizard-steps .complete .wizard-number{background:var(--primary);color:#fff;border-color:var(--ink)}.wizard-steps small{font-family:monospace}.panel-intro h3{font-weight:800;font-size:25px;letter-spacing:-1px}.input-row{border:2px solid var(--ink);border-radius:0;background:white;gap:10px}.input-row:focus-within{border-color:var(--primary);box-shadow:4px 4px 0 var(--primary)}input{color:var(--ink)}.paste{border:2px solid var(--ink);border-radius:0;background:var(--acid);color:var(--ink)}.paste:hover{background:var(--orange)}.primary{border:2px solid var(--ink);border-radius:0;background:var(--primary);color:white;box-shadow:4px 4px 0 var(--ink);font-weight:750;padding:12px 18px;transition:transform .16s,box-shadow .16s,background .16s}.primary:hover{background:var(--primary-hover);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);filter:none}.back{border-radius:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px}.back:hover{background:var(--acid);color:var(--ink)}.card-note{border-top:2px solid var(--ink);font-family:monospace;font-size:11px}.benefits{justify-content:flex-start;gap:18px;font-family:monospace;color:var(--ink);font-size:11px;margin-top:28px}.benefits b{color:var(--ink)}.link-summary{border:1px solid var(--ink);background:var(--background);border-radius:0}.quality-choice{border:2px solid var(--ink);border-radius:0;background:white;margin-bottom:10px;transition:transform .16s,background .16s,box-shadow .16s}.quality-choice:has(input:checked){border-color:var(--ink);background:var(--acid);box-shadow:4px 4px 0 var(--ink);transform:translateX(-2px)}.choice-icon{border:1px solid var(--ink);border-radius:0;background:var(--ink);color:white;font-family:monospace}.choice-check{border:2px solid var(--ink)}.quality-choice:has(input:checked) .choice-check{border:5px solid var(--ink)}.type-options label{border:2px solid var(--ink);border-radius:0;background:white;padding:12px}.type-options label:has(:checked){background:var(--ink);color:white;border-color:var(--ink)}.type-options label:has(:checked) span{color:var(--acid)}.type-options input{accent-color:var(--primary)}.error{border:2px solid var(--error);border-radius:0;background:#fff0eb}.result{border-top:2px solid var(--ink)}video{border-radius:0;border:2px solid var(--ink)}.success-label{display:inline-block;background:var(--acid);border:1px solid var(--ink);padding:4px 7px;color:var(--ink)}.section-intro{text-align:left}.section-intro h2{font-size:48px;font-weight:900;letter-spacing:-2px}.how{padding-top:72px;border-top:2px solid var(--ink);margin-top:40px}.steps{gap:24px}.steps article{border:2px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--ink);background:var(--acid);transition:transform .2s}.steps article:nth-child(2){background:#fffef8;transform:rotate(-1deg)}.steps article:nth-child(3){background:var(--orange);transform:rotate(1deg)}.steps article:hover{transform:translateY(-4px) rotate(-1deg)}.step-number{background:var(--ink);color:white;border-radius:0;font-family:monospace}.steps h3{font-size:21px;font-weight:800}.steps p{color:var(--ink)}.faq{max-width:1240px;display:grid;grid-template-columns:1fr 1.2fr;gap:64px}.questions{margin-top:0;border-top:2px solid var(--ink)}details{border-bottom:2px solid var(--ink)}summary{font-size:16px}details p{color:var(--muted)}footer{border-top:2px solid var(--ink)}.creative-stamp{position:absolute;width:150px;height:150px;left:340px;top:370px;transform:rotate(12deg);pointer-events:none}.creative-stamp svg{position:absolute;width:100%;height:100%;fill:var(--acid);stroke:var(--ink);stroke-width:1.5}.creative-stamp span{position:absolute;inset:0;display:grid;align-content:center;text-align:center;font-family:"Arial Black",Arial,sans-serif;font-size:17px;line-height:1.1;font-weight:900;color:var(--ink)}.future-loader{--neon:#2448ff;--cyan:#151515;background:var(--acid);color:var(--ink);border:2px solid var(--ink);border-radius:0;box-shadow:5px 5px 0 var(--ink);padding:24px 18px 8px}.loader-grid{background-image:linear-gradient(#15151518 1px,transparent 1px),linear-gradient(90deg,#15151518 1px,transparent 1px);background-size:18px 18px;mask-image:none;inset:0;transform:rotate(-8deg)}.orbit{border-radius:12%;animation-duration:8s}.orbit-outer{border:2px dashed var(--ink);border-top:4px solid var(--primary);border-bottom:4px solid var(--ink)}.orbit-middle{border-right-color:var(--ink);border-left-color:var(--primary);border-width:3px;animation-duration:6s}.orbit-inner{border:2px solid var(--ink);border-top-color:var(--primary)}.loader-core{border-radius:0;background:var(--primary);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);color:white;animation:cutout-bounce 2.5s ease-in-out infinite}.orbit-particle{border-radius:0;background:var(--orange);border:1px solid var(--ink);width:9px;height:9px;box-shadow:2px 2px 0 var(--ink)}.particle-two{background:var(--primary)}.loader-label{font-family:monospace;color:var(--ink);font-weight:700;letter-spacing:1px}.future-loader strong{color:var(--ink);font-size:20px;font-weight:800}.future-loader p{color:var(--ink)}.loader-track{background:var(--surface);border:2px solid var(--ink);height:12px;border-radius:0}.loader-track span{border-radius:0;background:repeating-linear-gradient(135deg,var(--ink) 0 6px,var(--primary) 6px 12px)}.loader-motion{color:var(--ink);font-family:monospace;text-decoration:underline;border-radius:0}.loader-motion:hover{color:white;background:var(--ink)}:focus-visible{outline:3px solid var(--primary);outline-offset:5px}.quality-choice:has(input:focus-visible){outline-offset:5px}button:disabled{transform:none}.sr-only{pointer-events:none}@keyframes machine-enter{from{opacity:0;transform:translateY(18px) rotate(1deg)}to{opacity:1;transform:none}}@keyframes cutout-bounce{0%,100%{transform:rotate(-8deg) scale(.97)}50%{transform:rotate(8deg) scale(1.04)}}@media(min-width:1050px){.hero{display:grid;grid-template-columns:.95fr 1.05fr;column-gap:64px;align-content:start}.hero>.eyebrow{grid-column:1;grid-row:1;justify-self:start;align-self:start}.hero>h1{grid-column:1;grid-row:2;margin-top:30px}.hero>.lead{grid-column:1;grid-row:3}.hero>.download-card{grid-column:2;grid-row:1/6;align-self:start}.hero>.benefits{grid-column:1;grid-row:4;flex-wrap:wrap;margin-top:0}.creative-stamp{top:480px;left:330px;width:130px;height:130px}}@media(max-width:1049px){.hero h1{max-width:none;line-height:1}.hero>.download-card{margin-top:32px}.creative-stamp{right:20px;left:auto;top:100px;width:120px;height:120px}.hero .lead{max-width:40ch}.faq{gap:32px}.hero h1{font-size:64px;max-width:9ch}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.header{height:80px}.hero{padding-top:32px}.hero h1{font-size:58px;letter-spacing:-3px;max-width:9ch}.creative-stamp{width:92px;height:92px;right:0;top:62px}.creative-stamp span{font-size:11px}.lead{font-size:15px}.download-card{padding:24px 18px 0;box-shadow:5px 5px 0 var(--ink)}.card-heading h2{font-size:22px}.eyebrow{font-size:10px}.hero>.download-card{margin-top:28px}.wizard-steps{gap:8px}.section-intro h2{font-size:38px}.steps article{padding:24px}.faq{display:block}.questions{margin-top:28px}.how{padding-top:48px}.brand{font-size:27px}.loader-art{width:150px;height:150px}.future-loader{min-height:320px}.type-options label{min-height:48px}.benefits{flex-wrap:wrap}.panel-intro h3{font-size:22px}}@media(max-width:390px){.creative-stamp{width:70px;height:70px;top:76px}.creative-stamp span{font-size:9px}.hero h1{font-size:51px}.header nav{font-size:11px}.result{grid-template-columns:1fr}.wizard-actions .primary{font-size:13px}}@media(prefers-reduced-motion:reduce){.download-card,.loader-core,.orbit,.loader-track span{animation:none!important}.primary,.quality-choice,.steps article{transition:none}.steps article:hover{transform:none}.loader-track span{width:100%}}

.functions { padding-top: 30px; padding-bottom: 10px; }
.functions-heading { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.functions-heading h2 { font-size:22px; margin:0; }
.function-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.function-card { display:flex; align-items:center; gap:14px; text-align:left; padding:20px; border:3px solid #151515; background:#fff; color:#151515; box-shadow:4px 4px 0 #151515; cursor:pointer; min-height:102px; transition:background .2s,transform .2s; }
.function-card[aria-pressed=true] { background:#f3f447; }
.function-card[data-provider=youtube][aria-pressed=true] { background:#ff784f; }
.function-card strong { display:block; font-size:18px; }
.function-card small { display:block; margin-top:6px; font-size:13px; }
.function-symbol { font-size:30px; font-weight:900; flex:none; }
.function-state { margin-left:auto; font-size:11px; font-weight:700; }
.function-card:hover { transform:translateY(-2px); }
.function-card:disabled { cursor:wait; opacity:.65; }
.add-function { border-style:dashed; background:transparent; }
dialog { width:min(520px,calc(100% - 36px)); box-sizing:border-box; padding:30px; border:3px solid #151515; background:#f4f1e8; color:#151515; box-shadow:8px 8px 0 #151515; }
dialog::backdrop { background:rgb(21 21 21 / .65); }
dialog h2 { margin-top:12px; }
dialog p { line-height:1.6; }
dialog input { width:100%; box-sizing:border-box; min-height:48px; padding:12px; border:2px solid #151515; background:white; font-size:16px; margin:8px 0 18px; }
.dialog-close { float:right; min-width:44px; min-height:44px; }
dialog li { margin:12px 0; overflow-wrap:anywhere; }
@media(max-width:900px) { .function-card { flex-wrap:wrap; padding:15px; } .function-state { width:100%; margin-left:0; } }
@media(max-width:600px) { .function-options { grid-template-columns:1fr; } .function-card { min-height:80px; flex-wrap:nowrap; } .function-state { width:auto; margin-left:auto; } .functions-heading { display:block; } .functions-heading h2 { margin-top:10px; } }
@media(prefers-reduced-motion:reduce) { .function-card { transition:none; } .function-card:hover { transform:none; } }

/* One shared brand palette for each selectable function and its content. */
[data-provider=facebook] { --primary:#0866ff; --primary-hover:#0759de; --on-primary:#fff; --provider-soft:#eaf0ff; --provider-mark:#bdd0ff; --surface:#f5f8ff; --brand-decoration:#0866ff; }
[data-provider=youtube] { --primary:#cc0000; --primary-hover:#a80000; --on-primary:#fff; --provider-soft:#ffe9ec; --provider-mark:#ffb3c2; --surface:#fff7f8; --brand-decoration:#ff0033; }
[data-provider=tiktok] { --primary:#000; --primary-hover:#242424; --on-primary:#fff; --provider-soft:#ddfaf8; --provider-mark:#25f4ee; --surface:#f1fffe; --brand-decoration:linear-gradient(90deg,#25f4ee 50%,#fe2c55 50%); }
[data-provider=instagram] { --primary:#833ab4; --primary-hover:#682b92; --on-primary:#fff; --provider-soft:#fbe8f5; --provider-mark:#f4c4e2; --surface:#fff6fc; --brand-decoration:linear-gradient(110deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.function-options { grid-template-columns:repeat(5,minmax(0,1fr)); }
.function-card[data-provider] { position:relative; background:#fffef8; color:var(--ink); }
.function-card[data-provider][aria-pressed=true] { background:var(--primary); color:var(--on-primary); box-shadow:6px 6px 0 var(--ink); }
.function-card[data-provider][aria-pressed=true]::after { content:''; position:absolute; inset:auto 0 0; height:6px; background:var(--brand-decoration); }
.function-card[data-provider][aria-pressed=true]:hover { background:var(--primary-hover); }
.function-card[data-provider=tiktok][aria-pressed=true] .function-symbol { text-shadow:-2px -1px #25f4ee,2px 1px #fe2c55; }
.download-card[data-provider] { --acid:var(--provider-mark); background:var(--surface); scroll-margin-top:24px; transition:background-color .2s; }
.download-card[data-provider]::before { background:var(--brand-decoration); }
.download-card[data-provider] .primary { background:var(--primary); color:var(--on-primary); }
.download-card[data-provider] .primary:hover { background:var(--primary-hover); }
.download-card[data-provider] .wizard-number,
.download-card[data-provider] .quality-choice:has(input:checked),
.download-card[data-provider] .type-options label:has(input:checked),
.download-card[data-provider] .future-loader { background:var(--provider-mark); color:var(--ink); }
.download-card[data-provider] .paste,
.download-card[data-provider] .card-note,
.download-card[data-provider] .link-summary { background:var(--provider-soft); }
.download-card[data-provider] input { accent-color:var(--primary); }
.download-card[data-provider] .card-heading h2 { color:var(--primary); }
.download-card[data-provider] .type-options label:has(input:checked) span { color:var(--ink); }
.download-card[data-provider] .wizard-steps .complete .wizard-number,
.download-card[data-provider] .loader-core { background:var(--primary); color:var(--on-primary); }
.download-card[data-provider] .orbit-particle { background:var(--brand-decoration); }
.hero h1[data-provider] { color:var(--ink); }
.hero h1[data-provider] span { color:var(--primary); }
.hero h1[data-provider=tiktok] span { text-shadow:-2px -1px #25f4ee,2px 1px #fe2c55; }
.hero h1[data-provider=instagram] span { text-decoration:underline; text-decoration-color:#d62976; text-underline-offset:8px; text-decoration-thickness:4px; }
.eyebrow[data-provider] { position:relative; background:var(--primary); color:var(--on-primary); }
.eyebrow[data-provider]::after { content:''; position:absolute; inset:auto 0 0; height:4px; background:var(--brand-decoration); }
.eyebrow[data-provider] .tiny-dot { background:var(--on-primary); }
@media(max-width:1199px) and (min-width:601px) { .function-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .function-options { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .download-card[data-provider] { transition:none; } }

.legal-consent { border:2px solid var(--ink); background:var(--provider-soft); padding:16px; margin:20px 0; font-size:14px; line-height:1.6; }
.legal-consent label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; min-height:44px; }
.legal-consent input { width:22px; height:22px; margin-top:3px; flex:none; }
.legal-consent p { margin:12px 0 0; }
.legal-consent a,.legal-page a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
footer nav,.legal-links { display:flex; gap:16px; flex-wrap:wrap; }
footer nav a { color:var(--ink); padding:12px 0; }
.legal-page { max-width:800px; padding-top:40px; padding-bottom:60px; line-height:1.75; overflow-wrap:anywhere; }
.legal-page h1 { font-size:clamp(32px,5vw,54px); line-height:1.1; }
.legal-page h2 { margin-top:32px; font-size:23px; }
.legal-page .primary { display:inline-block; color:white; }

/* DogLoop: a dog portrait enclosed by a returning loop. */
.brand-icon { width:44px; height:44px; flex:none; }
.brand-icon img { width:36px; height:36px; display:block; }

/* A crescent of platforms, with a playful mascot at its center. */
.function-moon { position:fixed; right:0; top:50%; transform:translateY(-50%); width:116px; height:300px; z-index:30; border:3px solid var(--ink); border-right:0; border-radius:160px 0 0 160px; background:#fffef8; box-shadow:-5px 5px 0 var(--ink); }
.moon-function { position:absolute; width:48px; height:48px; border:2px solid var(--ink); border-radius:50%; background:#fffef8; color:var(--ink); box-shadow:3px 3px 0 var(--ink); display:grid; place-items:center; }
.moon-function span:first-child { font-size:25px; font-weight:900; }
.moon-function:nth-child(1) { left:57px; top:8px; }
.moon-function:nth-child(2) { left:8px; top:72px; }
.moon-function:nth-child(3) { left:8px; top:175px; }
.moon-function:nth-child(4) { left:57px; top:239px; }
.moon-function[aria-pressed=true] { background:var(--primary); color:var(--on-primary); }
.moon-function:hover { outline:2px solid var(--ink); outline-offset:3px; }
.moon-check { display:none; position:absolute; right:-4px; bottom:-4px; background:var(--ink); color:white; width:18px; height:18px; border-radius:50%; font-size:12px; }
.moon-function[aria-pressed=true] .moon-check { display:block; }
.moon-function:disabled { opacity:.6; cursor:wait; }
.moon-dog { position:absolute; left:54px; top:117px; width:60px; height:64px; padding:0; background:#f3f447; border:2px solid var(--ink); border-radius:50%; }
.moon-dog svg { width:58px; height:58px; stroke:none; }
.dog-tail { transform-origin:51px 39px; animation:tail-wag .45s ease-in-out infinite alternate; }
.tail-paused .dog-tail { animation-play-state:paused; }
body.moon-visible { padding-right:126px; }
@keyframes tail-wag { from { transform:rotate(-18deg); } to { transform:rotate(18deg); } }
@media(prefers-reduced-motion:reduce) { .dog-tail { animation:none; } }
.moon-dog { left:46px; }
@media(max-width:600px) { .moon-dog { left:29px; } }

/* DogLoop fetch: the mascot chases a play ball while the request runs. */
.future-loader .dog-fetch { width:min(280px,100%); height:auto; aspect-ratio:3/2; margin:0 auto 12px; }
.fetch-scene { width:100%; height:100%; overflow:visible; color:var(--primary); stroke:none; }
.fetch-pup { animation:pup-fetch 1.2s ease-in-out infinite; transform-origin:110px 130px; }
.fetch-paws { animation:paws-run .3s ease-in-out infinite alternate; transform-origin:110px 112px; }
.fetch-tail { animation:fetch-wag .22s ease-in-out infinite alternate; transform-origin:51px 39px; }
.fetch-ball { animation:ball-hop 1.2s ease-in-out infinite; transform-origin:196px 120px; }
.fetch-spark { animation:fetch-sparks .6s ease-in-out infinite alternate; }
.fetch-shadow { animation:shadow-fetch 1.2s ease-in-out infinite; transform-origin:center; }
@keyframes pup-fetch { 0%,100% { transform:translate(0,0) rotate(-4deg); } 50% { transform:translate(12px,-10px) rotate(4deg); } }
@keyframes paws-run { from { transform:rotate(-9deg); } to { transform:rotate(9deg); } }
@keyframes fetch-wag { from { transform:rotate(-20deg); } to { transform:rotate(20deg); } }
@keyframes ball-hop { 0%,100% { transform:translate(0,0) rotate(-15deg); } 50% { transform:translate(-8px,-32px) rotate(35deg); } }
@keyframes fetch-sparks { from { opacity:.25; } to { opacity:1; } }
@keyframes shadow-fetch { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.8); } }
@media(prefers-reduced-motion:reduce) { .dog-fetch * { animation:none!important; } }

.header-tag { display:inline-flex; align-items:center; gap:8px; }
.header-tag svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }

.account-button { border:2px solid var(--ink); background:var(--acid); padding:8px 12px; min-height:44px; font-weight:700; }
.login-dialog { width:min(520px,calc(100% - 32px)); padding:0; max-height:90dvh; overflow-y:auto; }
.login-dialog .dialog-close { position:absolute; right:8px; top:8px; z-index:2; border:2px solid var(--ink); background:white; font-size:24px; }
.login-loader { --provider-mark:#f3f447; --surface:#fffef8; --primary:#0866ff; margin:0; border:0; box-shadow:none; padding-top:40px; }
.login-loader h2 { font-size:28px; line-height:1.15; margin:8px 0; }
.google-login { display:flex; align-items:center; justify-content:center; gap:12px; background:white; color:var(--ink); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 16px; min-height:48px; margin:18px auto 0; font-weight:700; }
.google-login span { font-size:22px; color:#0866ff; }
.google-login:disabled { opacity:.65; cursor:not-allowed; }
.login-loader .login-privacy { font-size:12px; margin-bottom:12px; }
.login-privacy a { text-decoration:underline; }
#login-message { min-height:44px; }
@media(max-width:700px) { .header { flex-wrap:wrap; height:auto; padding-block:14px; gap:12px; } .header nav { gap:12px; } .account-button { margin-left:auto; } }

/* Login mascot waits at the locked door and gestures toward a key. */
.login-loader .login-wait { width:min(280px,100%); height:auto; aspect-ratio:3/2; margin:0 auto 12px; }
.login-scene { width:100%; height:100%; stroke:none; }
.login-scene svg { stroke:none; }
.login-pup { animation:login-wait 2.4s ease-in-out infinite; transform-origin:60px 140px; }
.login-paw { animation:login-point 1.2s ease-in-out infinite alternate; transform-origin:77px 110px; }
.login-key { animation:login-key 2.4s ease-in-out infinite; transform-origin:120px 60px; }
@keyframes login-wait { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(2deg); } }
@keyframes login-point { from { transform:rotate(-8deg); } to { transform:rotate(12deg); } }
@keyframes login-key { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-6px) rotate(6deg); } }
@media(prefers-reduced-motion:reduce) { .login-wait * { animation:none!important; } }

.account-wrap { position:relative; flex:none; }
.account-signed-in { border-radius:18px 18px 18px 4px; transform:rotate(-2deg); box-shadow:3px 3px 0 var(--ink); max-width:240px; overflow-wrap:anywhere; }
.account-menu { position:absolute; top:calc(100% + 12px); right:0; width:min(260px,calc(100vw - 32px)); padding:16px; background:#fffef8; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); z-index:40; }
.account-menu p { font-size:13px; line-height:1.5; margin:0 0 12px; }
.account-menu button { width:100%; min-height:44px; background:#f3f447; border:2px solid var(--ink); font-weight:700; }
@media(max-width:700px) { .account-wrap { margin-left:auto; } }

/* The page folds inward while the crescent swings into its reserved space. */
body { transition:padding-right 560ms cubic-bezier(.22,.8,.25,1); }
.function-moon { transform-origin:right center; }
body.moon-visible .function-moon { animation:moon-unfold 680ms cubic-bezier(.2,.85,.3,1) both; }
body.moon-visible .moon-function { animation:moon-button-pop 420ms cubic-bezier(.2,.9,.3,1.25) both; }
body.moon-visible .moon-function:nth-child(1) { animation-delay:140ms; }
body.moon-visible .moon-function:nth-child(2) { animation-delay:200ms; }
body.moon-visible .moon-function:nth-child(3) { animation-delay:260ms; }
body.moon-visible .moon-function:nth-child(4) { animation-delay:320ms; }
body.moon-visible .download-card { animation:card-fold 580ms cubic-bezier(.22,.8,.25,1) both; transform-origin:left center; }
/* Keep the offscreen source selector's width stable to prevent observer flicker. */
.functions { width:min(1240px,calc(100vw - 64px)); }
@keyframes moon-unfold { 0% { opacity:0; transform:translate(110%,-50%) rotate(18deg) scale(.8); } 70% { opacity:1; transform:translate(-5px,-50%) rotate(-3deg) scale(1.02); } 100% { opacity:1; transform:translate(0,-50%) rotate(0) scale(1); } }
@keyframes moon-button-pop { from { opacity:0; transform:scale(.6) rotate(-18deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes card-fold { 0% { transform:translateX(0) rotate(0); } 40% { transform:translateX(-4px) rotate(-.5deg); } 100% { transform:none; } }
@media(max-width:700px) { .functions { width:calc(100vw - 32px); } }
@media(prefers-reduced-motion:reduce) { body { transition:none; } body.moon-visible .function-moon,body.moon-visible .moon-function,body.moon-visible .download-card { animation:none!important; } }

.function-mobile-name { display:none; }
@media(max-width:600px) {
  .functions { padding-top:22px; }
  .functions-heading { margin-bottom:14px; }
  .functions-heading h2 { font-size:19px; margin-top:5px; }
  .function-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .function-card { position:relative; min-height:66px; padding:12px 16px 12px 12px; gap:10px; border-width:2px; border-radius:14px; box-shadow:2px 2px 0 var(--ink); flex-wrap:nowrap; }
  .function-card strong { font-size:15px; line-height:1.3; }
  .function-full-name { display:none; }
  .function-mobile-name { display:inline; }
  .function-symbol { font-size:24px; width:22px; text-align:center; }
  .function-card small { display:none; }
  .function-state { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .function-card[data-provider][aria-pressed=true] { box-shadow:3px 3px 0 var(--ink); }
  .function-card[data-provider][aria-pressed=true]::after { height:4px; inset:auto 10px 0; border-radius:4px 4px 0 0; }
  .function-card[data-provider][aria-pressed=true]::before { content:'✓'; position:absolute; top:4px; right:5px; font-size:10px; font-weight:900; }
  .add-function { grid-column:1 / -1; justify-content:center; min-height:46px; padding:8px 12px; box-shadow:none; border-radius:12px; }
  .add-function strong { font-size:13px; }
  .add-function .function-symbol { font-size:20px; }
}

/* The crescent folds away, leaving the page room to breathe again. */
.function-moon.moon-exiting { animation:moon-fold-away 520ms cubic-bezier(.55,.05,.7,.35) both; pointer-events:none; }
.moon-exiting .moon-function { animation:moon-button-away 260ms ease-in both; }
.moon-exiting .moon-function:nth-child(1) { animation-delay:180ms; }
.moon-exiting .moon-function:nth-child(2) { animation-delay:120ms; }
.moon-exiting .moon-function:nth-child(3) { animation-delay:60ms; }
.moon-exiting .moon-function:nth-child(4) { animation-delay:0ms; }
@keyframes moon-fold-away { 0% { opacity:1; transform:translate(0,-50%) rotate(0) scale(1); } 25% { opacity:1; transform:translate(-8px,-50%) rotate(-5deg) scale(1.02); } 100% { opacity:0; transform:translate(115%,-50%) rotate(22deg) scale(.75); } }
@keyframes moon-button-away { from { opacity:1; transform:scale(1) rotate(0); } to { opacity:0; transform:scale(.4) rotate(25deg); } }
@media(prefers-reduced-motion:reduce) { .function-moon.moon-exiting,.moon-exiting .moon-function { animation:none!important; } }

/* After server confirmation, the door opens and the pup trots through it. */
.login-success .login-door { animation:login-door-open 650ms ease-out both; transform-origin:160px 90px; }
.login-success .login-lock,.login-success .login-key { animation:login-unlock 400ms ease-out both; }
.login-success .login-pup { animation:login-enter-door 3.8s cubic-bezier(.3,.1,.4,1) 450ms both; }
.login-success .login-paw { animation:paws-run 250ms ease-in-out infinite alternate; }
@keyframes login-door-open { from { transform:skewY(0) scaleX(1); } to { transform:skewY(-18deg) scaleX(.25); } }
@keyframes login-unlock { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-12px); } }
@keyframes login-enter-door { 0% { opacity:1; transform:translate(0,0) scale(1); } 25% { opacity:1; transform:translate(30px,-5px) scale(.94); } 55% { opacity:1; transform:translate(72px,0) scale(.8); } 80% { opacity:1; transform:translate(115px,-3px) scale(.6); } 100% { opacity:0; transform:translate(135px,-5px) scale(.45); } }
@media(prefers-reduced-motion:reduce) { .login-success .login-door { animation:none!important; transform:scaleX(.25); transform-origin:160px 90px; } .login-success .login-lock,.login-success .login-key { animation:none!important; opacity:0; } .login-success .login-pup,.login-success .login-paw { animation:none!important; } }

/* Two independent legs alternate their steps while the body gently bobs. */
.login-leg-left { transform-origin:45px 119px; }
.login-leg-right { transform-origin:76px 119px; }
.login-success .login-leg { animation:dog-walk-step 600ms ease-in-out 450ms 6 both; }
.login-success .login-leg-right { animation-name:dog-walk-step-opposite; }
.login-success .login-gait { animation:dog-walk-bob 300ms ease-in-out 450ms 12 both; }
.login-success .login-paw { animation:dog-walk-arm 600ms ease-in-out 450ms 6 both; }
@keyframes dog-walk-step { 0%,100% { transform:rotate(-18deg) translateY(0); } 50% { transform:rotate(18deg) translateY(-3px); } }
@keyframes dog-walk-step-opposite { 0%,100% { transform:rotate(18deg) translateY(-3px); } 50% { transform:rotate(-18deg) translateY(0); } }
@keyframes dog-walk-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes dog-walk-arm { 0%,100% { transform:rotate(-10deg); } 50% { transform:rotate(10deg); } }
@media(prefers-reduced-motion:reduce) { .login-success .login-leg,.login-success .login-gait,.login-success .login-paw { animation:none!important; } }

#analytics-preferences { background:transparent; color:var(--ink); text-decoration:underline; padding:12px 0; min-height:44px; }
.analytics-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.analytics-actions button { flex:1; min-height:48px; padding:12px; border:2px solid var(--ink); background:#fffef8; color:var(--ink); font-weight:700; box-shadow:3px 3px 0 var(--ink); }
#analytics-dialog { line-height:1.6; max-height:90dvh; overflow:auto; }

/* Compact mandatory choice; native modal keeps background controls inert. */
#analytics-dialog {
  position:fixed; inset:auto max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) auto;
  margin:0; width:min(320px,calc(100vw - 32px)); padding:14px;
  max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain;
  z-index:1000; box-shadow:5px 5px 0 var(--ink); font-size:13px; line-height:1.45;
}
#analytics-dialog h2 { margin:0 0 10px; font-size:18px; line-height:1.15; text-wrap:balance; }
#analytics-dialog p { margin:10px 0; line-height:1.5; }
#analytics-dialog .dialog-close { position:absolute; top:6px; right:6px; float:none; }
#analytics-dialog .analytics-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
#analytics-dialog .analytics-actions button { min-height:44px; padding:6px 8px; font-size:12px; }

.moon-label { display:none; }
@media(max-width:767px) {
  html { scroll-padding-top:92px; }
  body.moon-visible { padding-right:0; }
  .function-moon { inset:max(10px,env(safe-area-inset-top)) 12px auto; width:auto; height:auto; transform:none; border:2px solid var(--ink); border-radius:18px; padding:8px; box-shadow:3px 4px 0 var(--ink); transform-origin:top center; }
  .function-moon nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .moon-function,.moon-function:nth-child(n) { position:relative; inset:auto; width:100%; min-width:0; height:48px; padding:3px; border-radius:10px; box-shadow:none; display:flex; flex-direction:column; justify-content:center; gap:2px; }
  .moon-function span:first-child { font-size:19px; line-height:1; }
  .moon-function .moon-label { display:block; font-size:10px; font-weight:700; line-height:1.1; }
  .moon-check { width:12px; height:12px; right:1px; bottom:1px; font-size:9px; }
  .function-moon .moon-dog { display:none; }
  body.moon-visible .function-moon { animation:mobile-nav-enter 280ms ease-out both; }
  body.moon-visible .moon-function,body.moon-visible .download-card { animation:none; }
  .function-moon.moon-exiting { animation:mobile-nav-exit 220ms ease-in both; }
  .moon-exiting .moon-function { animation:none; }
  #downloader, #reel-url { scroll-margin-top:92px; }
}
@keyframes mobile-nav-enter { from { opacity:0; transform:translateY(-24px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes mobile-nav-exit { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-24px) scale(.97); } }
@media(prefers-reduced-motion:reduce) { .function-moon.moon-exiting { animation:none!important; } }

@media(max-width:700px) {
  .account-menu { position:fixed; right:auto; width:min(260px,calc(100vw - 24px)); box-sizing:border-box; z-index:60; overflow:auto; overscroll-behavior:contain; }
}