@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;1,500&display=swap');
:root{--bg:#fbfcf8;--ink:#203c31;--muted:#7a8b7e;--surface:#fff;--border:#e7ece3;--hero:#e4f3e8;--accent:#285e48;--accent-ink:#fff;--tint:#edf5e9;--radius:23px;--heading:Manrope,Arial,sans-serif;--font:'DM Sans',Arial,sans-serif;--dock:#203a2e;--dock-text:#aebdb2;--shadow:0 8px 28px #193e2910;color:var(--ink);background:var(--bg);font-family:var(--font);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}a{text-decoration:none;color:inherit}button{color:inherit}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e9ab69;outline-offset:4px}[hidden]{display:none!important}.app-header{max-width:1280px;padding:24px 48px 21px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border)}.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:35px;letter-spacing:-2.3px;display:flex;align-items:center;gap:7px;line-height:1}.brand-icon{font-size:37px;line-height:1;letter-spacing:0;display:block;color:var(--accent)}.header-middle{display:flex;gap:12px;align-items:center;font-size:8px;letter-spacing:2px;color:var(--muted)}.header-middle span{color:#a8b49d}.header-right{display:flex;align-items:center;gap:15px}.credit-pill{background:var(--tint);border:1px solid var(--border);border-radius:30px;padding:9px 13px;font-size:10px;display:flex;align-items:center;gap:5px}.credit-pill>span:first-child{font-size:17px;line-height:.6;margin-right:2px;color:var(--accent)}.credit-pill b{font-weight:600}.avatar{border:1px solid var(--border);border-radius:50%;background:var(--surface);width:34px;height:34px;display:grid;place-items:center;font-size:11px;font-weight:600}.app-header .avatar{cursor:pointer}
#app-main{max-width:1280px;margin:0 auto;padding:28px 48px 115px;animation:appear .3s ease}.greeting{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.greeting p{margin:0;font-size:11px;font-weight:500}.greeting p>span{margin-left:6px}.greeting .date{font-size:8px;color:var(--muted);letter-spacing:1px}.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.15fr .85fr;min-height:320px;background:var(--hero);border-radius:28px;overflow:hidden;padding:35px 38px;margin-bottom:28px}.hero-copy{position:relative;z-index:2;align-self:center}.eyebrow{font-size:8px;letter-spacing:1.7px;font-weight:600;color:var(--muted);line-height:1.6;margin:0 0 15px;display:flex;align-items:center;gap:7px}.eyebrow .tiny-star{font-size:13px;color:var(--accent)}h1,h2,h3,p{overflow-wrap:break-word}h1{font-family:var(--heading);font-size:45px;font-weight:600;letter-spacing:-2px;line-height:1.13;margin:0 0 14px;max-width:560px}h1 em{font-style:normal;color:var(--accent)}.hero-description{font-size:11px;line-height:1.9;color:var(--muted);max-width:290px;margin:0 0 22px}.hero-actions{display:flex;align-items:center;gap:17px}.primary{background:var(--accent);color:var(--accent-ink);border:1px solid transparent;border-radius:12px;padding:12px 17px;display:inline-flex;align-items:center;justify-content:center;gap:23px;font-size:10px;font-weight:500;min-height:40px;transition:transform .2s,box-shadow .2s}.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.primary svg{width:16px;height:16px}.hero-small-note{font-size:8px;color:var(--muted);max-width:90px;line-height:1.65}.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:240px;z-index:1}.mascot{height:305px;width:270px;object-fit:contain;position:absolute;inset:auto;z-index:2;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 17px 12px #1a53331a);transition:filter .3s}.mascot:hover{filter:drop-shadow(0 23px 17px #1a533330);animation:float 2s ease-in-out infinite}.orbit-line{position:absolute;width:280px;height:210px;transform:rotate(-25deg);border:1px solid #99bda448;border-radius:50%;z-index:0}.orbit-line.second{width:220px;height:300px;transform:rotate(48deg);border-style:dashed}.art-star{position:absolute;font-size:22px;color:#679f7d;top:12px;right:18px;transform:rotate(15deg)}.art-star.small{font-size:11px;top:auto;bottom:28px;right:auto;left:10px}.float-label{position:absolute;bottom:17px;right:-8px;background:#ffffffb5;color:#426d50;border:1px solid #ffffffa6;font-size:8px;padding:9px 12px;border-radius:20px;transform:rotate(-7deg);z-index:3;backdrop-filter:blur(10px)}.floating-dot{width:6px;height:6px;border-radius:50%;background:#d9a96d;position:absolute;top:15px;left:25px}.hero-number{display:none}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-title h2{font-size:15px;letter-spacing:-.45px;font-weight:600;margin:0}.text-button{border:0;background:none;color:var(--muted);padding:4px 0;font-size:9px;display:inline-flex;align-items:center;gap:7px}.text-button svg{width:12px;height:12px}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}.tool-card{text-align:left;border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px 15px;background:var(--surface);min-height:133px;transition:transform .2s,box-shadow .2s;position:relative}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.tool-icon{width:35px;height:35px;border-radius:12px;background:var(--tint);display:grid;place-items:center;margin-bottom:14px;color:var(--accent)}.tool-icon svg{width:19px;height:19px}.tool-card:nth-child(2) .tool-icon{background:#fff0dc;color:#ae8855}.tool-card:nth-child(3) .tool-icon{background:#ebedf9;color:#7277ac}.tool-card:nth-child(4) .tool-icon{background:#f8eaf0;color:#b18193}.tool-card h3{font-size:11px;letter-spacing:-.1px;margin:0 0 5px;font-weight:600}.tool-card p{font-size:8px;color:var(--muted);margin:0;line-height:1.6}.card-arrow{position:absolute;right:13px;top:21px;color:var(--muted);font-size:11px}.tool-index{display:none}.recent-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:13px}.project-card{padding:14px 17px;border:1px solid var(--border);border-radius:16px;background:var(--surface);text-align:left;display:flex;align-items:center;gap:12px;width:100%;transition:.2s}.project-card:hover{border-color:var(--accent)}.project-thumb{width:40px;height:40px;background:#e7ecdf;display:flex;align-items:center;justify-content:center;border-radius:11px;color:#728366;flex-shrink:0}.project-thumb svg{width:19px;height:19px}.project-card:nth-child(2) .project-thumb{background:#e7e6f1;color:#85809c}.project-details{min-width:0}.project-details h3{font-size:10px;margin:0 0 5px;font-weight:600}.project-details p{font-size:8px;color:var(--muted);margin:0}.project-card>svg{margin-left:auto;width:15px;height:15px;color:var(--muted)}.helper-line{margin:19px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:8px;color:var(--muted)}.helper-line span{color:#9bb68f}.bottom-nav{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:3px;align-items:center;background:var(--dock);color:var(--dock-text);border:1px solid #ffffff14;border-radius:21px;padding:6px 9px;box-shadow:0 10px 35px #15251e25;backdrop-filter:blur(22px)}.nav-item{display:flex;align-items:center;justify-content:center;gap:8px;min-width:87px;min-height:43px;border:0;background:transparent;color:inherit;border-radius:14px;padding:10px 13px;font-size:9px;white-space:nowrap;transition:.2s}.nav-item svg{width:17px;height:17px}.nav-item.active{background:#ffffff17;color:#fff}.nav-item:hover{background:#ffffff12;color:#fff}.nav-item.create-link{background:#b9e3b9;color:#234730;margin:0 3px}.nav-item.create-link.active{background:#d2f3d0;box-shadow:0 0 0 2px #b4e0b530}.nav-item.create-link svg{width:19px;height:19px}.nav-item.menu-open{background:#ffffff20;color:white}
.page-heading{padding:8px 0 26px}.page-heading h1{font-size:35px;letter-spacing:-1.5px;margin-bottom:12px}.page-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0;line-height:1.8}.back-button{border:0;background:none;display:inline-flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);padding:0;margin:0 0 22px}.back-button svg{width:15px;height:15px;transform:rotate(180deg)}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.form-card,.result-card,.info-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:26px}.form-card h2,.result-card h2,.info-card h2{font-family:var(--heading);font-weight:600;font-size:18px;letter-spacing:-.6px;margin:0 0 23px}.field{display:block;margin-bottom:18px}.field>span{display:block;font-size:10px;font-weight:600;margin-bottom:8px}.field input,.field textarea,.field select{width:100%;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:12px 13px;font-size:11px;outline-offset:1px;min-height:40px}.field textarea{resize:vertical;min-height:90px;line-height:1.8}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-card .primary{width:100%;justify-content:space-between}.form-note{color:var(--muted);font-size:9px;text-align:center;line-height:1.8;margin:13px 0 0}.result-empty{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:340px}.result-empty img{width:125px;height:170px;object-fit:contain;animation:float 5s infinite ease-in-out}.result-empty h3{font-size:16px;font-weight:500;margin:20px 0 8px;letter-spacing:-.4px}.result-empty p{font-size:11px;line-height:1.8;color:var(--muted);max-width:220px;margin:0}.result-tag{font-size:8px;text-transform:uppercase;letter-spacing:1px;background:var(--tint);color:var(--accent);border:1px solid var(--border);padding:6px 9px;border-radius:6px}.result-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.result-top svg{width:17px;color:var(--accent)}.result-copy{font-size:12px;line-height:1.9;white-space:pre-wrap;margin:0 0 26px;color:var(--ink)}.result-buttons{display:flex;gap:8px;flex-wrap:wrap}.secondary{background:var(--surface);border:1px solid var(--border);padding:11px 13px;font-size:10px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.secondary svg{width:15px;height:15px}.saved-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.saved-card{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:var(--surface);text-align:left;display:flex;flex-direction:column;gap:15px;cursor:pointer}.saved-card h2{font-size:15px;margin:0;font-weight:500}.saved-card p{font-size:10px;color:var(--muted);line-height:1.9;margin:0}.saved-card>span{font-size:8px;letter-spacing:1px;color:var(--muted)}.saved-card .project-thumb{width:48px;height:48px}.library-empty{padding:40px;border:1px dashed var(--border);border-radius:var(--radius);text-align:center}.credits-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.credit-hero{background:var(--hero);border-radius:var(--radius);padding:30px;position:relative;overflow:hidden;min-height:300px}.credit-hero .credit-big{font-family:var(--heading);font-size:70px;line-height:1;letter-spacing:-3px;margin:28px 0 14px}.credit-hero .credit-big small{font-size:16px;color:var(--muted);letter-spacing:0}.credit-hero p{font-size:11px;line-height:1.9;max-width:200px;color:var(--muted)}.credit-hero img{position:absolute;right:0;bottom:-5px;width:170px;height:230px;object-fit:contain;animation:float 5s ease-in-out infinite}.credit-meter{width:55%;height:5px;border-radius:5px;background:#869f7025;overflow:hidden;margin-top:24px}.credit-meter i{display:block;height:100%;background:var(--accent);width:100%;border-radius:5px}.info-card p{font-size:11px;line-height:1.9;color:var(--muted)}.info-card ul{padding:0;list-style:none;display:grid;gap:13px;font-size:11px;margin:23px 0}.info-card li{display:flex;gap:10px;align-items:center}.info-card li svg{width:15px;height:15px;color:var(--accent)}.invite-box{border-top:1px solid var(--border);padding-top:20px;margin-top:24px}.invite-box label{display:block;font-size:10px;font-weight:600;margin-bottom:9px}.invite-control{display:flex;gap:8px}.invite-control input{min-width:0;flex:1;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:10px;padding:11px;font-size:11px}.invite-control button{padding:9px 15px;min-height:40px;font-size:10px}.invite-note{font-size:9px!important}.sheet-overlay{position:fixed;inset:0;background:#0a1d2599;backdrop-filter:blur(4px);z-index:40}.menu-sheet{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:440px;max-width:calc(100% - 28px);max-height:calc(100dvh - 35px);overflow:auto;overscroll-behavior:contain;border-radius:28px;background:var(--surface);color:var(--ink);padding:12px 26px 23px;box-shadow:0 20px 90px #091b2533;z-index:50;animation:sheet-in .25s ease;border:1px solid var(--border)}.sheet-handle{width:35px;height:4px;background:var(--border);border-radius:4px;margin:0 auto 23px}.sheet-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.sheet-heading .eyebrow{font-size:8px;margin-bottom:9px}.sheet-heading h2{font-family:var(--heading);font-size:24px;line-height:1.2;letter-spacing:-.8px;font-weight:500;margin:0}.icon-button{background:var(--tint);border:0;border-radius:50%;font-size:25px;font-weight:400;width:31px;height:31px;line-height:1}.menu-profile{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:15px;padding:14px;margin:23px 0 15px}.menu-profile strong{font-size:11px;display:block;font-weight:500}.menu-profile span:not(.small-status){display:block;font-size:9px;color:var(--muted);margin-top:4px}.small-status{margin-left:auto;font-size:8px;color:var(--accent);background:var(--tint);padding:4px 6px;border-radius:5px}.menu-links{display:grid}.menu-link{background:none;border:0;border-bottom:1px solid var(--border);padding:15px 0;display:flex;align-items:center;gap:12px;font-size:11px;text-align:left}.menu-link>svg{width:18px;height:18px;color:var(--muted)}.menu-link>span:last-child{margin-left:auto;color:var(--muted)}.motion-option{display:flex;align-items:center;justify-content:space-between;padding:22px 0}.motion-option strong{display:block;font-size:11px;font-weight:500}.motion-option span{display:block;font-size:9px;color:var(--muted);margin-top:5px}#motion-switch{height:23px;width:40px;border:0;background:var(--accent);border-radius:20px;padding:3px;display:flex;align-items:center;justify-content:flex-end}#motion-switch i{display:block;width:17px;height:17px;background:white;border-radius:50%;box-shadow:0 1px 2px #0002}#motion-switch[aria-checked=false]{background:#a0aaa1;justify-content:flex-start}.menu-foot{font-size:9px;color:var(--muted);line-height:1.7;border-top:1px solid var(--border);padding-top:16px}.menu-foot span{display:block;font-size:8px;margin-top:3px}#toast{position:fixed;left:50%;bottom:95px;transform:translate(-50%,15px);background:var(--ink);color:var(--bg);box-shadow:0 7px 40px #0002;border-radius:12px;padding:13px 20px;opacity:0;pointer-events:none;transition:.22s;font-size:11px;z-index:70;max-width:90%;text-align:center;line-height:1.6}#toast.show{opacity:1;transform:translate(-50%,0)}body.no-motion .mascot,body.no-motion .credit-hero img,body.no-motion .result-empty img{animation:none!important}
/* 02 · Cosmic Glass */
html[data-theme=cosmic]{--bg:#0e1726;--ink:#eff7f7;--muted:#92a4b9;--surface:#172238;--border:#2a3951;--hero:#192e40;--accent:#a7ead6;--accent-ink:#123d37;--tint:#1c3940;--heading:'Space Grotesk',sans-serif;--dock:#213045df;--dock-text:#99b2c2;--shadow:0 12px 45px #0003;color-scheme:dark;background:radial-gradient(ellipse at 95% 0,#20405350,transparent 45%),#0e1726}html[data-theme=cosmic] body{background:radial-gradient(ellipse at 12% 43%,#192d4d44,transparent 45%)}html[data-theme=cosmic] .hero{background:radial-gradient(ellipse at 78% 68%,#285a6348,transparent 65%),linear-gradient(110deg,#16263d,#153c41);border:1px solid #4c798a3b;min-height:345px;border-radius:23px}html[data-theme=cosmic] .hero h1{font-size:46px}html[data-theme=cosmic] .hero h1 em{background:linear-gradient(110deg,#b1f1d5,#a1bbf2);color:transparent;background-clip:text}html[data-theme=cosmic] .orbit-line{border-color:#77c5cd3b}html[data-theme=cosmic] .mascot{height:340px;width:285px;filter:drop-shadow(0 0 35px #b6dfba22)}html[data-theme=cosmic] .hero-art:after{content:'';position:absolute;width:220px;height:140px;background:#6ccfba2c;filter:blur(40px);bottom:0;z-index:0}html[data-theme=cosmic] .art-star{color:#afdddf}html[data-theme=cosmic] .float-label{background:#213b51d1;color:#b7e1de;border-color:#49667c6e}html[data-theme=cosmic] .tool-card{background:linear-gradient(140deg,#202e43,#162035);border-color:#32425b;border-radius:17px;min-height:124px}html[data-theme=cosmic] .tool-icon{background:#24483f;color:#b9ebcc}html[data-theme=cosmic] .tool-card:nth-child(2) .tool-icon{background:#423840;color:#e9c2a1}html[data-theme=cosmic] .tool-card:nth-child(3) .tool-icon{background:#303755;color:#b6b8ee}html[data-theme=cosmic] .tool-card:nth-child(4) .tool-icon{background:#422c46;color:#d9b1d4}html[data-theme=cosmic] .project-thumb{background:#243c44;color:#a1ccc2}html[data-theme=cosmic] .project-card:nth-child(2) .project-thumb{background:#303750;color:#bdc6ec}html[data-theme=cosmic] .nav-item.create-link{background:#a7ead6;color:#173b36}html[data-theme=cosmic] .bottom-nav{box-shadow:0 10px 50px #0005;border-color:#526a7952}html[data-theme=cosmic] .credit-pill{background:#1e3342}html[data-theme=cosmic] .primary{box-shadow:0 0 28px #9de1c411}
/* 03 · Peach Planet */
html[data-theme=peach]{--bg:#fffaf3;--ink:#593e34;--muted:#a08b7e;--surface:#fffefd;--border:#eee2d3;--hero:#ffdfc9;--accent:#b85b40;--accent-ink:#fffaf4;--tint:#f8eadd;--heading:Fraunces,Georgia,serif;--dock:#6d4435;--dock-text:#ddc8b9;--radius:26px}html[data-theme=peach] .hero{border-radius:100px 28px 90px 28px;min-height:330px;padding-left:45px;overflow:visible;background:linear-gradient(100deg,#ffe5cf,#ffdacb)}html[data-theme=peach] h1{font-size:47px;letter-spacing:-1.8px;font-weight:500}html[data-theme=peach] h1 em{font-style:italic;color:#b45a40}html[data-theme=peach] .hero-art:before{content:'';position:absolute;width:215px;height:215px;background:#fff1d8;border-radius:50%;box-shadow:0 0 0 12px #ffedcd60}html[data-theme=peach] .mascot{height:325px;width:280px;transform:rotate(7deg)}html[data-theme=peach] .orbit-line{border-color:#d98f6b4a}html[data-theme=peach] .art-star{color:#c57751;font-size:32px}html[data-theme=peach] .art-star.small{font-size:16px}html[data-theme=peach] .float-label{background:#fff9ed;border:1px solid #eec4a0;color:#9d654b;transform:rotate(8deg)}html[data-theme=peach] .tool-grid{grid-template-columns:repeat(4,1fr);gap:15px}html[data-theme=peach] .tool-card{border-radius:25px 25px 25px 8px;padding-top:17px;background:#fff5e7;border-color:#f0e4d3;box-shadow:0 3px 0 #eee0cb3b;min-height:140px}html[data-theme=peach] .tool-card:nth-child(2){background:#f0f4e7}html[data-theme=peach] .tool-card:nth-child(3){background:#f4eff8}html[data-theme=peach] .tool-card:nth-child(4){background:#fff0ee}html[data-theme=peach] .tool-icon{background:#fff9f0;border-radius:50%;color:#b87b53}html[data-theme=peach] .tool-card:nth-child(2) .tool-icon{background:#fffdf0;color:#6e8b5a}html[data-theme=peach] .tool-card:nth-child(3) .tool-icon{background:#fcf8ff;color:#9880af}html[data-theme=peach] .tool-card:nth-child(4) .tool-icon{background:#fff8f5;color:#bd817c}html[data-theme=peach] .tool-card h3{font-size:12px}html[data-theme=peach] .section-title h2{font-family:Fraunces,serif;font-size:19px;font-weight:500}html[data-theme=peach] .primary{border-radius:25px}html[data-theme=peach] .bottom-nav{border-radius:25px}html[data-theme=peach] .nav-item.create-link{background:#ffe0bb;color:#6b442d}html[data-theme=peach] .project-card{border-radius:18px}html[data-theme=peach] .brand-icon{color:#c17352}
/* 04 · Lunar Atelier */
html[data-theme=atelier]{--bg:#f8f5ef;--ink:#332f2d;--muted:#91857b;--surface:#fffcf6;--border:#e1d9cc;--hero:#e9e8db;--accent:#694454;--accent-ink:#fff9ef;--tint:#eee5e5;--heading:Fraunces,Georgia,serif;--dock:#3b3333;--dock-text:#c5b9af;--radius:5px}html[data-theme=atelier] .brand-icon{font-size:29px}html[data-theme=atelier] .brand{font-size:32px}html[data-theme=atelier] .app-header{border-bottom-color:#d4cabe}html[data-theme=atelier] .hero{border-radius:3px;background:transparent;padding:24px 0 29px;min-height:300px;border-bottom:1px solid #d4cabe;grid-template-columns:1.35fr .65fr}html[data-theme=atelier] .hero-copy{padding-right:20px}html[data-theme=atelier] h1{font-size:53px;font-weight:400;line-height:1.02;letter-spacing:-1.8px;max-width:540px}html[data-theme=atelier] h1 em{font-style:italic;font-weight:400}html[data-theme=atelier] .hero-description{max-width:340px;color:#8d8177}html[data-theme=atelier] .hero-art{height:265px;align-self:center;background:#e7e9dd;border-radius:140px 140px 4px 4px;border:1px solid #dedfd1}html[data-theme=atelier] .mascot{height:300px;width:240px;bottom:-13px}html[data-theme=atelier] .orbit-line{display:none}html[data-theme=atelier] .float-label{font-size:7px;background:#fffaf1;border-color:#e1d9cb;border-radius:3px;transform:rotate(-4deg);right:-10px;bottom:17px;color:#89766a}html[data-theme=atelier] .art-star{color:#baaa90;top:20px;right:20px}html[data-theme=atelier] .hero-actions{gap:14px}html[data-theme=atelier] .primary{border-radius:4px}html[data-theme=atelier] .hero-small-note{font-size:8px}html[data-theme=atelier] .tool-grid{grid-template-columns:1fr 1fr;gap:0 30px;margin-bottom:22px}html[data-theme=atelier] .tool-card{padding:16px 9px 16px 42px;min-height:80px;border:0;border-bottom:1px solid #dcd3c7;border-radius:0;background:none;display:flex;align-items:center;gap:14px}html[data-theme=atelier] .tool-card:hover{box-shadow:none;transform:translateX(3px);background:#f1ebe2}html[data-theme=atelier] .tool-index{display:block;position:absolute;left:2px;top:28px;font-family:Fraunces,serif;font-size:15px;color:#aa9b89}html[data-theme=atelier] .tool-icon{margin:0;border-radius:50%;width:32px;height:32px;flex-shrink:0}html[data-theme=atelier] .tool-card h3{font-family:Fraunces,serif;font-size:15px;font-weight:400}html[data-theme=atelier] .card-arrow{top:28px;right:0}html[data-theme=atelier] .section-title h2{font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase}html[data-theme=atelier] .section-title .text-button{font-size:9px}html[data-theme=atelier] .project-card{border-radius:4px;background:none}html[data-theme=atelier] .project-thumb{border-radius:50%;background:#e8e6d9;color:#8c8c70}html[data-theme=atelier] .project-details h3{font-family:Fraunces,serif;font-weight:400;font-size:13px}html[data-theme=atelier] .bottom-nav{border-radius:13px;padding:5px 8px}html[data-theme=atelier] .nav-item{border-radius:7px}html[data-theme=atelier] .nav-item.create-link{background:#e7d7cd;color:#624c47}html[data-theme=atelier] .greeting .date{letter-spacing:1.7px}html[data-theme=atelier] .credit-pill{border-radius:5px}
/* 05 · Neo Arcade */
html[data-theme=arcade]{--bg:#f1f2e6;--ink:#242b22;--muted:#777e68;--surface:#fffef5;--border:#2f362b;--hero:#d0f568;--accent:#283c26;--accent-ink:#e3ff9c;--tint:#edf5d3;--heading:'Space Grotesk',Arial,sans-serif;--dock:#242b22;--dock-text:#b9c5a4;--radius:8px;--shadow:4px 4px 0 #2e392b}html[data-theme=arcade] .hero{border:2px solid #283525;border-radius:8px;padding:30px 33px;min-height:320px;box-shadow:6px 6px 0 #293527;margin-bottom:33px;background-image:radial-gradient(#7aa43933 1px,transparent 1px);background-size:15px 15px}html[data-theme=arcade] h1{font-size:48px;letter-spacing:-2px;line-height:1.05;font-weight:700;text-transform:uppercase}html[data-theme=arcade] h1 em{color:#243920}html[data-theme=arcade] .eyebrow{font-family:monospace;color:#536f38;letter-spacing:1.1px;font-weight:400}html[data-theme=arcade] .hero-description{color:#5a753f;font-family:monospace;font-size:10px;line-height:1.8;max-width:280px}html[data-theme=arcade] .hero-small-note{color:#577238;font-family:monospace}html[data-theme=arcade] .hero-art:before{content:'';position:absolute;width:205px;height:205px;border-radius:50%;background:#f5ffc6;border:1.5px solid #6a853b}html[data-theme=arcade] .mascot{height:320px;width:280px;filter:drop-shadow(4px 3px 0 #fffef5)}html[data-theme=arcade] .orbit-line{border-color:#5b842b45}html[data-theme=arcade] .float-label{background:#fffef4;border:1.5px solid #2d3a27;color:#394b2f;box-shadow:2px 2px 0 #35432b;border-radius:4px;font-family:monospace;transform:rotate(6deg)}html[data-theme=arcade] .art-star{color:#344e28;top:3px;font-size:35px}html[data-theme=arcade] .art-star.small{font-size:16px}html[data-theme=arcade] .primary{border-radius:5px;border:1px solid #1e2d1c;box-shadow:3px 3px 0 #ffffff70;font-family:monospace;text-transform:uppercase;letter-spacing:.1px}html[data-theme=arcade] .tool-grid{grid-template-columns:repeat(2,1fr);gap:13px}html[data-theme=arcade] .tool-card{min-height:88px;display:flex;align-items:center;gap:15px;border:1.5px solid #35422d;box-shadow:3px 3px 0 #dce3ce;padding:17px 20px;border-radius:7px}html[data-theme=arcade] .tool-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #a7bb8b}html[data-theme=arcade] .tool-icon{margin:0;border:1px solid #c8d7ae;border-radius:5px;flex-shrink:0}html[data-theme=arcade] .tool-card h3{font-family:'Space Grotesk',sans-serif;font-size:13px;text-transform:uppercase}html[data-theme=arcade] .tool-card p{font-family:monospace;font-size:8px}html[data-theme=arcade] .card-arrow{top:25px;right:15px;font-size:15px}html[data-theme=arcade] .section-title h2{font-family:monospace;text-transform:uppercase;font-size:12px;letter-spacing:.3px}html[data-theme=arcade] .text-button{font-family:monospace;font-size:8px}html[data-theme=arcade] .bottom-nav{border-radius:10px;border:2px solid #111c13;box-shadow:4px 4px 0 #bac6a0;padding:5px 8px}html[data-theme=arcade] .nav-item{border-radius:5px;font-family:monospace;font-size:9px}html[data-theme=arcade] .nav-item.create-link{background:#d0f568;color:#243920}html[data-theme=arcade] .credit-pill{border-radius:5px;border:1px solid #ced9b3;font-family:monospace;font-size:9px}html[data-theme=arcade] .project-card{border-radius:6px;border-color:#d5dbc8}html[data-theme=arcade] .hero-number{display:block;position:absolute;right:13px;top:12px;border:1px solid #8ba74f;padding:4px 7px;font-size:8px;font-family:monospace;color:#5c723d}
@keyframes float{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -9px;rotate:2deg}}@keyframes appear{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes sheet-in{from{opacity:.6;translate:0 30px}to{opacity:1;translate:0 0}}
@media(min-width:1500px){.app-header{padding-top:30px;padding-bottom:27px}#app-main{padding-top:35px}.hero{min-height:380px;padding:45px}.hero h1{font-size:55px}.hero-description{font-size:13px;max-width:350px}.mascot{height:370px;width:320px}.hero-art{min-height:280px}.tool-card{min-height:150px;padding:23px}.tool-card h3{font-size:13px}.tool-card p{font-size:10px}.tool-icon{margin-bottom:18px;width:40px;height:40px}.section-title h2{font-size:17px}}
@media(max-width:700px){
 .app-header{padding:20px 22px 18px;gap:12px;max-width:none}.brand{font-size:31px;gap:5px}.brand-icon{font-size:33px}.header-middle{display:none}.header-right{gap:10px}.avatar{width:32px;height:32px;font-size:10px}.credit-pill{padding:8px 10px;font-size:9px;gap:4px}.credit-pill>span:first-child{font-size:15px}.credit-word{display:none}
 #app-main{padding:23px 21px 107px}.greeting{margin-bottom:17px}.greeting p{font-size:11px}.greeting .date{font-size:7px;letter-spacing:.8px}.hero{min-height:268px;display:block;padding:25px 22px;border-radius:23px;margin-bottom:27px;overflow:hidden}.hero-copy{max-width:215px}.hero .eyebrow{font-size:6px;letter-spacing:1.4px;margin-bottom:13px;max-width:180px}.eyebrow .tiny-star{font-size:10px}.hero h1{font-size:31px;letter-spacing:-1.4px;max-width:215px;margin-bottom:12px;line-height:1.13}.hero h1 em{display:block}.hero-description{font-size:9px;line-height:1.85;max-width:163px;margin-bottom:21px}.hero-actions{gap:0}.primary{font-size:9px;padding:11px 12px;gap:12px;min-height:39px}.primary svg{width:14px;height:14px}.hero-small-note{display:none}.hero-art{position:absolute;right:-39px;top:25px;width:190px;height:245px;min-height:0;display:flex;align-items:center;justify-content:center}.mascot{height:245px;width:187px;position:relative;flex-shrink:0}.orbit-line{width:180px;height:130px;left:0;top:55px}.orbit-line.second{width:130px;height:200px;top:15px;left:25px}.art-star{top:0;right:25px;font-size:18px}.art-star.small{font-size:9px;bottom:8px;left:15px}.float-label{bottom:1px;right:41px;font-size:6px;padding:6px 8px;white-space:nowrap;transform:rotate(-8deg)}.floating-dot{top:14px;left:36px;width:4px;height:4px}.section-title{margin-bottom:13px}.section-title h2{font-size:14px}.text-button{font-size:8px;gap:4px}.text-button svg{width:11px;height:11px}.tool-grid{grid-template-columns:1fr 1fr;gap:11px;margin-bottom:25px}.tool-card{padding:16px 14px 15px;border-radius:18px;min-height:128px}.tool-icon{width:32px;height:32px;margin-bottom:12px;border-radius:10px}.tool-icon svg{width:18px;height:18px}.tool-card h3{font-size:11px;margin-bottom:6px}.tool-card p{font-size:8px;line-height:1.6;max-width:110px}.card-arrow{right:12px;top:18px;font-size:10px}.recent-grid{grid-template-columns:1fr;gap:9px}.project-card{padding:13px 14px;border-radius:13px}.project-details h3{font-size:10px}.project-details p{font-size:8px}.project-thumb{width:36px;height:36px;border-radius:9px}.helper-line{font-size:7px;margin-top:17px}
 .bottom-nav{bottom:0;left:0;transform:none;width:100%;border-radius:19px 19px 0 0;padding:9px 10px max(10px,env(safe-area-inset-bottom));gap:0;justify-content:space-around;border-width:1px 0 0;min-height:76px;box-shadow:0 -4px 25px #12231e13}.nav-item{flex:1;min-width:0;max-width:70px;min-height:52px;flex-direction:column;gap:5px;padding:7px 3px;font-size:8px;border-radius:12px}.nav-item svg{width:21px;height:21px}.nav-item.create-link{margin:0 5px;min-width:55px;max-width:60px;position:relative;top:-5px;min-height:55px;box-shadow:0 4px 10px #162a2420}.nav-item.create-link svg{width:23px;height:23px}.nav-item.active:not(.create-link){background:none;color:white}.nav-item.active:not(.create-link):before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#b9e3b9;bottom:3px}.nav-item{position:relative}#toast{bottom:93px;min-width:200px;font-size:10px}
 .page-heading{padding:0 0 23px}.page-heading h1{font-size:29px;letter-spacing:-1px}.page-heading p:not(.eyebrow){font-size:11px}.page-heading .eyebrow{font-size:7px;margin-bottom:9px}.back-button{margin-bottom:22px;font-size:10px}.workspace{grid-template-columns:1fr;gap:16px}.form-card,.result-card,.info-card{padding:20px;border-radius:19px}.form-card h2,.result-card h2,.info-card h2{font-size:18px;margin-bottom:22px}.field>span{font-size:10px}.field input,.field select,.field textarea{font-size:12px;padding:12px;min-height:44px}.form-card .primary{font-size:11px;padding:13px 15px}.result-empty{min-height:230px}.result-empty img{height:125px;width:100px}.result-empty h3{font-size:15px;margin-top:15px}.result-empty p{font-size:10px}.result-copy{font-size:12px}.saved-projects{grid-template-columns:1fr;gap:13px}.saved-card{padding:20px}.saved-card h2{font-size:15px}.credits-layout{grid-template-columns:1fr;gap:16px}.credit-hero{min-height:270px;padding:25px}.credit-hero .credit-big{font-size:65px;margin-top:20px}.credit-hero img{width:160px;height:220px;right:0;bottom:0}.credit-hero p{font-size:10px;max-width:165px}.menu-sheet{max-width:100%;width:100%;border-radius:26px 26px 0 0;bottom:0;padding:12px 24px 25px;max-height:92dvh}.sheet-heading h2{font-size:25px}.menu-link{font-size:12px;min-height:49px}.menu-profile strong{font-size:12px}.menu-profile span:not(.small-status){font-size:10px}.menu-profile{margin-top:22px}.motion-option strong{font-size:12px}.motion-option span{font-size:10px}.menu-foot{font-size:9px}
 html[data-theme=cosmic] .hero{min-height:280px;padding:25px 22px;margin-bottom:25px}html[data-theme=cosmic] .hero h1{font-size:31px}html[data-theme=cosmic] .hero-art{right:-34px;top:33px}html[data-theme=cosmic] .mascot{height:257px;width:195px}html[data-theme=cosmic] .tool-card{min-height:127px}html[data-theme=cosmic] .float-label{right:40px;bottom:3px;font-size:6px}html[data-theme=cosmic] .bottom-nav{border-radius:20px 20px 0 0}html[data-theme=cosmic] .nav-item.create-link{background:#a7ead6}
 html[data-theme=peach] .hero{border-radius:55px 22px 50px 22px;padding:27px 22px;min-height:275px;overflow:hidden;margin-bottom:26px}html[data-theme=peach] h1{font-size:32px;font-weight:500}html[data-theme=peach] .hero-art{right:-33px;top:34px}html[data-theme=peach] .hero-art:before{width:152px;height:152px;box-shadow:0 0 0 9px #ffedcd60}html[data-theme=peach] .mascot{height:255px;width:195px}html[data-theme=peach] .hero h1 em{display:block}html[data-theme=peach] .hero-description{font-size:9px;max-width:150px}html[data-theme=peach] .tool-grid{grid-template-columns:1fr 1fr;gap:12px}html[data-theme=peach] .tool-card{min-height:130px;border-radius:21px 21px 21px 7px}html[data-theme=peach] .tool-card h3{font-size:11px}html[data-theme=peach] .section-title h2{font-size:17px}html[data-theme=peach] .bottom-nav{border-radius:21px 21px 0 0}html[data-theme=peach] .float-label{right:38px;bottom:6px;font-size:6px}html[data-theme=peach] .art-star{font-size:24px;right:27px;top:4px}
 html[data-theme=atelier] .app-header{padding:21px 22px 18px}html[data-theme=atelier] .brand{font-size:29px}html[data-theme=atelier] .brand-icon{font-size:26px}html[data-theme=atelier] .hero{padding:12px 0 25px;min-height:270px;display:block;margin-bottom:24px;overflow:visible}html[data-theme=atelier] .hero-copy{max-width:205px;padding-right:0;z-index:3}html[data-theme=atelier] h1{font-size:34px;line-height:1.05;letter-spacing:-1.5px;font-weight:400;max-width:200px}html[data-theme=atelier] .hero h1 em{display:block}html[data-theme=atelier] .hero-description{font-size:9px;max-width:176px;margin-bottom:19px}html[data-theme=atelier] .hero-art{position:absolute;width:132px;height:208px;right:-3px;top:35px;min-height:0;z-index:1;border-radius:90px 90px 3px 3px}html[data-theme=atelier] .mascot{height:225px;width:166px;position:absolute;bottom:-12px}html[data-theme=atelier] .float-label{bottom:0;right:-3px;font-size:5px;padding:5px 6px}html[data-theme=atelier] .art-star{right:15px;font-size:15px;top:8px}html[data-theme=atelier] .art-star.small{display:none}html[data-theme=atelier] .tool-grid{grid-template-columns:1fr;gap:0;margin-bottom:22px}html[data-theme=atelier] .tool-card{min-height:69px;padding:13px 24px 13px 33px;gap:12px;border-radius:0}html[data-theme=atelier] .tool-index{top:26px;font-size:13px;left:0}html[data-theme=atelier] .tool-icon{width:29px;height:29px;margin:0}html[data-theme=atelier] .tool-icon svg{width:16px;height:16px}html[data-theme=atelier] .tool-card h3{font-size:15px;margin:0 0 3px}html[data-theme=atelier] .tool-card p{max-width:none;font-size:8px}html[data-theme=atelier] .card-arrow{top:26px;right:2px}html[data-theme=atelier] .section-title h2{font-size:10px;letter-spacing:1px}html[data-theme=atelier] .bottom-nav{border-radius:12px 12px 0 0;padding-top:8px}html[data-theme=atelier] .nav-item{font-size:8px;border-radius:7px}html[data-theme=atelier] .primary{font-size:8px;padding:10px 12px;min-height:37px;gap:10px}html[data-theme=atelier] .project-card{border-radius:3px}
 html[data-theme=arcade] .hero{padding:25px 20px;min-height:278px;box-shadow:4px 4px 0 #293527;margin-bottom:30px;border-radius:7px}html[data-theme=arcade] h1{font-size:33px;line-height:1.02;letter-spacing:-1.4px;max-width:185px}html[data-theme=arcade] .hero h1 em{display:block}html[data-theme=arcade] .hero-description{font-size:9px;max-width:153px;line-height:1.7}html[data-theme=arcade] .hero-art{top:42px;right:-37px}html[data-theme=arcade] .hero-art:before{width:153px;height:153px}html[data-theme=arcade] .mascot{height:240px;width:183px}html[data-theme=arcade] .float-label{font-size:5px;right:34px;bottom:9px}html[data-theme=arcade] .hero-number{font-size:5px;top:9px;right:9px;padding:3px 5px}html[data-theme=arcade] .art-star{font-size:23px;top:-2px;right:25px}html[data-theme=arcade] .tool-grid{grid-template-columns:1fr 1fr;gap:12px}html[data-theme=arcade] .tool-card{padding:14px 12px;min-height:135px;display:block;box-shadow:3px 3px 0 #dce3ce}html[data-theme=arcade] .tool-icon{width:31px;height:31px;margin-bottom:12px;border-radius:4px}html[data-theme=arcade] .tool-card h3{font-size:11px;margin-bottom:6px}html[data-theme=arcade] .tool-card p{font-size:8px}html[data-theme=arcade] .card-arrow{font-size:12px;top:18px;right:10px}html[data-theme=arcade] .section-title h2{font-size:11px}html[data-theme=arcade] .bottom-nav{border-radius:10px 10px 0 0;box-shadow:none;border:0;border-top:2px solid #152016}html[data-theme=arcade] .nav-item{font-size:8px;border-radius:5px}html[data-theme=arcade] .nav-item.create-link{max-width:60px;min-width:50px}html[data-theme=arcade] .primary{font-size:8px;padding:11px 10px;gap:8px}html[data-theme=arcade] .tool-index{display:none}
}
@media(max-width:359px){#app-main{padding-left:16px;padding-right:16px}.app-header{padding-left:17px;padding-right:17px}.hero{padding-left:18px}.hero h1{font-size:28px;max-width:190px}.hero-art{right:-52px}.hero-description{max-width:148px}.hero .eyebrow{font-size:5.5px;letter-spacing:1px}.nav-item{font-size:7px}html[data-theme=atelier] .hero-art{right:-6px;width:118px}html[data-theme=atelier] .hero h1{font-size:31px;max-width:180px}html[data-theme=atelier] .hero-description{max-width:160px}html[data-theme=arcade] .hero h1{font-size:29px}html[data-theme=peach] .hero h1{font-size:29px}}
/* Readable application typography at the actual device size. */
@media(min-width:701px){.header-middle{font-size:9px}.credit-pill{font-size:11px}.greeting p{font-size:13px}.greeting .date{font-size:9px}.eyebrow{font-size:9px}.hero-description{font-size:13px;max-width:335px}.primary{font-size:12px;min-height:44px}.hero-small-note{font-size:10px;max-width:110px}.section-title h2{font-size:17px}.text-button{font-size:11px}.tool-card h3{font-size:13px}.tool-card p{font-size:10px}.tool-card{min-height:141px}.project-details h3{font-size:12px}.project-details p{font-size:10px}.helper-line{font-size:10px}.nav-item{font-size:11px;min-height:45px}.project-thumb{width:43px;height:43px}.form-card .field>span{font-size:12px}.field input,.field select,.field textarea{font-size:13px}.form-note{font-size:11px}.result-copy{font-size:14px}.secondary{font-size:12px}.info-card p,.info-card li{font-size:13px}html[data-theme=atelier] .tool-card{min-height:80px}html[data-theme=arcade] .tool-card{min-height:88px}html[data-theme=arcade] .tool-card p{font-size:10px}html[data-theme=arcade] .hero-description{font-size:12px}html[data-theme=arcade] .primary{font-size:11px}html[data-theme=arcade] .nav-item{font-size:10px}}
@media(max-width:700px){.credit-pill{font-size:11px}.greeting p{font-size:13px}.greeting .date{font-size:8px}.hero,html[data-theme] .hero{min-height:300px}.hero .eyebrow{font-size:7px;letter-spacing:1.1px}.hero-description,html[data-theme] .hero-description{font-size:11px;line-height:1.75}.hero-description{max-width:171px}.hero-actions .primary,html[data-theme] .hero-actions .primary{font-size:10px;min-height:44px;padding:12px 13px;gap:8px}.hero-art,html[data-theme=cosmic] .hero-art,html[data-theme=peach] .hero-art,html[data-theme=arcade] .hero-art{top:46px}.float-label,html[data-theme] .float-label{font-size:7px}.section-title h2{font-size:15px}.text-button{font-size:10px}.tool-card,html[data-theme=cosmic] .tool-card,html[data-theme=peach] .tool-card{min-height:138px}.tool-card h3,html[data-theme=peach] .tool-card h3{font-size:12px}.tool-card p{font-size:10px}.project-details h3{font-size:12px}.project-details p{font-size:10px}.nav-item,html[data-theme] .nav-item{font-size:10px;gap:5px}.helper-line{font-size:9px}html[data-theme=atelier] .hero{min-height:307px}html[data-theme=atelier] .hero-art{top:48px}html[data-theme=atelier] .hero-actions .primary{font-size:9px;padding:11px}html[data-theme=atelier] .tool-card{min-height:77px}html[data-theme=atelier] .tool-card h3{font-size:15px}html[data-theme=atelier] .tool-card p{font-size:10px}html[data-theme=atelier] .section-title h2{font-size:11px}html[data-theme=arcade] .tool-card h3{font-size:12px}html[data-theme=arcade] .tool-card p{font-size:9px}html[data-theme=arcade] .text-button{font-size:9px}html[data-theme=peach] .section-title h2{font-size:17px}}
@media(max-width:700px){html[data-theme=mint] .hero-art{width:165px;height:235px;right:-3px;top:62px}html[data-theme=mint] .mascot{width:175px;height:235px}html[data-theme=mint] .float-label{right:10px;bottom:3px;font-size:6px}html[data-theme=mint] .orbit-line{width:145px;height:115px;left:7px;top:64px}html[data-theme=mint] .orbit-line.second{width:115px;height:183px;left:23px;top:26px}html[data-theme=mint] .art-star{right:10px;top:0}}
.effort-picker{border:0;padding:0;margin:2px 0 20px}.effort-picker legend{font-size:12px;font-weight:600;padding:0;margin:0 0 10px}.effort-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.effort-option{position:relative;cursor:pointer}.effort-option input{position:absolute;opacity:0;width:1px;height:1px}.effort-option>span{display:block;padding:12px 8px;border:1px solid var(--border);background:var(--bg);border-radius:11px;text-align:center;min-height:61px}.effort-option b{font-size:11px;display:block;font-weight:600;white-space:nowrap}.effort-option small{font-size:10px;display:block;color:var(--muted);margin-top:5px}.effort-option input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--tint)}.effort-option input:focus-visible+span{outline:3px solid #e9ab69;outline-offset:3px}.effort-picker>p{font-size:9px;line-height:1.7;color:var(--muted);margin:9px 0 0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}