@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#252034;--muted:#635b70;--paper:#fbf9f5;--panel:#fff;--line:#e6e0e8;--accent:#5834bf;--wash:#eee7fc;--green:#366750;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input,select,textarea{font:inherit}button,.btn{cursor:pointer;color:inherit;background:#fff;border:1px solid var(--line);padding:.65rem .95rem;border-radius:.65rem;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:.35rem;font-weight:700}button:hover,.btn:hover{border-color:var(--accent)}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.soft{background:var(--wash);color:#46298b}.link{border-color:transparent;background:none}.danger{color:#a02c37}.logo{font-weight:700;font-size:1.22rem;text-decoration:none;white-space:nowrap}.logo span{color:var(--accent);font-size:1.35rem;margin-right:.22rem}#top{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:.65rem clamp(1rem,5vw,5rem);border-bottom:1px solid var(--line);gap:.5rem;background:var(--paper)}#nav,.actions{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}#nav{justify-content:flex-end}.wrap{width:min(1140px,100% - 2rem);margin:auto}.hero{display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:3rem;padding-block:clamp(3rem,8vw,7rem)}h1,h2,h3,p{margin:0 0 .7rem}h1,h2{line-height:.98;letter-spacing:-.03em;font-family:"Instrument Serif",Georgia,serif;font-weight:400}h1{font-size:clamp(3.65rem,8vw,7rem)}h1 em{color:var(--accent);font-weight:400}h2{font-size:clamp(2.5rem,5vw,4rem)}p{line-height:1.55;color:var(--muted)}.hero p{font-size:1.15rem;max-width:38ch;margin-block:1rem 1.6rem}.cover{min-width:0;aspect-ratio:1.12;position:relative;padding:9%;display:grid;align-items:center;border-radius:1.5rem;background:radial-gradient(ellipse at 20% 18%,#eee2ff 0,transparent 48%),radial-gradient(ellipse at 92% 80%,#e9c4ff 0,transparent 50%),#c5a6ff;overflow:hidden}.demo{border-radius:1rem;background:#fffaf3;box-shadow:0 22px 50px #49347140;overflow:hidden;transform:rotate(-5deg);width:97%;margin:auto}.demo-bar{background:white;border-bottom:1px solid #eee2e5;color:#765e8a;padding:.65rem 1rem;letter-spacing:.15em;font-size:.75rem}.demo-content{padding:1.8rem 1rem;text-align:center;color:#43282d}.demo-content strong{display:block;font:clamp(2.2rem,5vw,4.7rem)/.98 "Instrument Serif",serif;letter-spacing:-.035em}.demo-content img{display:block;width:95%;height:clamp(80px,13vw,190px);object-fit:cover;margin:.9rem auto 0;border-radius:.45rem}.section{padding:2rem 0 4rem}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.tile{background:#fff;border:1px solid var(--line);border-radius:1rem;overflow:hidden;min-width:0}.tile-body{padding:1.15rem}.tile h3{margin-bottom:.3rem}.art{height:155px;display:grid;place-items:center;padding:1rem;text-align:center;background:var(--art);color:var(--art-ink);font:2.3rem/.95 "Instrument Serif",serif;background-size:cover;background-position:center}.art.with-image span{background:#fff8edee;color:#251c2b;padding:.55rem .9rem;border-radius:.35rem}.project .tile-body{display:grid;gap:.55rem}.project .tile-body h3,.project .tile-body p{margin:0;overflow-wrap:anywhere}.live{color:var(--green)}footer.site-footer{padding:1.4rem 0;border-top:1px solid var(--line);color:var(--muted)}.loading{padding:2rem}.dashboard{padding-top:3rem}.empty{padding:1.4rem;border:1px dashed #cfc4dc;border-radius:.8rem;margin-bottom:1rem}.editorbar{background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.65rem 1rem;position:sticky;top:0;z-index:2}.editorbar strong{overflow-wrap:anywhere}.editor{display:grid;grid-template-columns:275px minmax(260px,1fr) 300px;min-height:calc(100vh - 126px)}.sidebar,.inspector{background:#fff;min-width:0;padding:1rem}.sidebar{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.editor h3{font-size:.95rem;margin:1.15rem 0 .55rem}.editor h3:first-child{margin-top:0}.sidebar select{margin-bottom:.55rem}.section-list{display:grid;gap:.4rem;margin-bottom:.85rem}.section-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border:1px solid var(--line);border-radius:.6rem}.section-row.selected{border-color:#9e85e4;background:#f4effd}.section-row>button{display:block;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:0}.section-row .move{display:flex}.move button{padding:.35rem .4rem;background:transparent;border:0}.workspace{padding:.85rem;background:#edeaf0;min-width:0}.canvas{display:block;width:100%;height:calc(100vh - 195px);min-height:470px;border:1px solid #d7cfdf;border-radius:.8rem;margin:auto;background:white}.canvas.mobile{max-width:390px}.previewbar{display:flex;justify-content:center;gap:.4rem;margin-bottom:.7rem}.previewbar [aria-pressed=true]{background:#e3d5ff}.inspector details{border-top:1px solid var(--line);padding:.75rem 0}.inspector summary{cursor:pointer;font-weight:700}.field{display:grid;gap:.3rem;margin:.65rem 0;font-size:.9rem;font-weight:600}input:not([type=color]),textarea,select{width:100%;min-width:0;border:1px solid #d9d1df;border-radius:.5rem;padding:.58rem .65rem;background:#fff;color:var(--ink)}textarea{resize:vertical;min-height:86px}input[type=color]{width:100%;height:37px;background:#fff;border:1px solid var(--line);border-radius:.5rem}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.hint{font-size:.85rem}.guide{max-width:820px;padding-block:3rem}.guide details{background:#fff;border:1px solid var(--line);border-radius:.7rem;padding:1rem 1.25rem;margin:.7rem 0}.guide summary{cursor:pointer;font-weight:700}.guide li{margin:.35rem 0;line-height:1.55}dialog{width:min(550px,100% - 2rem);padding:1.65rem;border:1px solid var(--line);border-radius:1rem;color:var(--ink);max-height:85vh}dialog::backdrop{background:#21163677}.close{position:absolute;right:.6rem;top:.6rem;padding:.25rem .6rem;font-size:1.15rem}dialog h2{padding-right:1.2rem;font-size:2.65rem}#notice{position:fixed;bottom:1rem;right:1rem;max-width:min(25rem,100% - 2rem);padding:.8rem 1.1rem;background:#282139;color:#fff;border-radius:.6rem;z-index:4;box-shadow:0 8px 30px #281c4d42}.small{font-size:.82rem;color:var(--muted)}:focus-visible{outline:3px solid #9d70ed;outline-offset:2px}@media(max-width:1020px){.editor{grid-template-columns:205px minmax(200px,1fr) 235px}.sidebar,.inspector{padding:.65rem}}@media(max-width:780px){.hero{grid-template-columns:1fr;gap:1.5rem}.cover{max-width:560px;aspect-ratio:1.4}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.workspace{order:-1;grid-column:1/-1}.canvas{height:58vh;min-height:350px}.editorbar{position:static}}@media(max-width:480px){.grid,.editor{grid-template-columns:1fr}.workspace{grid-column:1}.editor .inspector{border-top:1px solid var(--line)}#top{padding-inline:.65rem}#nav button{padding:.48rem .55rem}.hero h1{font-size:3.45rem}}

