:root{color-scheme:dark;--bg:#090b14;--side:#0b0e19;--panel:#111522;--panel2:#161c2b;--muted:#909bb0;--line:#263044;--blue:#697cff;--violet:#aa72ff;--green:#41deb0;--text:#f5f7ff;--shadow:0 16px 50px #0004;font-family:Inter,-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}::selection{background:#6a63ff55}h1,h2,h3,p{margin-top:0}.app-shell{min-height:100vh;display:flex}.sidebar{width:254px;flex-shrink:0;background:var(--side);border-right:1px solid #252c3a;position:sticky;height:100vh;top:0;display:flex;flex-direction:column;padding:33px 17px 26px}.brand{display:flex;align-items:center;gap:11px;margin:0 0 66px 13px}.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#5e77f8,#aa5bf6);font-size:29px;line-height:1;font-weight:900;letter-spacing:-3px;box-shadow:0 5px 23px #6559ff40}.brand-dot{color:#f9d4ff}.brand strong{display:block;font-size:18px;font-weight:850;letter-spacing:.9px}.brand small{display:block;letter-spacing:2px;font-size:8px;color:#8592b2;margin-top:4px;font-weight:750}.sidebar-label{font-size:10px;letter-spacing:2px;margin:0 0 18px 17px;color:#5e6b85;font-weight:750}.side-nav{display:grid;gap:8px}.nav-link{background:none;color:#8e9bb5;border:none;border-radius:10px;display:flex;align-items:center;gap:15px;text-align:left;font-weight:650;padding:13px 14px;width:100%;transition:.16s}.nav-link:hover{background:#171e31;color:white}.nav-link.active{color:#c6cdff;background:#202443;box-shadow:inset 3px 0 0 #7d85ff}.nav-icon{font-size:21px;line-height:1;width:22px;text-align:center;font-weight:600}.sidebar-bottom{margin-top:auto;padding:16px 12px;border-top:1px solid #222839;font-size:9px;color:#74839f;letter-spacing:1.2px;display:flex;align-items:center;gap:7px}.status-circle{display:inline-block;width:7px;height:7px;border-radius:50%;background:#37dca0;box-shadow:0 0 8px #37dca055;flex-shrink:0}.side-version{margin-left:auto;color:#667089}.main{min-width:0;flex:1}.topbar{height:82px;border-bottom:1px solid #22293a;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,4vw,58px);background:#0a0d16a8}.topbar-left{display:flex;gap:14px;align-items:center;color:#6c7891}.top-label{font-size:10px;letter-spacing:1.7px;font-weight:750}.top-path{font-size:11px;color:#a5afff}.topbar-right{display:flex;align-items:center;gap:24px}.beta-chip{border:1px solid #3d3761;background:#211e37;color:#b2a4ff;padding:7px 11px;font-size:9px;font-weight:800;letter-spacing:1.4px;border-radius:5px}.account-button{border:none;background:none;color:#e4e9fb;display:flex;align-items:center;gap:10px;font-weight:700}.user-circle{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#2a3151;color:#b4bcff;font-size:17px}.content{padding:38px clamp(18px,4vw,60px) 80px;max-width:1500px;margin:0 auto}.page{display:none;animation:comeIn .25s ease}.page.active{display:block}@keyframes comeIn{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}.hero{min-height:410px;border:1px solid #2a3154;border-radius:22px;background:radial-gradient(ellipse at 74% 53%,#31336c80 0%,transparent 48%),linear-gradient(116deg,#111733,#17152e 67%,#181336);overflow:hidden;position:relative;display:flex;align-items:center;padding:clamp(26px,5vw,66px);box-shadow:0 25px 75px #02041236}.hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#a8afff70 .7px,transparent .7px);background-size:32px 32px;opacity:.14;pointer-events:none}.hero-orb{position:absolute;width:400px;height:400px;border:1px solid #8e83ff30;border-radius:50%;right:60px;top:-130px;pointer-events:none}.hero-orb-two{width:540px;height:540px;right:-20px;top:-200px}.hero-content{z-index:1;width:59%;position:relative}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:#afb6ff;margin-bottom:26px}.sparkle{color:#db9cff;margin-right:8px}.hero h1{font-size:clamp(43px,4.7vw,78px);line-height:1.16;letter-spacing:-3px;font-weight:900;margin-bottom:19px}.gradient-text{background:linear-gradient(97deg,#77b5ff,#b58afe 65%,#ed9eff);background-clip:text;-webkit-text-fill-color:transparent}.hero p{color:#abb5d4;line-height:2;letter-spacing:.3px;margin-bottom:30px;font-size:clamp(12px,1.2vw,15px)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{border:0;border-radius:10px;min-height:46px;padding:12px 20px;font-weight:760;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .16s,filter .16s;white-space:nowrap}.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07)}.btn.primary{background:linear-gradient(102deg,#637af5,#9764f5);box-shadow:0 8px 24px #6b57e14a;color:white}.btn.ghost{color:#dce3ff;background:#ffffff12;border:1px solid #6470a062}.btn.secondary{color:#dce4ff;background:#272d43;border:1px solid #3e4562}.btn.full{width:100%;display:flex}.hero-visual{z-index:1;position:absolute;width:38%;max-width:460px;right:3%;top:20%;transform:rotate(7deg)}.visual-window{background:#0b1020;border:1px solid #6265b978;border-radius:17px;box-shadow:0 22px 60px #02030aa0;overflow:hidden}.visual-bar{display:flex;gap:6px;align-items:center;padding:13px 14px;border-bottom:1px solid #44456864;background:#181e35}.visual-bar>span{width:6px;height:6px;background:#846ec6;border-radius:50%}.visual-bar>span:first-child{background:#fb7e91}.visual-bar>span:nth-child(2){background:#ffcc72}.visual-bar>span:nth-child(3){background:#72dbc2}.visual-bar-text{font-size:10px;margin:auto;color:#91a0c5;font-family:monospace}.visual-screen{position:relative;min-height:250px;display:flex;align-items:center;flex-direction:column;justify-content:center;background:radial-gradient(circle,#4149bd40,transparent 60%),repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 38px)}.visual-logo{font-size:82px;font-weight:950;letter-spacing:-10px;color:white;text-shadow:0 0 60px #857afa}.visual-logo span{color:#a979f9}.visual-caption{letter-spacing:2.5px;color:#8996c4;font-size:8px}.floating-card{position:absolute;padding:10px 15px;border:1px solid #6973b066;border-radius:11px;background:#252e55e8;color:#dde1ff;box-shadow:0 10px 40px #0008;font-size:11px;font-weight:700;letter-spacing:1px}.floating-card.a{left:-13%;top:18%}.floating-card.b{right:-10%;bottom:16%;display:flex;align-items:center;gap:9px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:43px 0 22px}.section-kicker{display:block;color:#7c8aff;font-size:10px;letter-spacing:2.2px;font-weight:850;margin-bottom:12px}.section-head h2{font-size:22px;letter-spacing:-.6px;margin:0;font-weight:830}.section-meta{font-size:9px;letter-spacing:2px;color:#63718d}.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.step-card{background:#111724;border:1px solid #252e42;border-radius:16px;padding:25px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;transition:transform .16s,border-color .16s;min-height:257px}.step-card:hover{transform:translateY(-3px);border-color:#6f76cb}.step-index{font-weight:850;font-size:12px;letter-spacing:1px;color:#8a97bf;width:100%;display:block}.step-index span{font-size:9px;color:#505f80;letter-spacing:2px}.step-icon{display:grid;place-items:center;width:51px;height:51px;border-radius:14px;font-size:25px;margin:22px 0 19px}.step-icon.blue{background:#294c846b;color:#8ec6ff}.step-icon.purple{background:#583c8273;color:#bd9dff}.step-icon.green{background:#22695b60;color:#7ef0ca}.step-card strong{font-size:17px;letter-spacing:-.3px}.step-card>span:nth-last-child(2){color:#8492ae;font-size:12px;line-height:1.8;margin:12px 0 16px}.step-card small{margin-top:auto;color:#9aa4ff;font-weight:750}.bottom-banner{background:#151a2b;border:1px solid #2b3555;padding:22px 27px;border-radius:14px;display:flex;align-items:center;gap:18px;margin-top:25px}.banner-emoji{width:47px;height:47px;border-radius:12px;background:#27264c;display:grid;place-items:center;font-size:22px;flex-shrink:0}.bottom-banner strong{font-size:15px}.bottom-banner p{color:#8190ad;margin:7px 0 0;font-size:12px}.text-button{margin-left:auto;background:none;border:0;color:#acb7ff;font-weight:740;white-space:nowrap}.page-heading{margin:8px 0 35px}.page-heading h1{font-size:clamp(27px,3vw,38px);letter-spacing:-1.2px;line-height:1.35;margin-bottom:13px}.page-heading p{color:#8492ae;line-height:1.8}.heading-accent{margin-left:10px;color:#9883ff}.heading-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.builder-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:22px;align-items:start}.panel{background:var(--panel);border:1px solid #2a3245;border-radius:17px;padding:26px;box-shadow:0 10px 35px #0002}.panel-title{display:flex;align-items:center;gap:13px;margin-bottom:24px}.panel-title h2{font-size:17px;letter-spacing:-.3px;margin:0}.panel-num{display:grid;place-items:center;width:34px;height:34px;background:#303f72;color:#a8b8ff;border-radius:9px;font-size:12px;font-weight:900}.purple-num{background:#423264;color:#d2a8fc}.form-panel label,.modal label{display:block;margin:18px 0 8px;color:#c3cbe0;font-weight:700;font-size:12px}.required{background:#29375f;color:#afc2ff;font-size:9px;padding:3px 6px;border-radius:4px;margin-left:4px}input,textarea,select{width:100%;color:#edf1ff;background:#0c111d;border:1px solid #2f3a52;padding:13px 14px;border-radius:10px;outline:0;transition:border-color .15s;min-height:46px}input:focus,textarea:focus,select:focus{border-color:#7481f7}textarea{resize:vertical;line-height:1.8}input::placeholder,textarea::placeholder{color:#59677e}option{background:#11192b}.form-tip{margin-top:25px;padding:15px;border-radius:10px;background:#222544;border:1px solid #333c65;font-size:12px;line-height:1.8;color:#b8c2ec}.builder-right{display:grid;gap:20px}.muted{color:#8190ab;font-size:12px;line-height:1.8}.prompt-view{height:420px;overflow:auto;background:#080c16;border:1px solid #2a3449;border-radius:12px;padding:21px;color:#becce5;white-space:pre-wrap;word-break:break-word;font-size:11.8px;line-height:1.9;user-select:text}.prompt-actions{display:grid;gap:10px;margin-top:17px}.mini-panel{border:1px solid #2d3552;border-radius:13px;padding:18px;background:#1a2040;display:flex;gap:12px;align-items:center}.mini-panel>span{font-size:23px;color:#bd9afe}.mini-panel strong{font-size:13px}.mini-panel p{font-size:11px;line-height:1.6;color:#8fa0c6;margin:5px 0 0}.mini-panel button{margin-left:auto;border:0;background:#394377;color:white;border-radius:8px;padding:7px 11px}.empty-state{text-align:center;border:1px dashed #3b4663;border-radius:16px;padding:65px 20px;background:#111623}.empty-state-icon{font-size:50px;margin-bottom:18px;color:#7b86d8}.empty-state h2{font-size:22px}.empty-state p{color:#8796b0;margin-bottom:25px;line-height:1.9}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.project-card{border:1px solid #2a344a;border-radius:15px;background:#131927;padding:20px;display:flex;flex-direction:column;min-height:248px}.project-top{display:flex;justify-content:space-between;align-items:center}.project-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;color:#b3c1ff;background:linear-gradient(130deg,#293e72,#422e72);font-size:23px}.project-badge{border-radius:20px;background:#193b37;color:#6ce5b2;font-size:10px;padding:6px 9px;font-weight:740}.project-badge.draft{background:#303347;color:#9eacca}.project-card h3{font-size:18px;margin:17px 0 7px;overflow-wrap:anywhere}.project-card p{font-size:12px;color:#8b98b3;line-height:1.7;min-height:38px;overflow-wrap:anywhere}.project-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;color:#667993;margin-top:auto;margin-bottom:17px}.project-actions{border-top:1px solid #2c3549;padding-top:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.small-action{border:1px solid #3a4761;background:#222c42;color:#c8d4f4;padding:8px 10px;border-radius:8px;font-weight:700;font-size:11px}.small-action:hover{border-color:#7787de}.small-action.danger{color:#b8a4ad;margin-left:auto}.publish-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(245px,.8fr);align-items:start;gap:21px}.choose-project{display:flex;gap:10px}.choose-project select{min-width:0;flex:1}.mini-btn{min-height:46px;background:#273450;color:#dce6ff;padding:10px 14px}.upload-title{margin-top:34px}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:269px;text-align:center;border:2px dashed #444e79;background:#111b34;border-radius:15px;padding:25px;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.drag{border-color:#8797ff;background:#18234a}.drop-icon{font-size:40px;display:grid;place-items:center;border:1px solid #5866b04a;width:68px;height:68px;border-radius:18px;color:#a4b1ff;margin-bottom:19px;background:#27376b}.dropzone strong{font-size:15px;overflow-wrap:anywhere}.dropzone>span:not(.drop-icon):not(.drop-button){font-size:12px;color:#8797b5;margin-top:12px;line-height:1.6}.drop-button{padding:10px 17px;border:1px solid #687ad2;border-radius:8px;color:#bec9ff;margin-top:19px;font-size:12px;font-weight:750}.zip-status{padding:15px 2px;color:#8390b0;line-height:1.7;font-size:12px;min-height:56px}.zip-status.good{color:#7ee9c6}.zip-status.bad{color:#f6a1ad}.publish-action{margin-top:10px}.guide-panel h3{font-size:19px;margin:0 0 25px}.check-item{display:flex;align-items:flex-start;gap:14px;margin:0 0 22px}.check-item>span{width:25px;height:25px;flex-shrink:0;background:#1a453a;color:#6ce2b3;border-radius:50%;display:grid;place-items:center;font-weight:900}.check-item strong{font-size:12px;display:block;margin-bottom:6px}.check-item small{font-size:11px;color:#8b98b1;line-height:1.8;display:block}.helper-card{background:#202440;border:1px solid #3c4071;border-radius:12px;padding:21px;line-height:1.9;color:#c3cafa;font-size:13px;margin-top:17px}.helper-card button,.faq-card button{color:#a6b4ff;border:0;background:none;padding:8px 0;margin-top:7px;font-weight:800}.faq-list{display:grid;gap:15px;max-width:900px}.faq-card{background:#131a29;border:1px solid #2a354c;border-radius:14px;padding:24px 28px;display:flex;gap:23px}.faq-no{font-weight:900;font-size:27px;color:#737def}.faq-card h3{margin:2px 0 12px;font-size:16px}.faq-card p{font-size:13px;line-height:1.9;color:#96a4bf;margin-bottom:0}.guide-notice{background:#26223a;border:1px solid #4b4067;padding:23px;border-radius:13px;margin-top:22px;max-width:900px}.guide-notice strong{color:#d7c4ff}.guide-notice p{color:#ac9fc8;line-height:1.9;font-size:12px;margin:9px 0 0}.mobile-nav{display:none}.modal-backdrop{position:fixed;inset:0;background:#03050bd9;z-index:30;display:grid;place-items:center;padding:16px;overflow-y:auto;backdrop-filter:blur(7px)}.hidden{display:none!important}.modal{width:min(100%,450px);background:#141b2d;border:1px solid #435078;padding:32px;border-radius:19px;box-shadow:0 20px 80px #000c;position:relative;margin:auto}.close-modal{position:absolute;right:15px;top:12px;background:none;border:0;color:#aab6d8;font-size:27px}.modal-mark,.modal-symbol{font-size:42px;font-weight:900;letter-spacing:-5px;color:#dce5ff;margin-bottom:15px}.modal-mark span{color:#a780ff}.modal-symbol{letter-spacing:0;color:#a5afff}.modal h2{font-size:24px;margin-bottom:9px}.modal>p{color:#95a3bd;font-size:12px;line-height:1.9}.auth-toggle{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;background:#0d1424;border-radius:10px;margin:23px 0}.auth-toggle button{padding:11px;border:0;background:none;color:#8d9bbc;border-radius:8px}.auth-toggle button.active{background:#303c64;color:white;font-weight:800}.modal form .btn{margin-top:25px}.modal-note{font-size:10px!important;margin-top:18px;text-align:center}.success-modal{text-align:center}.success-check{height:76px;width:76px;border-radius:50%;display:grid;place-items:center;color:#98ffdf;border:2px solid #57cca5;background:#1b574b;font-size:35px;margin:0 auto 24px}.success-url{background:#080e1e;border:1px solid #384869;color:#a7bdff;padding:15px;border-radius:10px;overflow-wrap:anywhere;margin:18px 0;line-height:1.7}.success-modal .btn{margin:10px 0}.toast{position:fixed;z-index:60;bottom:24px;left:50%;transform:translate(-50%,120px);opacity:0;transition:transform .25s,opacity .25s;max-width:min(520px,90vw);background:#303e65;border:1px solid #6576ba;color:#f0f5ff;border-radius:10px;padding:14px 19px;line-height:1.6;font-size:13px;font-weight:700;box-shadow:0 12px 36px #0009;pointer-events:none;text-align:center}.toast.show{transform:translate(-50%,0);opacity:1}.toast.error{background:#4c2733;border-color:#a75d77}
@media(max-width:1150px){.sidebar{width:215px}.hero-visual{width:35%;right:3%}.hero h1{font-size:58px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding-left:28px;padding-right:28px}}
@media(max-width:880px){.sidebar{width:74px;padding:25px 9px}.brand{margin:0 auto 46px}.brand>span:last-child,.sidebar-label,.side-version,.sidebar-bottom,.nav-link{font-size:0}.side-nav{gap:8px}.nav-link{justify-content:center;padding:14px 5px}.nav-icon{font-size:25px}.sidebar-bottom{justify-content:center}.hero{min-height:340px}.hero-content{width:67%}.hero-visual{width:38%;right:-9%;opacity:.74}.hero h1{font-size:49px}.steps-grid{gap:10px}.step-card{padding:18px}.step-card strong{font-size:14px}.builder-grid,.publish-grid{grid-template-columns:1fr}.builder-right{grid-template-columns:1fr}.publish-side{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:15px}.helper-card{margin:0}}
@media(max-width:620px){.sidebar{display:none}.topbar{height:64px;padding:0 17px}.top-label{font-size:9px}.top-path{display:none}.topbar-right{gap:10px}.beta-chip{font-size:8px;padding:5px 7px}.account-button{font-size:11px;gap:7px}.user-circle{width:28px;height:28px}.content{padding:19px 15px 115px}.hero{min-height:370px;padding:29px 23px;align-items:flex-start}.hero-content{width:100%}.hero h1{font-size:49px;line-height:1.16;margin-top:0;letter-spacing:-2.5px}.hero p{font-size:12px;max-width:94%;line-height:1.9;margin-bottom:25px}.hero-visual{opacity:.15;transform:rotate(10deg);width:84%;right:-33%;top:19%}.hero-actions{gap:10px;flex-direction:column;align-items:flex-start}.hero-actions .btn{width:100%;max-width:300px}.eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:28px}.section-head{margin:31px 0 16px}.section-head h2{font-size:19px}.section-meta{display:none}.steps-grid{grid-template-columns:1fr;gap:12px}.step-card{min-height:0;padding:18px;display:grid;grid-template-columns:55px 1fr;column-gap:14px}.step-index{grid-column:1/-1;margin-bottom:11px}.step-icon{grid-row:2/span 3;margin:0;height:48px;width:48px}.step-card strong{font-size:15px;margin-top:0}.step-card>span:nth-last-child(2){margin:7px 0;font-size:11px}.step-card small{grid-column:2}.bottom-banner{margin-top:16px;padding:16px;flex-wrap:wrap;gap:12px}.bottom-banner strong{font-size:13px}.bottom-banner p{font-size:11px;line-height:1.6}.bottom-banner .text-button{width:100%;text-align:right}.page-heading{margin:13px 0 24px}.page-heading h1{font-size:27px;letter-spacing:-.8px}.page-heading p{font-size:12px}.heading-row{align-items:flex-start;flex-direction:column}.panel{padding:19px;border-radius:13px}.panel-title{margin-bottom:18px}.panel-title h2{font-size:15px}.form-panel label,.modal label{font-size:12px}.prompt-view{height:330px;font-size:11px;padding:16px}.project-grid{grid-template-columns:1fr}.project-card{min-height:220px}.choose-project{flex-direction:column}.dropzone{min-height:250px}.dropzone strong{font-size:13px}.publish-side{display:block}.helper-card{margin-top:15px}.faq-card{padding:19px 14px;gap:12px}.faq-no{font-size:23px}.faq-card h3{font-size:14px}.faq-card p{font-size:12px}.guide-notice{padding:17px}.modal{padding:25px 20px;max-width:400px}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:20;height:calc(66px + env(safe-area-inset-bottom));padding:5px 7px env(safe-area-inset-bottom);background:#0c1020;border-top:1px solid #273149;box-shadow:0 -10px 25px #0006}.mobile-nav button{background:none;color:#7687a4;border:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:9px;font-weight:750;padding:0;min-width:0}.mobile-nav button span{font-size:24px;line-height:28px}.mobile-nav button.active{color:#a7afff}.toast{bottom:82px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}

.sample-link{color:#a9b8ff;font-weight:750;display:inline-block;margin-top:7px;text-decoration:underline;text-underline-offset:3px}