@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans JP',system-ui,sans-serif;font-synthesis:none;color:#242039;background:#f6f4ff;--accent:#7341ee;--accent-dark:#5529c2;--secondary:#fc7749;--ink:#242039;--muted:#746e89;--border:#e4def5;--soft:#f0e9ff;--sidebar:#21123f;--gradient:linear-gradient(110deg,#7443ef,#a53fe9);--green:#218c74}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffad36;outline-offset:4px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}button svg,a svg{pointer-events:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.app{display:flex;height:100dvh;min-height:580px}.sidebar{width:246px;flex-shrink:0;padding:28px 17px 18px;background:radial-gradient(ellipse at 0 0,#492679 0,transparent 55%),var(--sidebar);color:#fff;display:flex;flex-direction:column;border-right:1px solid #5a3e832b}.brand{display:flex;gap:10px;align-items:center;padding:0 9px 28px;font-weight:800;font-size:17px;letter-spacing:-.5px}.brand small{display:block;font-weight:500;color:#c9b6ec;font-size:10px;letter-spacing:1.6px;margin-top:3px}.brand-icon{display:grid;place-items:center;position:relative;flex-shrink:0;width:36px;height:36px;color:#32135b;background:#ffe087;border-radius:11px;font-family:Georgia,serif;font-size:30px;box-shadow:0 4px 15px #fbbf5e28}.brand-icon>span{position:absolute;right:-6px;top:-7px;font-size:18px;color:#ffa1de}.new-button{display:flex;align-items:center;gap:8px;color:#351749;background:linear-gradient(100deg,#ffd480,#ffac78);border:1px solid #ffd69f;border-radius:11px;padding:13px 14px;font-size:13px;font-weight:800;box-shadow:0 6px 18px #17042735;margin-bottom:14px;transition:transform .2s}.new-button:hover{transform:translateY(-2px);background:#ffe4a7}.new-button>span:first-child{font-size:20px;line-height:16px}.shortcut{margin-left:auto;font-size:19px}.side-link{display:flex;align-items:center;gap:10px;border:0;background:transparent;width:100%;padding:11px 10px;color:#d6c9ed;font-size:12px;text-align:left;border-radius:9px}.side-link:hover{background:#ffffff0d;color:white}.side-link svg{width:18px;height:18px}.history-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:#ab93d0;padding:28px 10px 13px}.history-heading span{background:#ffffff14;color:#ded0f7;padding:0 7px;border-radius:6px}.history{flex:1;min-height:70px;overflow:auto}.history-empty{padding:15px 12px;font-size:12px;line-height:2;color:#b4a0d1}.history-item{width:100%;display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:10px;background:none;padding:12px 10px;text-align:left;color:#f4edff;font-size:12px}.history-item svg{width:18px;height:18px;color:#c8aff1;flex-shrink:0}.history-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item small{display:block;font-size:10px;color:#af97ce;margin-top:4px}.history-item:hover{background:#ffffff09}.history-item.active{background:#ffffff12;border-color:#ffffff15}.sidebar-bottom{padding-top:16px}.small-tip{display:flex;gap:10px;padding:15px 12px;background:linear-gradient(125deg,#7142ad35,#ffffff08);border:1px solid #9974c62b;border-radius:12px;font-size:12px;line-height:1.8;margin-bottom:14px}.small-tip>span{color:#ffcd83}.small-tip p{font-size:10px;color:#bca8db;line-height:1.7;margin:5px 0 0}.account{display:flex;align-items:center;gap:11px;border-top:1px solid #ffffff13;padding:19px 7px 0;margin-top:14px;font-size:12px}.account-avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#8060ac;color:#fff;font-weight:700}.account small{display:block;font-size:10px;color:#b8a3d4;margin-top:4px;line-height:1.7}.main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;height:73px;flex-shrink:0;border-bottom:1px solid #e9e3f7;background:#ffffffdf;padding:0 32px;z-index:11}.topbar-left,.topbar-right{display:flex;align-items:center;gap:13px;min-width:0}.studio-label{font-size:13px;font-weight:700;white-space:nowrap}.header-divider{color:#cec2e4}.project-title{font-size:12px;color:#9184a6;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-badge{font-size:10px;font-weight:600;white-space:nowrap;color:#8a611a;border:1px solid #f0d99a;background:#fff8e7;border-radius:30px;padding:5px 11px}.mode-badge:before{content:'';width:6px;height:6px;background:#eab75c;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}.icon-button{display:inline-grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:0;background:none;border-radius:7px}.icon-button:hover{background:var(--soft)}.icon-button[aria-pressed=true]{background:var(--soft);color:var(--accent)}.menu-toggle{display:none}.workspace{min-height:0;flex:1;display:flex}.conversation{min-width:0;flex:1;display:flex;flex-direction:column;background:radial-gradient(ellipse at 85% 2%,#eee2ff 0,transparent 40%),radial-gradient(ellipse at 8% 50%,#e7f2ff80 0,transparent 40%),#f9f7ff}.scroll-area{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;scrollbar-color:#d3c6ed #f6f1ff;scrollbar-width:thin}.welcome{max-width:1270px;width:100%;margin:0 auto;padding:38px 45px 35px}.hero-layout{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:5px;min-height:320px}.hero-copy{position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:6px;color:var(--accent-dark);font-size:11px;font-weight:700;letter-spacing:.2px;margin:0 0 16px}.eyebrow svg{width:18px;height:18px}.hero-copy h1{font-size:clamp(28px,2.5vw,40px);font-weight:900;line-height:1.5;letter-spacing:-1.4px;margin:0 0 17px}.hero-copy h1 span{background:linear-gradient(110deg,#7640ed,#be3be1 80%);color:var(--accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.intro{font-size:13px;line-height:2;color:#756b88;margin:0 0 22px}.hero-actions{display:flex;align-items:center;gap:13px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:41px;border-radius:9px;padding:10px 16px;font-size:12px;font-weight:700;white-space:nowrap}.primary{background:var(--gradient);border:1px solid transparent;color:white;box-shadow:0 5px 13px #7540dc25;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7540dc38}.secondary{background:white;border:1px solid var(--border);color:var(--accent-dark)}.secondary:hover{background:var(--soft)}.small{min-height:32px;font-size:11px;padding:6px 11px}.small svg{width:15px;height:15px}.hero-start{font-size:12px;min-height:44px;padding:12px 17px;border-radius:11px}.hero-start svg{width:15px;height:15px}.hero-idea{display:flex;align-items:center;gap:7px;border:0;background:none;font-size:11px;font-weight:600;color:#79668f;padding:9px 0;white-space:nowrap}.hero-idea svg{width:16px;height:16px}.hero-idea:hover{color:var(--accent)}.hero-reassurance{display:flex;align-items:center;gap:5px;font-size:10px;color:#8f819e;margin:12px 0 0}.hero-reassurance svg{width:13px;height:13px;color:#9d81cb}.hero-visual{position:relative;min-width:0;height:330px;display:flex;align-items:center;justify-content:center;isolation:isolate}.hero-visual img{width:110%;max-width:560px;height:auto;position:relative;z-index:1;mix-blend-mode:multiply;filter:saturate(1.06);animation:heroFloat 7s ease-in-out infinite;object-fit:contain}.hero-orbit{position:absolute;inset:45px 8px 20px;border-radius:50%;border:1px solid #c4a5ed5c;transform:rotate(-20deg);z-index:0}.orbit-two{inset:15px 53px 5px;border-color:#d2c0f68c;transform:rotate(27deg)}.hero-star{position:absolute;font-size:29px;z-index:3;filter:drop-shadow(0 4px 4px #aa86ca1a)}.star-one{right:26px;top:20px;color:#ffaa50;transform:rotate(-10deg)}.star-two{left:25px;bottom:14px;color:#b353ed;font-size:22px;transform:rotate(20deg)}.hero-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#57ccbe;right:24px;bottom:48px;box-shadow:0 5px 10px #57ccbe28}.floating-label{position:absolute;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;z-index:3;border:1px solid #fff;box-shadow:0 6px 22px #704c9620;backdrop-filter:blur(8px);border-radius:25px;background:#ffffffdf;padding:9px 14px;color:#785593;white-space:nowrap;animation:labelFloat 8s ease-in-out infinite}.floating-label svg{width:14px;height:14px}.label-one{top:38px;left:2px;transform:rotate(-7deg)}.label-one svg{color:#d86ceb}.label-two{bottom:16px;right:0;transform:rotate(5deg);color:#428678;animation-delay:-3s}.label-two svg{background:#dff8df;border-radius:50%;padding:2px;width:18px;height:18px}
.beginner-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:23px 0 29px;border:1px solid #e5daf7;background:#ffffffc9;border-radius:14px;box-shadow:0 5px 18px #855bd108}.beginner-steps li{display:flex;align-items:center;gap:11px;padding:16px 20px;position:relative}.beginner-steps li+li{border-left:1px solid #ebe5f6}.step-number{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:11px;background:#ece3fe;color:#8858ce;font-size:15px;font-weight:900;letter-spacing:-.5px}.beginner-steps li:nth-child(2) .step-number{background:#ffecdd;color:#df8448}.beginner-steps li:nth-child(3) .step-number{background:#e2f8ef;color:#449785}.beginner-steps b{font-size:12px}.beginner-steps p{font-size:10px;margin:3px 0 0;color:#9b8baa}.step-arrow,.beginner-steps li>svg{margin-left:auto;color:#b9a6d3}.beginner-steps li>svg{width:17px;height:17px}.step-arrow{font-size:20px}
.composer-section-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin-bottom:11px}.tiny-spark{color:var(--accent);font-size:18px}.beginner-pill{margin-left:auto;color:#8c73aa;background:#ede4fa;border-radius:30px;padding:4px 10px;font-size:9px;font-weight:500}.composer{position:relative;background:#fff;border:2px solid #d8bff5;border-radius:16px;box-shadow:0 8px 25px #7144a40a;padding:18px 21px 13px;transition:border-color .2s,box-shadow .2s}.composer:focus-within{border-color:#a37adf;box-shadow:0 0 0 4px #e9ddfd,0 10px 25px #7144a410}.composer textarea{display:block;width:100%;font-size:14px;line-height:1.9;min-height:59px;max-height:160px;resize:none;border:0;background:transparent;color:#403349;outline:0}.composer textarea::placeholder{color:#a292ae}.composer textarea:focus-visible{outline:0}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.composer-hint{display:flex;align-items:center;gap:6px;font-size:10px;color:#9c87ab}.composer-hint svg{width:14px;height:14px;color:#a07ad3}.send-button{border:0;background:var(--gradient);color:white;border-radius:10px;display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px #8050c330;transition:transform .15s}.send-button:hover{transform:translateY(-2px)}.send-button svg{width:15px;height:15px;transform:rotate(45deg)}.composer-footnote{font-size:10px;color:#92819e;text-align:center;line-height:1.7;margin:10px 0 0}.chat-composer-slot{padding:10px 26px 15px;max-width:840px;width:100%;margin:0 auto}.suggestions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 29px}.suggestion{display:flex;align-items:center;gap:6px;background:#f3ecff;border:1px solid #e5d6fc;border-radius:30px;padding:8px 12px;font-size:10px;color:#85659f;transition:background .15s}.suggestion:before{content:'✧';color:#a16ccb;font-size:13px}.suggestion:hover{background:#e8dafa;color:#603aaa;border-color:#bea0e9}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 15px}.section-kicker{display:block;font-size:10px;font-weight:600;color:#a188b7;letter-spacing:.5px;margin-bottom:5px}.section-heading h2{font-size:19px;letter-spacing:-.4px;font-weight:800;margin:0}.template-help{display:flex;align-items:center;gap:6px;font-size:10px;color:#a898b5}.template-help svg{width:13px;height:13px;transform:rotate(90deg)}.templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.template{position:relative;background:white;border:1px solid #e9dff6;border-radius:16px;overflow:hidden;display:block;text-align:left;padding:0;box-shadow:0 5px 16px #613fa607;transition:transform .2s,box-shadow .2s,border-color .2s}.template:hover{transform:translateY(-6px);border-color:#b991ec;box-shadow:0 13px 26px #7144a41b}.template-art{height:152px;display:grid;place-items:center;position:relative;overflow:hidden}.template-art:after{content:'';position:absolute;inset:-20px;background-image:radial-gradient(circle,#fff7 1.5px,transparent 1.5px);background-size:15px 15px;pointer-events:none;mask-image:linear-gradient(90deg,#0007,transparent)}.art-memory{background:linear-gradient(125deg,#ecc8ff,#bca5ff)}.art-quiz{background:linear-gradient(135deg,#ffe39b,#ffc8a4)}.art-dodge{background:linear-gradient(135deg,#c1e8ff,#a9bafa)}.art-desk{background:linear-gradient(125deg,#dbd4ff,#a9c7fc)}.art-camp{background:linear-gradient(125deg,#bbf1df,#d9ef9f)}.art-books{background:linear-gradient(125deg,#ffdfba,#ffbad6)}.template-art-star{position:absolute;right:16px;top:13px;font-size:18px;color:#ffffffc4;transform:rotate(15deg)}.template-copy{padding:16px 17px 15px}.template-tag{display:inline-block;border:1px solid #e8daf9;background:#f6efff;border-radius:5px;font-size:9px;font-weight:600;color:#9061c6;padding:3px 6px;margin-bottom:8px}.template:nth-child(2) .template-tag{background:#fff4e6;border-color:#f5e2c8;color:#c58844}.template:nth-child(3) .template-tag{background:#eaf5ff;border-color:#d7e8f6;color:#5a89b9}.template h3{font-size:14px;font-weight:800;letter-spacing:-.3px;margin:0 0 5px}.template p{font-size:11px;color:#9a87aa;line-height:1.8;margin:0}.template-action{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1e9fa;padding-top:11px;margin-top:13px;color:var(--accent);font-size:11px;font-weight:700}.template-action svg{width:13px;height:13px}.mini-cards{display:grid;grid-template-columns:repeat(4,38px);gap:7px;transform:rotate(-10deg);filter:drop-shadow(0 9px 7px #7840af22);z-index:1}.mini-cards span{display:grid;place-items:center;width:38px;height:46px;background:#fffaf1;border-radius:7px;box-shadow:0 3px 0 #b593d85c;color:#a97ae3;font-size:25px}.mini-cards span.back{background:#8860dd;box-shadow:0 3px 0 #5b3ea050;color:#d5baff;font-size:22px}.quiz-card{width:160px;padding:14px;background:#fffdf4;border:1px solid #ffefd0;border-radius:10px;transform:rotate(7deg);box-shadow:0 10px 0 #f1b58145,0 12px 20px #b66e4d1e;z-index:1}.quiz-card b{font-size:26px;font-weight:900;color:#fa8a51}.quiz-card small{font-size:9px;color:#b19880}.quiz-card i{display:block;background:#f1e5c6;width:85%;height:6px;margin:7px 0;border-radius:4px}.quiz-options{display:flex;gap:6px;margin-top:8px}.quiz-options span{font-size:10px;font-weight:700;border-radius:5px;background:#fff0cc;color:#c29860;padding:5px 12px}.quiz-options span:nth-child(2){background:#9b87e5;color:white}.space-board{width:175px;height:111px;position:relative;border-radius:12px;background:linear-gradient(130deg,#5342ab,#6c69d4);transform:rotate(-7deg);box-shadow:0 6px 0 #8d9bd779,0 13px 20px #49449e25;color:#ffdf6c;z-index:1}.space-board small{position:absolute;top:10px;left:12px;font-size:9px;letter-spacing:.7px;color:#d2c9fc}.space-board span{position:absolute;font-size:27px;filter:drop-shadow(0 2px 4px #fff9)}.space-board .player{left:70px;bottom:10px;font-size:27px;color:#ffa397}.product-art{position:relative;z-index:1;transform:scale(1.05) rotate(-4deg);filter:drop-shadow(4px 8px 1px #68568020)}.product-art svg{width:205px;height:128px;stroke-width:2.3}.revenue-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(100deg,#efe3ff,#f6eafe 70%,#ffecdf);border:1px solid #e6d3f3;border-radius:13px;padding:16px 18px;margin-top:23px}.revenue-icon{display:grid;place-items:center;flex-shrink:0;background:#dfccf5;color:#8054b5;width:39px;height:39px;border-radius:11px}.revenue-banner strong{font-size:12px;font-weight:700}.revenue-note{font-size:10px;color:#9a80aa;line-height:1.8;margin:4px 0 0}.revenue-banner>.text-button{margin-left:auto;flex-shrink:0}.text-button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent);font-size:11px;font-weight:600;padding:6px}.text-button:hover{text-decoration:underline}.text-button svg{width:14px;height:14px}
.messages{max-width:830px;margin:0 auto;padding:34px 30px 24px}.message{font-size:14px;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:26px}.message.user{background:linear-gradient(120deg,#e8dcfd,#eadffd);color:#513475;margin-left:auto;border:1px solid #dac6f2;max-width:85%;width:fit-content;padding:12px 17px;border-radius:14px 14px 4px 14px}.message.assistant,.message.system{display:flex;gap:13px}.message-avatar{display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border-radius:10px;color:white;background:var(--gradient);box-shadow:0 4px 10px #8359b226;margin-top:4px}.message-avatar svg{width:19px;height:19px}.message-body{min-width:0;flex:1}.message-name{display:block;font-size:11px;font-weight:800;color:#584069;margin-bottom:7px}.message-content{color:#746080}.message.system .message-content{font-size:12px;color:#9982a4}.message.system .message-avatar{background:#e8e0f0;box-shadow:none;color:#9a7eab}.plan-card{margin:16px 0 0;border:1px solid #dac4f4;background:#fff;border-radius:15px;overflow:hidden;white-space:normal;box-shadow:0 10px 25px #7544b30a}.plan-header{display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,#f2e6ff,#fff0e5);padding:16px 19px;border-bottom:1px solid #ebd9f5;font-size:15px;font-weight:800;color:#6b398e}.plan-header svg{color:var(--accent)}.plan-body{padding:14px 19px;font-size:12px;color:#977aab;line-height:2}.plan-body ul{padding-left:20px;margin:7px 0 15px;color:#685074}.plan-title{font-size:11px;font-weight:700;display:block;color:#b08dbc;margin-top:7px}.plan-footer{padding:14px 19px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fdfaff;border-top:1px solid #efe2f8}.plan-footer small{font-size:10px;color:#9e85aa}.progress-card{border:1px solid #e1d0f4;background:#fff;border-radius:14px;margin:16px 0;padding:17px 19px}.progress-label{font-size:13px;font-weight:800;display:flex;align-items:center;gap:9px;color:#734995}.progress-detail{font-size:12px;line-height:1.9;color:#a28aac;margin-top:9px}.spinner{width:15px;height:15px;border-radius:50%;border:2px solid #e8d9fa;border-top-color:var(--accent);animation:spin 1s linear infinite}.progress-steps{display:flex;gap:5px;margin-top:12px}.progress-steps span{height:4px;flex:1;background:#eee4f6;border-radius:4px}.progress-steps .done{background:var(--accent)}
.preview-panel{flex:0 0 47%;min-width:0;border-left:1px solid #e0d3f0;background:#ede4f9;display:flex;flex-direction:column}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#fff9ff;font-size:11px}.preview-toolbar>span{display:flex;align-items:center;gap:7px;color:#866299}.status-dot{display:inline-block;width:6px;height:6px;background:#3fac89;border-radius:50%;box-shadow:0 0 0 3px #dff6ea}.preview-controls{display:flex;gap:2px}.preview-controls svg{width:16px;height:16px}.preview-address{display:flex;align-items:center;gap:7px;border:1px solid #ddcce9;background:#f9f2ff;border-radius:8px;margin:12px 16px 0;padding:9px 10px;font-size:10px;color:#a48cad}.preview-address svg{width:12px;height:12px}.preview-address>span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:14px 16px;overflow:auto}.preview-stage iframe{width:100%;height:100%;min-height:300px;border:1px solid #d3bfe1;background:white;border-radius:8px;box-shadow:0 8px 20px #704d8612;transition:width .2s}.preview-stage.mobile iframe{width:360px;max-width:100%;border-radius:23px;box-shadow:0 0 0 5px #4e326721,0 10px 25px #704d861c}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;background:#fbf5ff;padding:11px 16px;font-size:10px;color:#a48cad;line-height:1.7}.notice{display:flex;align-items:center;gap:10px;padding:11px 25px;background:#fff3d9;border-bottom:1px solid #efd89a;font-size:12px;color:#946830}.notice button,.notice a{margin-left:auto;white-space:nowrap;border:0;background:none;color:#956422;text-decoration:underline;font-size:11px}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);max-width:90vw;background:#352041;color:white;border:1px solid #83629577;border-radius:12px;padding:12px 20px;font-size:12px;box-shadow:0 8px 20px #3520412d;z-index:100}dialog{border:1px solid #e3cef3;background:#fffbff;color:#66506f;border-radius:20px;width:calc(100% - 40px);max-width:560px;padding:25px;box-shadow:0 20px 60px #22103033}dialog::backdrop{background:#26173e66;backdrop-filter:blur(5px)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:10px}.modal-header h2{font-size:18px;font-weight:800;color:#4c2e65;margin:0}.modal-content{font-size:13px;line-height:2;color:#8b749a}.modal-content h3{font-size:14px;color:#694377;margin:18px 0 5px}.modal-content ol,.modal-content ul{padding-left:22px}.modal-content a{color:var(--accent);text-decoration:underline}.modal-content label{display:block;margin:10px 0;font-size:12px}.modal-content input[type=text],.modal-content input[type=url]{width:100%;padding:10px;border:1px solid #dac4e8;border-radius:8px;background:white;font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.publish-option{display:flex!important;align-items:flex-start;gap:10px;border:1px solid #e1cdeb;border-radius:11px;padding:13px}.publish-option input{margin-top:6px}.publish-option strong{display:block;font-size:12px;color:#6b477a}.publish-option small{font-size:11px;color:#a68faf}.sidebar-scrim{display:none}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes labelFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.welcome{padding-top:45px}.hero-layout{min-height:355px}.hero-visual{height:355px}.hero-copy h1{font-size:43px}.intro{font-size:14px}.template-art{height:165px}}
@media(max-width:1200px){.sidebar{width:220px;padding-left:14px;padding-right:14px}.brand{font-size:15px;padding-left:4px;padding-right:4px}.welcome{padding:28px 30px}.hero-layout{min-height:285px}.hero-visual{height:270px}.hero-copy h1{font-size:30px;letter-spacing:-1px}.intro{font-size:12px}.hero-actions{gap:10px}.hero-start{font-size:11px;padding:11px 13px}.hero-idea{font-size:10px}.floating-label{font-size:9px;padding:8px 11px}.label-one{left:-10px;top:15px}.label-two{bottom:10px;right:-5px}.beginner-steps li{padding:14px 13px;gap:9px}.beginner-steps b{font-size:11px}.beginner-steps p{font-size:9px}.step-number{width:32px;height:32px;font-size:13px}.template-art{height:137px}.templates{gap:12px}.template-copy{padding:14px 13px}.template h3{font-size:12px}.template p{font-size:10px}.template-help{display:none}.workspace.has-preview .messages{padding:27px 20px}.workspace.has-preview .message{font-size:13px}.workspace.has-preview .chat-composer-slot{padding:10px 18px 12px}.workspace.has-preview .composer-hint{max-width:200px;font-size:9px}}
@media(max-width:1000px){.sidebar{width:200px}.brand{font-size:14px;gap:7px}.brand-icon{width:31px;height:31px;font-size:26px}.hero-layout{gap:0;grid-template-columns:1fr .9fr}.hero-copy h1{font-size:27px}.hero-visual{height:240px}.hero-visual img{width:125%}.hero-idea{display:none}.floating-label{font-size:8px;padding:7px 9px}.label-one{left:0;top:3px}.label-two{bottom:5px;right:0}.beginner-steps p{display:none}.beginner-steps li{padding:13px 10px}.step-arrow{display:none}.step-number{width:28px;height:28px;font-size:12px}.beginner-steps b{font-size:10px}.template-art{height:117px}.mini-cards{scale:.85}.quiz-card{scale:.85}.space-board{scale:.85}.product-art{scale:.85}.template-action{font-size:10px}.revenue-banner{align-items:flex-start;padding:14px}.revenue-banner strong{font-size:11px}.revenue-note{font-size:9px}.revenue-banner>.text-button{font-size:10px}.preview-panel{position:absolute;inset:73px 0 0 200px;z-index:10;border-left:0}.workspace.has-preview .conversation{flex:1}.topbar{padding:0 21px}.project-title{max-width:130px}.topbar-right{gap:7px}}
@media(max-width:800px) and (min-width:651px){.welcome{padding:24px}.hero-layout{display:block;position:relative;min-height:290px}.hero-copy{width:70%}.hero-visual{position:absolute;right:0;top:16px;width:45%;opacity:.85;z-index:0}.hero-visual img{width:130%}.hero-copy h1{font-size:29px}.hero-visual .floating-label{display:none}.intro{max-width:300px}.hero-layout .desktop-break{display:none}.templates{grid-template-columns:1fr}.template{display:flex}.template-art{width:155px;flex-shrink:0;height:165px}.template-copy{flex:1}.template h3{font-size:14px}.template p{font-size:11px}.revenue-banner>.text-button{display:none}}
@media(max-width:650px){.app{min-height:0}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.sidebar-scrim.open{display:block;position:fixed;inset:0;z-index:35;background:#26144177;backdrop-filter:blur(3px)}.menu-toggle{display:grid}.topbar{height:62px;padding:0 12px}.topbar-left{gap:7px}.studio-label{font-size:11px}.header-divider,.project-title{display:none}.mode-badge{padding:5px 8px;font-size:8px}.topbar-right>.small{padding:6px 8px;font-size:9px}.topbar-right>.small svg{display:none}.welcome{padding:27px 21px 28px}.hero-layout{display:flex;flex-direction:column;gap:0;min-height:0}.hero-copy{width:100%;text-align:center}.eyebrow{justify-content:center;font-size:10px;gap:5px;margin-bottom:12px}.hero-copy h1{font-size:clamp(25px,7.4vw,35px);line-height:1.45;letter-spacing:-1.2px;margin-bottom:13px}.intro{font-size:12px;line-height:2;margin-bottom:16px}.hero-actions{justify-content:center;gap:12px}.hero-start{font-size:11px;min-height:42px;padding:11px 14px}.hero-idea{display:flex;font-size:10px}.hero-idea svg{width:14px;height:14px}.hero-reassurance{justify-content:center;font-size:9px;margin-top:10px}.hero-visual{height:216px;width:100%;margin-top:6px}.hero-visual img{width:95%;max-width:345px}.hero-orbit{inset:17px 0 0}.orbit-two{inset:8px 35px}.floating-label{font-size:9px;padding:8px 11px}.label-one{top:19px;left:-1px}.label-two{right:-2px;bottom:7px}.star-one{font-size:21px;right:16px;top:16px}.star-two{left:4px;bottom:26px;font-size:18px}.hero-dot{right:13px;bottom:53px;width:9px;height:9px}.beginner-steps{margin:13px 0 24px;border-radius:12px}.beginner-steps li{flex-direction:column;justify-content:center;text-align:center;gap:7px;padding:12px 4px}.beginner-steps b{font-size:9px;white-space:nowrap}.beginner-steps p{display:none}.beginner-steps li>svg{display:none}.step-number{width:27px;height:27px;font-size:12px;border-radius:8px}.composer-section-title{font-size:12px}.beginner-pill{font-size:8px;padding:4px 8px}.composer{padding:14px;border-radius:14px}.composer textarea{font-size:13px;min-height:70px}.composer-hint{font-size:9px;max-width:150px;line-height:1.8}.composer-bottom{gap:9px;align-items:flex-end}.send-button{font-size:10px;padding:10px 12px;gap:5px;border-radius:8px}.send-button svg{width:13px;height:13px}.suggestions{gap:6px;margin:11px 0 26px}.suggestion{font-size:9px;padding:7px 9px}.suggestion:before{display:none}.section-heading h2{font-size:17px}.section-kicker{font-size:9px}.templates{grid-template-columns:1fr;gap:12px}.template{display:flex;border-radius:14px}.template-art{width:120px;height:auto;min-height:165px;flex-shrink:0}.mini-cards{scale:.64}.quiz-card{scale:.64}.space-board{scale:.62}.product-art{scale:.7}.template-art-star{right:10px;top:11px;font-size:15px}.template-copy{flex:1;padding:13px 14px 12px;min-width:0}.template h3{font-size:12px;letter-spacing:-.2px}.template p{font-size:10px;line-height:1.8}.template-tag{font-size:8px;padding:2px 5px;margin-bottom:6px}.template-action{font-size:10px;padding-top:9px;margin-top:10px}.revenue-banner{flex-wrap:wrap;gap:10px;padding:14px;border-radius:12px;margin-top:20px}.revenue-icon{width:31px;height:31px;border-radius:8px}.revenue-banner>div{flex:1}.revenue-banner strong{font-size:11px}.revenue-note{font-size:9px}.revenue-banner>.text-button{margin-left:40px;font-size:10px;padding:0}.desktop-break{display:none}.messages{padding:25px 17px 18px}.message{font-size:13px;line-height:1.95}.message.assistant,.message.system{gap:10px}.message-avatar{width:28px;height:28px;border-radius:8px}.message-avatar svg{width:17px;height:17px}.message-name{font-size:10px}.plan-header{padding:14px 15px;font-size:13px}.plan-body{padding:12px 15px;font-size:11px}.plan-footer{flex-direction:column;align-items:flex-start;padding:13px 15px}.plan-footer>.primary{width:100%;font-size:12px}.plan-footer small{font-size:9px}.chat-composer-slot{padding:8px 13px 12px}.composer-footnote{font-size:8px}.preview-panel{inset:62px 0 0}.preview-toolbar{padding:10px 12px}.preview-stage{padding:12px}.preview-address{margin:10px 12px 0}.preview-footer{font-size:9px;padding:10px 12px}.notice{font-size:10px;padding:9px 13px}.modal-header h2{font-size:16px}.modal-content{font-size:12px}}
@media(max-width:360px){.welcome{padding-left:16px;padding-right:16px}.hero-copy h1{font-size:25px}.eyebrow{font-size:9px}.hero-start{font-size:10px;padding:10px 12px}.hero-idea{font-size:9px}.hero-visual{height:197px}.floating-label{font-size:8px;padding:7px 9px}.template-art{width:100px}.template-copy{padding:12px 10px}.template h3{font-size:11px}.template p{font-size:9px}.composer-hint{max-width:130px;font-size:8px}.beginner-pill{font-size:7px}.beginner-steps b{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero-visual img{border-radius:28px;box-shadow:0 12px 25px #6e459815}
.scroll-area{overflow-x:hidden}.history{scrollbar-width:thin;scrollbar-color:#72589b transparent}
@media(max-width:650px){.beginner-steps li>span[data-icon]{display:none}}