.project-state{display:grid;gap:.1rem}.editor-tools .icon{font-size:1.1rem;padding:.45rem .62rem}.editor-tools button:disabled{cursor:default}
.editor{grid-template-columns:245px minmax(260px,1fr) 300px}
.editor .sidebar,.editor .inspector{height:calc(100dvh - 130px);overflow:auto}
.editor-tabs{display:flex;gap:.2rem;justify-content:space-between;margin-bottom:1rem;padding:.2rem;background:#f4f0f8;border-radius:.55rem}
.editor-tabs button{flex:1;font-size:.84rem;padding:.45rem .3rem;background:transparent;border-color:transparent}
.editor-tabs button[aria-pressed=true]{background:white;color:var(--accent);border-color:#e2d9ee;box-shadow:0 1px 3px #2611380d}
.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.component-grid .component{display:grid;align-content:center;justify-items:center;min-height:66px;font-size:.75rem;line-height:1.15;padding:.35rem .15rem;background:#fff;cursor:grab;text-align:center}
.component span{font-size:1.25rem;color:#5d38ba;line-height:1}
.component-library h3{margin:1rem 0 .5rem!important;font-size:.78rem;color:var(--muted)}
.outline-node{display:grid;gap:.3rem}.outline-column{margin-left:.65rem;border-left:1px solid var(--line);padding:.15rem 0 .15rem .4rem;color:var(--muted);font-size:.8rem}
.outline-column .outline-node{margin-top:.25rem}.section-row[draggable]{cursor:grab}
.property-actions{border-top:1px solid var(--line);margin-top:1rem;padding-top:.75rem}
.colors.two{grid-template-columns:repeat(2,1fr)}
.canvas-scroll{overflow:auto;padding-bottom:.35rem}
.canvas.device-tablet{max-width:768px}.canvas.device-mobile{max-width:390px}
.preview-only{grid-template-columns:1fr}.preview-only .sidebar,.preview-only .inspector{display:none}
.preview-only .canvas.device-desktop{max-width:1360px}
@media(max-width:1020px){.editor{grid-template-columns:195px minmax(190px,1fr) 230px}.preview-only{grid-template-columns:1fr}}
@media(max-width:780px){.editor{grid-template-columns:1fr 1fr}.editor.preview-only{grid-template-columns:1fr}.editor .sidebar,.editor .inspector{height:auto;overflow:visible}}
@media(max-width:480px){.editor{grid-template-columns:1fr}.editor-tools{gap:.35rem}.editor-tools button,.editor-tools .btn{padding:.5rem .55rem;font-size:.82rem}}