:root{font-family:"Yu Gothic UI","Meiryo",sans-serif;color:#30313f;background:#f7f8fb;font-synthesis:none;font-size:14px;--purple:#7961cc;--teal:#278e88}*{box-sizing:border-box}body{margin:0}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.topbar{height:82px;background:#fff;border-bottom:1px solid #e9eaf0;display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1320px)/2))}.brand{display:flex;align-items:center;gap:12px;color:#35333f;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:-.5px}.brand strong{color:var(--purple)}.brand-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:var(--purple);color:white;transform:rotate(-3deg)}.prototype{display:flex;gap:7px;align-items:center;color:#83808f;font-size:11px;border:1px solid #e8e6ee;border-radius:30px;padding:7px 12px}.prototype>span{width:6px;height:6px;background:#ad9adf;border-radius:50%}main{max-width:1320px;margin:auto;padding:49px 40px 0}.intro{text-align:center;margin-bottom:39px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#8c79b8;font-weight:700;letter-spacing:2.2px}.eyebrow>span{width:16px;height:1px;background:#ad9acd}h1{font-size:38px;font-weight:750;letter-spacing:2px;margin:14px 0 13px}h1>span{color:var(--purple)}.intro>p{color:#838390;line-height:1.9;font-size:13px;margin:0}.mobile-break{display:none}.workflow{display:flex;align-items:center;justify-content:center;gap:21px;margin-top:24px;font-size:11px;color:#787785}.workflow b{display:inline-grid;place-items:center;font-size:10px;width:23px;height:23px;background:#ebe6f7;color:var(--purple);border-radius:50%;margin-right:7px}.workflow>span:last-child b{background:#e3f0ee;color:var(--teal)}.workflow>svg{width:26px;color:#bbb7c8;stroke-width:1}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.studio-card{background:#fff;border:1px solid #e6e6ef;border-radius:17px;padding:28px;box-shadow:0 5px 18px #34345104;border-top:3px solid #a794dc}.generator{border-top-color:#69b6ad}.card-heading{display:flex;align-items:center;gap:10px;margin-bottom:17px}.section-icon{width:38px;height:38px;display:grid;place-items:center;background:#f0ebfa;color:var(--purple);border-radius:11px}.generator .section-icon{background:#e8f5f1;color:var(--teal)}.step{color:#9685bc;letter-spacing:1.3px;font-size:9px;font-weight:700}.generator .step{color:#639f98}.tag{margin-left:auto;background:#f4f0fb;border-radius:5px;font-size:10px;padding:5px 8px;color:#9b87be;white-space:nowrap}.generator .tag{background:#edf6f3;color:#6a9f96}h2{font-size:21px;letter-spacing:-.5px;margin:0 0 10px;font-weight:700}.description{font-size:12px;line-height:1.95;color:#858591;margin:0 0 25px;min-height:47px}.field-label{display:flex;align-items:center;gap:8px;margin-bottom:10px}label,.field-label{font-size:12px;font-weight:600}.field-label>span{font-size:9px;color:#a2a0ad;background:#f4f3f7;padding:2px 6px;border-radius:3px;font-weight:400}.upload-zone{position:relative;border:1.5px dashed #d7cdec;border-radius:10px;background:#fcfbfe;min-height:164px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px;text-align:center;cursor:pointer;overflow:hidden}.upload-zone:hover,.upload-zone.dragging{background:#f4effb;border-color:var(--purple)}.upload-icon{width:26px;height:26px;color:#a28acb;margin-bottom:4px}.upload-zone>strong{font-size:11px;color:#827095;font-weight:600}.upload-zone>span{font-size:11px;color:#aaa3b7;font-weight:400}.upload-zone>small{font-size:9px;color:#b5afbf;font-weight:400}.upload-zone input{position:absolute;width:1px;height:1px;opacity:0}.upload-zone:focus-within{outline:3px solid #c7b9eb;outline-offset:3px}.upload-zone img{max-width:100%;max-height:145px;border-radius:5px;margin-top:7px}.upload-zone img[hidden]{display:none}.field{margin-top:20px}.field>label{display:block;margin-bottom:10px}select,textarea{display:block;width:100%;border:1px solid #e3e3eb;border-radius:8px;background:#fcfcfe;color:#575665;font:inherit;font-size:12px;line-height:1.9;padding:12px 14px;transition:border-color .2s}select{height:46px;padding-right:30px;cursor:pointer}textarea{resize:vertical;min-height:121px}textarea::placeholder{color:#acaab7;font-size:11px;line-height:2}select:focus,textarea:focus{outline:3px solid #7961cc18;border-color:#a38bd2}.generator select:focus,.generator textarea:focus{outline-color:#278e8818;border-color:#70aea7}.primary{margin-top:23px;border:0;width:100%;min-height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:12px;color:white;padding:12px 16px;cursor:pointer;transition:filter .2s,transform .2s;position:relative}.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}.primary:active{transform:translateY(0)}button:focus-visible{outline:3px solid #b9a3df;outline-offset:3px}.primary>svg{width:17px}.purple{background:var(--purple);box-shadow:0 4px 8px #7961cc15}.teal{background:var(--teal);box-shadow:0 4px 8px #278e8815}.primary .button-arrow{position:absolute;right:17px;width:16px}.result{margin-top:25px;background:#f8f6fc;border:1px solid #ece6f6;border-radius:10px;padding:17px 18px}.result-heading{display:flex;justify-content:space-between;align-items:center}.result-heading>span:first-child{display:flex;align-items:center;gap:7px;color:#83709f;font-size:11px;font-weight:600}.result-heading svg{width:15px;height:15px}.sample{font-size:8px;letter-spacing:1px;background:#ede7f6;color:#a08bb8;padding:3px 6px;border-radius:4px}.result-status{font-size:11px;color:#82748f;margin:16px 0 7px}.result ul{padding-left:16px;margin:0;color:#88808f;font-size:11px;line-height:1.95}.result li{padding-left:2px;margin-top:7px}.result li::marker{color:#b5a5cd}.story-field{margin-top:0}.story-field textarea{min-height:172px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-section{border-top:1px solid #efedf3;padding-top:22px;margin-top:27px}.preview-heading{display:flex;align-items:center;justify-content:space-between}.preview-heading h3{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;margin:0;color:#656570}.preview-heading svg{width:16px;height:16px;color:#8e9698}.preview-heading>span{font-size:10px;color:#9a9aa6;background:#f4f5f7;padding:4px 8px;border-radius:5px}.preview-note{font-size:10px;color:#a5a2ae;margin:10px 0 16px}.previews{display:grid;grid-template-columns:1fr 1fr;gap:13px}.page-card{border:1px solid #e7e8ec;border-radius:9px;overflow:hidden;background:#fff}.page-top{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid #efeff3}.page-top strong{font-size:11px;font-weight:600;color:#6c6a78}.page-top span{font-size:9px;color:#a6a3af}.page-placeholder{min-height:219px;padding:21px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#fafbfc,#f5f6f8);gap:12px}.mini-page{width:67px;height:85px;padding:7px;display:grid;gap:4px;background:white;border:1px solid #dbdfe5;box-shadow:3px 4px 0 #e8ebef;transform:rotate(-5deg);margin-bottom:8px;grid-template-columns:1fr 1fr}.page-card:nth-child(even) .mini-page{transform:rotate(5deg)}.mini-panel{border:1px solid #d7dde2;background:#f3f5f7;position:relative;overflow:hidden}.mini-panel:after{content:"";width:20px;height:20px;border:1px solid #dbe0e6;transform:rotate(45deg);position:absolute;bottom:-12px;left:5px}.mini-panel:first-child{grid-column:1/-1}.page-placeholder>strong{font-size:10px;color:#9699a4;font-weight:500}.page-placeholder>p{margin:0;font-size:9px;line-height:1.9;max-width:150px;color:#b0b1bb}.bottom-note{display:flex;align-items:center;justify-content:center;gap:8px;padding:26px 0 31px;color:#a19aaa}.bottom-note>svg{width:15px;height:15px;color:#b0a4c3}.bottom-note>p{font-size:10px;margin:0;line-height:1.9}footer{max-width:1240px;margin:0 auto;padding:21px 0 25px;border-top:1px solid #e9e8ef;display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#aca8b6}footer>span:first-child{font-size:10px;letter-spacing:.3px}.error{font-size:11px;color:#b44350;line-height:1.8}@media(min-width:1500px){main{padding-top:58px}.intro{margin-bottom:44px}}@media(max-width:1100px){main{padding:36px 24px 0}.studio-card{padding:23px}.workspace{gap:20px}.step{font-size:8px;letter-spacing:.6px}.tag{display:none}h2{font-size:19px}footer{margin:0 24px}}@media(max-width:760px){.topbar{height:70px;padding:0 20px}.brand{font-size:15px;gap:9px}.brand-icon{width:33px;height:33px;border-radius:9px}.prototype{font-size:9px;padding:6px 8px}main{padding:32px 18px 0}.intro{margin-bottom:28px}h1{font-size:29px;letter-spacing:1px}.intro>p{font-size:11px}.mobile-break{display:block}.eyebrow{font-size:8px}.workflow{gap:15px;font-size:10px}.workspace{grid-template-columns:1fr;gap:24px}.studio-card{padding:23px 21px}.description{min-height:0}.tag{display:block}.step{font-size:8px}.bottom-note{padding:24px 8px;text-align:left}.bottom-note>p{font-size:10px}footer{flex-direction:column;align-items:center;text-align:center;margin:0 18px;padding-top:18px;font-size:8px}.previews{grid-template-columns:1fr}.page-placeholder{min-height:238px}.mini-page{width:80px;height:103px}.page-placeholder>p{max-width:none}.settings-grid{gap:10px}.settings-grid label{font-size:11px}h2{font-size:19px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.feature-note{font-size:11px;line-height:1.8;color:#8b819a;margin:10px 0}.ai-answer{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:2;color:#63596f}.primary:disabled{opacity:.65;cursor:wait;transform:none}.preview-note{line-height:1.9}