:root{color-scheme:dark;--bg:#080a0d;--panel:#0e1116;--line:#252b34;--soft:#1b2028;--text:#f4f6f8;--muted:#8c95a3;--muted2:#bbc1ca;--accent:#b9f461;--danger:#ff8e89;--shadow:0 30px 80px #0006}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth;background:var(--bg)}
body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--text);background:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px),var(--bg);background-size:52px 52px;font-family:Inter,"Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,textarea{font:inherit}button{color:inherit}button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}
.ambient{position:fixed;z-index:-1;width:440px;height:440px;border-radius:50%;filter:blur(100px);opacity:.1;pointer-events:none}.a1{top:-250px;left:12%;background:#87a7ff}.a2{right:0;bottom:-320px;background:var(--accent)}
.topbar,main,footer{width:min(1180px,calc(100% - 48px));margin-inline:auto}.topbar{display:flex;height:74px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--soft)}
.brand{display:flex;gap:11px;align-items:center;color:var(--text);font-size:.9rem;font-weight:750;text-decoration:none}.brand>i{display:grid;width:27px;height:27px;border:1px solid #3b4651;border-radius:7px;background:#151920;transform:rotate(45deg)}.brand>i:after{width:7px;height:7px;margin:auto;border-radius:2px;background:var(--accent);box-shadow:0 0 12px #b9f461aa;content:""}
.online,.eyebrow,.kicker,.launch,.live{font-family:"SFMono-Regular",Consolas,monospace}.online{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.65rem;text-transform:uppercase}.online i,.launch i,.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #b9f461aa}
.input-view{display:grid;min-height:calc(100vh - 130px);grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);grid-template-rows:1fr auto;gap:32px 68px;align-items:center;padding:80px 0 52px}
.hero{max-width:580px}.eyebrow,.kicker{margin:0;color:var(--muted);font-size:.62rem;font-weight:700;letter-spacing:.15em}.eyebrow{display:flex;gap:9px;align-items:center}.eyebrow>i{width:16px;height:1px;background:var(--accent)}
.hero h1{margin:22px 0 0;font-size:clamp(3.4rem,6.2vw,6.1rem);font-weight:640;line-height:.98;letter-spacing:-.072em}.hero h1 span{color:var(--muted)}.hero>p:last-child{max-width:520px;margin:28px 0 0;color:var(--muted2);font-size:.94rem;line-height:1.9}
.builder{padding:12px;border:1px solid var(--line);border-radius:18px;background:#0e1116f2;box-shadow:var(--shadow)}.field-label{display:flex;align-items:center;justify-content:space-between;padding:9px 8px 14px;color:var(--muted);font:700 .6rem "SFMono-Regular",Consolas,monospace;letter-spacing:.11em}.field-label span{color:#636d7a;letter-spacing:0}
textarea{display:block;width:100%;min-height:200px;resize:vertical;padding:23px 24px;color:var(--text);border:1px solid var(--line);border-radius:12px;outline:0;background:#0a0d11;caret-color:var(--accent);font-size:clamp(1.06rem,1.6vw,1.3rem);line-height:1.65;transition:.16s}textarea::placeholder{color:#525b67}textarea:hover{border-color:#343c47}textarea:focus{border-color:#566337;box-shadow:inset 0 0 0 1px #b9f46120}textarea[aria-invalid=true]{border-color:#7f4547}.error{margin:10px 8px -2px;color:var(--danger);font-size:.75rem}
.actions{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:12px 2px 0 10px}.actions p{margin:0;color:#66707d;font-size:.64rem}kbd{padding:3px 6px;border:1px solid #303742;border-bottom-color:#444d59;border-radius:5px;background:#12161b;font:inherit;font-size:.58rem}
.primary{display:flex;min-width:170px;gap:14px;align-items:center;justify-content:center;padding:13px 17px;color:#0c1008;border:1px solid var(--accent);border-radius:9px;background:var(--accent);cursor:pointer;font-size:.78rem;font-weight:780;transition:.15s}.primary:hover{background:#cdfd81;box-shadow:0 0 28px #b9f46120;transform:translateY(-1px)}.primary b{font-size:1rem}
.examples{display:flex;grid-column:1/-1;gap:18px;align-items:center;justify-content:center;color:#5e6875;font:700 .57rem "SFMono-Regular",Consolas,monospace;letter-spacing:.11em}.examples>div{display:flex;gap:8px;flex-wrap:wrap}.examples button{padding:8px 12px;color:#8e98a5;border:1px solid var(--line);border-radius:999px;background:#0e1116bf;cursor:pointer;font-family:inherit;font-size:.68rem}.examples button:hover{color:var(--text);border-color:#404955}
.build-view{display:grid;min-height:calc(100vh - 130px);place-items:center;padding:70px 0}.console{width:min(560px,100%);padding:48px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow)}.orbit{position:relative;width:54px;height:54px;margin-bottom:28px;border:1px solid #38412d;border-radius:50%;animation:orbit 1.3s linear infinite}.orbit:before{position:absolute;inset:8px;border:1px solid #263020;border-radius:50%;content:""}.orbit:after{position:absolute;top:-3px;left:23px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px var(--accent);content:""}.orbit i{position:absolute;inset:20px;border-radius:2px;background:var(--accent)}
.console h2{margin:14px 0 10px;font-size:clamp(1.55rem,4vw,2.35rem);letter-spacing:-.045em}.building-idea{overflow:hidden;margin:0;color:var(--muted);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.console ol{margin:32px 0 0;padding:0;border-top:1px solid var(--soft);list-style:none}.console li{display:flex;gap:13px;align-items:center;min-height:42px;color:#4d5662;border-bottom:1px solid var(--soft);font:400 .7rem "SFMono-Regular",Consolas,monospace;transition:.16s}.console li i{width:7px;height:7px;border:1px solid #3a424c;border-radius:50%}.console li.active{color:var(--text)}.console li.active i{border-color:var(--accent);box-shadow:0 0 0 3px #b9f46118}.console li.complete{color:#798471}.console li.complete i{border-color:var(--accent);background:var(--accent)}
.result-view{min-height:calc(100vh - 130px);padding:58px 0 76px;animation:rise .42s ease both}.result-header{display:flex;gap:32px;align-items:flex-end;justify-content:space-between;margin-bottom:42px}.launch,.live{display:flex;gap:8px;align-items:center;color:var(--accent);font-size:.62rem;font-weight:700;letter-spacing:.12em}.launch{margin:0 0 15px}.result-header h2{margin:0;font-size:clamp(2.4rem,5vw,4.7rem);font-weight:610;letter-spacing:-.06em}.result-header>div>p:last-child{max-width:700px;margin:13px 0 0;overflow:hidden;color:var(--muted);font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.rebuild{flex:0 0 auto;padding:11px 15px;color:var(--muted2);border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;font-size:.72rem}.rebuild:hover{color:var(--text);border-color:#46505d}
.result-grid{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(500px,1.22fr);gap:22px;align-items:start}.details{display:grid;gap:14px}.card{padding:22px;border:1px solid var(--line);border-radius:13px;background:#0e1116ed}.concept{padding-bottom:8px}.concept dl{margin:15px 0 0}.concept dl>div{padding:14px 0;border-top:1px solid var(--soft)}.concept dt{margin-bottom:6px;color:#636d7a;font-size:.61rem;font-weight:700;text-transform:uppercase}.concept dd{margin:0;color:var(--muted2);font-size:.78rem;line-height:1.65;overflow-wrap:anywhere}.concept dl>div:first-child dd{color:var(--text);font-size:1.15rem;font-weight:700}
.mvp ol{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 0;padding:0;list-style:none}.mvp li{position:relative;padding-right:28px;color:var(--muted2);font-size:.7rem;line-height:1.5}.mvp li:not(:last-child):after{position:absolute;top:10px;right:9px;color:#3f4854;content:"→"}.stepno{display:block;margin-bottom:8px;color:var(--accent);font:400 .58rem "SFMono-Regular",Consolas,monospace}
.domains{padding-bottom:12px}.domains header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}.domains h3{margin:6px 0 0;font-size:.9rem}.domains header>span{padding:5px 7px;color:#787f6e;border:1px solid #303728;border-radius:5px;font:400 .47rem "SFMono-Regular",Consolas,monospace;letter-spacing:.09em}.domains ul{margin:0;padding:0;list-style:none}.domains li{display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:43px;border-top:1px solid var(--soft)}.domain-name{min-width:0;overflow:hidden;color:var(--muted2);font:400 .67rem "SFMono-Regular",Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}.copy{padding:6px 7px;color:#6e7885;border:0;background:transparent;cursor:pointer;font-size:.59rem}.copy:hover{color:var(--accent)}
.preview-wrap{position:sticky;top:22px;min-width:0}.preview-label{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}.preview-label>span:last-child{color:#68717d;font:400 .56rem "SFMono-Regular",Consolas,monospace;letter-spacing:.09em}.browser{overflow:hidden;border:1px solid #303640;border-radius:16px;background:#f6f7f9;box-shadow:0 28px 80px #0007}.browserbar{display:grid;height:47px;grid-template-columns:80px 1fr 80px;align-items:center;padding:0 16px;border-bottom:1px solid #292e37;background:#171a20}.dots{display:flex;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:#69453f}.dots i:nth-child(2){background:#695f37}.dots i:last-child{background:#3e644c}.browserbar>span:nth-child(2){overflow:hidden;padding:6px 15px;color:#79828f;border:1px solid #292e37;border-radius:6px;background:#101318;font:400 .59rem "SFMono-Regular",Consolas,monospace;text-align:center;text-overflow:ellipsis;white-space:nowrap}.browserbar b{color:#54606e;text-align:right}.preview-note{margin:11px 2px 0;color:#555f6c;font:400 .53rem "SFMono-Regular",Consolas,monospace;text-align:right}
#app-preview,.mock{min-height:595px}.mock{color:#171a20;background:#f7f8fa}.mocknav{display:flex;height:66px;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e8ec;background:#fff}.mockbrand{display:flex;gap:10px;align-items:center;font-size:.78rem;font-weight:800}.mocklogo{display:grid;width:27px;height:27px;place-items:center;color:#fff;border-radius:8px;background:#171a20}.beta{color:#818894;font-size:.54rem;font-weight:700;letter-spacing:.08em}.mockmain{width:min(100% - 48px,610px);margin:auto;padding:54px 0 44px}.overline{margin:0 0 12px;color:#6e7783;font-size:.55rem;font-weight:800;letter-spacing:.12em}.mockmain h3{max-width:480px;margin:0;color:#15181d;font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.05em}.subtitle{max-width:480px;margin:13px 0 0;color:#727a85;font-size:.71rem;line-height:1.7}.inputrow{display:flex;gap:8px;margin-top:28px}.fakeinput{flex:1;min-width:0;padding:13px 15px;overflow:hidden;color:#969da6;border:1px solid #dfe3e8;border-radius:8px;background:white;font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.mockaction{padding:0 17px;color:white;border:0;border-radius:8px;background:#171a20;cursor:pointer;font-size:.62rem;font-weight:700}.rows{display:grid;gap:8px;margin-top:25px}.row{display:grid;grid-template-columns:29px 1fr auto;gap:11px;align-items:center;padding:12px 14px;border:1px solid #e2e5e9;border-radius:9px;background:#fff;box-shadow:0 5px 18px #161d2509}.num{color:#a0a7af;font:400 .57rem "SFMono-Regular",Consolas,monospace}.row strong{display:block;color:#24282e;font-size:.67rem}.row small{display:block;margin-top:3px;color:#9299a2;font-size:.54rem}.tag{padding:5px 7px;color:#3b5f20;border-radius:999px;background:#eaf7df;font-size:.49rem;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:27px}.stat{padding:14px;border:1px solid #e1e5e9;border-radius:9px;background:white}.stat span{display:block;color:#8b929b;font-size:.52rem}.stat strong{display:block;margin-top:7px;color:#22262c;font-size:1.15rem}.counter{display:grid;margin-top:25px;padding:28px;place-items:center;border:1px solid #e1e5e9;border-radius:13px;background:white}.counter>span{color:#8c949e;font-size:.58rem}.counter>strong{margin:5px 0 17px;font-size:3.3rem;letter-spacing:-.07em}.counter div{display:flex;gap:7px}.counter button{min-width:60px;padding:9px 12px;color:#454b53;border:1px solid #dde1e5;border-radius:7px;background:#f8f9fa;cursor:pointer;font-size:.58rem}.counter button:last-child{color:white;border-color:#171a20;background:#171a20}.imagegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:23px}.imagegrid i{aspect-ratio:1/.82;border-radius:9px;background:linear-gradient(145deg,#ced5de,#7d8796)}.imagegrid i:nth-child(2){background:linear-gradient(145deg,#d8c9bb,#846f65)}.imagegrid i:last-child{background:linear-gradient(145deg,#c3d8d1,#67827b)}
.toast{position:fixed;right:24px;bottom:24px;z-index:3;padding:11px 14px;color:#10150c;border-radius:8px;background:var(--accent);box-shadow:var(--shadow);font-size:.7rem;font-weight:700}
footer{display:flex;min-height:56px;align-items:center;justify-content:space-between;color:#4f5864;border-top:1px solid var(--soft);font:400 .55rem "SFMono-Regular",Consolas,monospace}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@media(max-width:980px){.input-view{grid-template-columns:1fr;gap:38px;padding:72px 0 48px}.hero{max-width:720px}.hero h1{font-size:clamp(3.8rem,12vw,6.6rem)}.examples{grid-column:auto}.result-grid{grid-template-columns:1fr}.details{order:2}.preview-wrap{position:static;order:1}#app-preview,.mock{min-height:550px}}
@media(max-width:640px){.topbar,main,footer{width:min(100% - 28px,1180px)}.topbar{height:62px}.online{font-size:0}.input-view{min-height:calc(100vh - 110px);padding:48px 0 38px}.hero h1{font-size:clamp(3rem,15vw,4.3rem)}.hero>p:last-child{font-size:.83rem}.builder{padding:9px;border-radius:14px}textarea{min-height:185px;padding:18px;font-size:1rem}.actions{display:block;padding:9px 0 0}.actions p{display:none}.primary{width:100%}.examples{align-items:flex-start;flex-direction:column}.examples>div{width:100%}.examples button{flex:1}.console{padding:30px 23px}.result-view{padding:42px 0 60px}.result-header{align-items:flex-start;flex-direction:column;margin-bottom:30px}.result-header h2{font-size:clamp(2.5rem,13vw,3.7rem);overflow-wrap:anywhere}.result-header>div>p:last-child{white-space:normal;line-height:1.6}.rebuild{align-self:stretch}.mvp ol{grid-template-columns:1fr;gap:15px}.mvp li{display:grid;grid-template-columns:27px 1fr;padding:0;align-items:center}.mvp li:after{display:none}.stepno{margin:0}.domains header{align-items:flex-start;flex-direction:column}.browserbar{grid-template-columns:54px 1fr 24px;padding:0 10px}.dots{gap:4px}.dots i{width:6px;height:6px}#app-preview,.mock{min-height:505px}.mocknav{height:58px;padding:0 20px}.mockmain{width:min(100% - 32px,610px);padding-top:36px}.inputrow{flex-direction:column}.mockaction{min-height:40px}.row{grid-template-columns:24px 1fr}.tag{display:none}.stats{grid-template-columns:1fr 1fr}.imagegrid{grid-template-columns:1fr 1fr}.imagegrid i:last-child{display:none}footer{gap:12px;flex-direction:column;justify-content:center;padding:16px 0;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}