:root{
  --bg:#080c15;--panel:#111827;--panel2:#162033;--border:#26334a;--text:#f4f7fb;
  --muted:#9eabc0;--accent:#63a2ff;--accent2:#8bc1ff;--paper:#f1f0eb;--radius:20px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,#162137 0,#0a0f1a 36%,#070b12 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}.wrap{width:min(1480px,calc(100% - 28px));margin:auto}.topbar{position:sticky;top:0;z-index:30;background:rgba(8,12,21,.84);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}.topbar-inner{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{color:#fff;text-decoration:none;font-weight:800;font-size:19px}.brand span{color:var(--accent2)}.top-actions{display:flex;gap:8px}.intro{padding:30px 0 22px}.intro>div{max-width:900px}.kicker,.mini-label{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--accent2)}h1{font-size:clamp(34px,5vw,58px);line-height:1;margin:8px 0 14px}.intro p{color:var(--muted);font-size:17px;line-height:1.65;margin:0}.editor{display:grid;grid-template-columns:270px minmax(0,1fr)370px;gap:16px;align-items:start}.panel{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.085);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.28)}.sidebar,.controls-panel{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}.panel-block,.controls-panel{padding:16px}.panel-block+.panel-block{border-top:1px solid rgba(255,255,255,.06)}.block-head,.adjust-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.block-head h2,.control-title h2{font-size:18px;margin:5px 0 0}.sex-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.sex-tab,.small-btn,.canvas-toolbar button,.variant-nav button,.ghost-btn{border:1px solid var(--border);background:#0c1422;color:#eaf1fb;border-radius:12px;padding:9px 11px}.sex-tab.active{background:rgba(99,162,255,.15);border-color:var(--accent);color:#fff}.category-list{display:grid;gap:7px}.category-btn{width:100%;display:grid;grid-template-columns:1fr auto;gap:10px;text-align:left;padding:11px 12px;background:var(--panel2);color:#fff;border:1px solid transparent;border-radius:14px}.category-btn.active{border-color:var(--accent);background:rgba(99,162,255,.12)}.category-btn small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.category-btn .count{color:#cde0ff;font-weight:700}.canvas-panel{padding:16px}.canvas-toolbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}.canvas-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.stage-shell{display:flex;justify-content:center}.stage{position:relative;width:min(100%,760px);aspect-ratio:1/1;background:#e8e6df;border-radius:24px;overflow:hidden;border:1px solid rgba(0,0,0,.1);box-shadow:0 28px 70px rgba(0,0,0,.32)}.paper{position:absolute;inset:0;background:linear-gradient(135deg,#f5f4ef,#ebe9e2 60%,#e3e0d8)}.stage-layers{position:absolute;inset:0}.stage-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;pointer-events:none;user-select:none}.status-line{margin-top:14px;color:var(--muted);line-height:1.55;font-size:14px}.export-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.primary-btn{border:none;background:linear-gradient(180deg,#68a7ff,#4b8ef4);color:#fff;border-radius:13px;padding:11px 16px;font-weight:700}.ghost-btn{padding:10px 14px}.controls-panel{padding:16px}.control-title{margin-bottom:12px}.muted{color:var(--muted);line-height:1.45}.variant-nav{display:grid;grid-template-columns:48px 1fr 48px;gap:9px;align-items:stretch}.current-preview{min-height:130px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;overflow:hidden}.current-preview img{max-width:100%;max-height:120px;object-fit:contain}.variant-nav button{font-size:22px}.variant-meta{display:flex;justify-content:space-between;gap:12px;margin:10px 0 12px}.variant-meta span{color:var(--muted)}.variant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:330px;overflow:auto;padding-right:2px}.variant-item{border:1px solid rgba(255,255,255,.08);background:#0e1624;color:#fff;border-radius:13px;padding:7px;min-height:112px;display:grid;gap:6px}.variant-item.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(99,162,255,.13) inset}.variant-item img{width:100%;height:68px;object-fit:contain}.variant-item span{font-size:11px;color:var(--muted);line-height:1.25}.variant-item.none{place-items:center;min-height:80px}.adjustments{margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.07)}.adjustments h3{font-size:15px;margin:0}.adjustments label{display:grid;gap:6px;margin-top:11px}.adjustments label>div{display:grid;grid-template-columns:1fr 52px;gap:10px;align-items:center}.adjustments output{text-align:right;color:var(--muted);font-size:13px}input[type=range]{width:100%}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:24px 0 34px}.notes article{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:16px;padding:18px}.notes h2{font-size:17px;margin:0 0 8px}.notes p{color:var(--muted);line-height:1.55;margin:0}.footer{border-top:1px solid rgba(255,255,255,.06);padding:24px 0;color:var(--muted);margin-top:8px}
button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:1200px){.editor{grid-template-columns:1fr}.sidebar,.controls-panel{position:static;max-height:none}.category-list{grid-template-columns:repeat(2,1fr)}.sidebar{display:grid;grid-template-columns:280px 1fr}.panel-block+.panel-block{border-top:0;border-left:1px solid rgba(255,255,255,.06)}}
@media(max-width:760px){.wrap{width:min(100% - 18px,1480px)}.sidebar{display:block}.panel-block+.panel-block{border-left:0;border-top:1px solid rgba(255,255,255,.06)}.category-list,.variant-grid{grid-template-columns:repeat(2,1fr)}.notes{grid-template-columns:1fr}.topbar-inner{min-height:62px}.canvas-panel,.controls-panel,.panel-block{padding:12px}.export-row button{flex:1}.intro{padding-top:22px}}

/* Content hubs */
.topic-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.topic-nav a{color:#dce9ff;text-decoration:none;border:1px solid var(--border);background:rgba(15,24,39,.72);border-radius:999px;padding:8px 12px;font-size:14px}.topic-nav a:hover{border-color:var(--accent);color:#fff}.content-hubs{padding:6px 0 38px}.content-section{scroll-margin-top:86px;border-top:1px solid rgba(255,255,255,.07);padding:38px 0}.section-heading{max-width:880px;margin-bottom:20px}.section-heading h2,.split-section h2{font-size:clamp(25px,3vw,36px);line-height:1.12;margin:7px 0 11px}.section-heading p,.split-section p{color:var(--muted);line-height:1.72;font-size:16px;margin:0}.split-section{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:28px;align-items:start}.split-section>div>p+p{margin-top:13px}.steps-grid{list-style:none;counter-reset:steps;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.steps-grid li{counter-increment:steps;position:relative;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:18px 18px 18px 54px;min-height:150px}.steps-grid li:before{content:counter(steps);position:absolute;left:16px;top:17px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(99,162,255,.16);border:1px solid rgba(99,162,255,.45);color:#dbeaff;font-weight:800;font-size:13px}.steps-grid strong{display:block;margin-bottom:7px}.steps-grid span{display:block;color:var(--muted);line-height:1.55;font-size:14px}.check-card,.dual-cards article,.feature-grid article,.comparison-grid article{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.075);border-radius:17px;padding:19px}.check-card h3,.dual-cards h3,.feature-grid h3,.comparison-grid h3{margin:0 0 10px;font-size:17px}.check-card ul,.comparison-grid ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.65}.dual-cards,.comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.dual-cards p,.feature-grid p{color:var(--muted);line-height:1.62;margin:0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tips-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tips-list p{margin:0;padding:17px 18px;border-left:2px solid rgba(99,162,255,.55);background:rgba(255,255,255,.02);border-radius:0 14px 14px 0;color:var(--muted);line-height:1.62}.tips-list strong{color:#f4f7fb}.faq-list{display:grid;gap:9px;max-width:980px}.faq-list details{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:14px;padding:0 16px}.faq-list summary{cursor:pointer;list-style:none;font-weight:700;padding:15px 28px 15px 0;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:0;top:12px;color:var(--accent2);font-size:22px;font-weight:400}.faq-list details[open] summary:after{content:'−'}.faq-list p{color:var(--muted);line-height:1.65;margin:0;padding:0 0 16px}.compare-section .section-heading{max-width:920px}
@media(max-width:1050px){.steps-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topic-nav{gap:6px}.topic-nav a{font-size:12px;padding:7px 9px}.content-section{padding:30px 0}.split-section,.dual-cards,.comparison-grid,.tips-list{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.steps-grid li{min-height:0}.section-heading h2,.split-section h2{font-size:27px}}


/* SEO/audit v6: concise HTML-first intent blocks */
.intent-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.intent-badges span{border:1px solid #273653;background:#111a2b;color:#bdd4f5;border-radius:999px;padding:7px 11px;font-size:13px}
.demo-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:28px;align-items:center}
.demo-figure{margin:0;background:#f0eee7;border-radius:18px;overflow:hidden;border:1px solid #273653}
.demo-figure img{display:block;width:100%;height:auto}
.demo-figure figcaption{padding:10px 14px;color:#9fb3cf;font-size:13px;background:#111827}
.web-app-section{align-items:start}
@media(max-width:760px){.demo-section{grid-template-columns:1fr}.demo-figure{max-width:420px}}


/* Render-completeness audit v7 */
.static-stage-preview{object-fit:contain}
.editor-text-equivalent{margin:7px 0 0;color:#8fa4c2;line-height:1.55;font-size:13px}
.noscript-note{margin:18px auto 8px;padding:18px 20px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025)}
.noscript-note h2{font-size:18px;margin:0 0 7px}.noscript-note p{margin:0;color:var(--muted);line-height:1.6}



/* Mobile editor UX v11: portrait first, category grid, bottom-sheet editor */
.mobile-only,.mobile-actionbar,.mobile-controls-backdrop{display:none}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-bottom:66px}
  body.mobile-sheet-open{overflow:hidden}

  .topbar{position:static}
  .topbar .top-actions{display:none}
  .topbar-inner{min-height:48px}
  .brand{font-size:15px}
  .intro{padding:12px 0 10px}
  .intro .kicker{font-size:11px}
  .intro h1{font-size:clamp(25px,8vw,34px);margin:6px 0 7px}
  .intro p{font-size:14px;line-height:1.48;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .intent-badges,.topic-nav{display:none}

  .editor{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:100%;
    padding-inline:10px;
  }
  .canvas-panel{order:1;position:static;padding:8px;border-radius:18px;box-shadow:none}
  .sidebar{order:2}
  .controls-panel{order:3}

  .canvas-toolbar,.canvas-panel .status-line,.canvas-panel .editor-text-equivalent,.canvas-panel .export-row{display:none}
  .stage-shell{margin:0}
  .stage{
    width:min(94vw,430px);
    max-width:100%;
    margin-inline:auto;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
  }

  .sidebar{
    display:block;
    width:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:16px;
  }
  .sidebar .panel-block{padding:10px}
  .sidebar .panel-block:first-child .block-head{display:none}
  .sex-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sex-tab{min-width:0;padding:9px 5px;font-size:13px}

  .sidebar .grow .block-head{
    display:flex;
    margin:2px 0 9px;
    align-items:center;
  }
  .sidebar .grow .block-head .mini-label{display:none}
  .sidebar .grow .block-head h2{font-size:15px;margin:0}
  #randomBtn{display:none}

  /* No horizontal category scroller: everything stays inside viewport. */
  .category-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    width:100%;
    max-width:100%;
    overflow:visible;
    padding:0;
  }
  .category-btn{
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:7px 7px;
    border-radius:10px;
    overflow:hidden;
    text-align:left;
  }
  .category-btn>span:first-child{
    min-width:0;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.1;
    font-size:11px;
  }
  .category-btn small,.category-btn .count{display:none}

  /* Controls become a bottom sheet and no longer occupy page flow on mobile. */
  .controls-panel{
    position:fixed;
    z-index:91;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    height:min(52dvh,470px);
    max-height:min(52dvh,470px);
    margin:0;
    padding:10px 10px 12px;
    border-radius:20px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    transform:translateY(calc(100% + 24px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease,opacity .18s ease,visibility 0s linear .22s;
    box-shadow:0 24px 70px rgba(0,0,0,.55);
  }
  .controls-panel.mobile-sheet-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:transform .22s ease,opacity .18s ease;
  }
  .mobile-controls-backdrop{
    display:block;
    position:fixed;
    z-index:90;
    inset:0;
    background:rgba(2,7,14,.62);
    backdrop-filter:blur(2px);
  }
  .mobile-controls-backdrop[hidden]{display:none}

  .control-title{
    position:relative;
    padding-right:42px;
    margin:0 0 8px;
  }
  .control-title .mini-label{display:block;font-size:10px}
  .control-title .muted{font-size:12px;line-height:1.35;margin-top:3px}
  .control-title h2{font-size:20px;margin:2px 0 0}
  .mobile-only{display:inline-flex}
  .mobile-controls-close{
    position:absolute;
    top:-3px;
    right:0;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:26px;
    line-height:1;
    padding:0;
  }

  .variant-nav{grid-template-columns:52px 1fr 52px;gap:7px;margin-top:6px}
  .current-preview{height:72px;min-height:72px}
  .current-preview img{width:72px;height:72px;object-fit:contain}
  .variant-nav button{min-height:48px;padding:7px;font-size:22px;border-radius:12px}
  .variant-meta{justify-content:center;align-items:center;gap:8px;margin:6px 0 8px;font-size:13px}
  .variant-meta strong{font-size:14px}
  .variant-meta span{font-size:12px}

  .variant-grid{
    display:flex;
    gap:7px;
    overflow-x:auto;
    max-height:none;
    padding:0 0 7px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .variant-grid::-webkit-scrollbar{display:none}
  .variant-item{
    flex:0 0 72px;
    min-height:80px;
    padding:5px;
    scroll-snap-align:start;
  }
  .variant-item img{height:48px}
  .variant-item span{font-size:10px}
  .variant-item.none{min-height:80px}

  .adjustments{margin-top:8px;padding-top:8px}
  .adjust-head{margin-bottom:2px;justify-content:flex-start;flex-wrap:wrap}
  .adjustments h3{font-size:14px}
  #resetLayerBtn{font-size:11px;padding:7px 9px}
  #mobileAdvancedBtn{margin-left:auto;font-size:11px;padding:7px 9px}
  .adjustments label{margin-top:8px}
  .adjustments label>span{font-size:12px}
  .adjustments label>div{grid-template-columns:1fr 48px;gap:7px}
  .adjustments output{font-size:11px}
  .mobile-advanced-adjust{display:none!important}
  .adjustments.mobile-advanced-open .mobile-advanced-adjust{display:grid!important}
  input[type=range]{min-height:30px;touch-action:pan-x}

  .mobile-actionbar{
    position:fixed;
    z-index:80;
    left:0;right:0;bottom:0;
    display:grid;
    grid-template-columns:48px 48px 1fr 1.15fr;
    gap:7px;
    padding:7px max(9px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));
    background:rgba(7,12,21,.97);
    border-top:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    box-shadow:0 -10px 28px rgba(0,0,0,.25);
  }
  body.mobile-sheet-open .mobile-actionbar{visibility:hidden}
  .mobile-actionbar button{min-height:44px;border:1px solid var(--border);background:#0c1422;color:#eef5ff;border-radius:11px;font-weight:700;font-size:13px}
  .mobile-actionbar button:first-child,.mobile-actionbar button:nth-child(2){font-size:20px}
  .mobile-actionbar .mobile-primary{border-color:#5a9cf8;background:linear-gradient(180deg,#68a7ff,#4b8ef4);color:#fff}

  .content-hubs{padding-top:16px}
}

@media(max-width:390px){
  .category-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-btn{font-size:10px;padding:6px 5px;min-height:38px}
  .mobile-actionbar{grid-template-columns:44px 44px .9fr 1.1fr}
  .mobile-actionbar button{font-size:12px}
}

/* Asset loading resilience v10 */
.variant-item.asset-load-error{outline:1px dashed #d87b7b;opacity:.72}
.variant-item img.asset-load-error,.stage-layer.asset-load-error{opacity:.22}


/* Mobile UX v12: half-screen editor sheet + compact categories */
@media(max-width:760px){
  .category-list{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .category-btn{
    min-width:0!important;
    min-height:40px!important;
    padding:7px 6px!important;
    border-radius:10px!important;
  }
  .category-btn>span:first-child{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:11px!important;
  }
  .controls-panel{
    height:min(52dvh,470px)!important;
    max-height:min(52dvh,470px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}
@media(max-width:390px){
  .category-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .category-btn{min-height:38px!important;padding:6px 4px!important}
  .category-btn>span:first-child{font-size:10px!important}
}


/* Mobile UX v13: force half-sheet to the bottom half of viewport */
@media(max-width:760px){
  .controls-panel{
    position:fixed!important;
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:50dvh!important;
    max-height:50dvh!important;
    margin:0!important;
    border-radius:20px 20px 0 0!important;
    transform:translate3d(0,100%,0)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(14px + env(safe-area-inset-bottom))!important;
  }
  .controls-panel.mobile-sheet-open{
    transform:translate3d(0,0,0)!important;
  }
  .mobile-controls-backdrop{
    position:fixed!important;
    inset:0!important;
  }
}


/* Mobile UX v14: keep portrait area fully clear; shade only lower half */
@media(max-width:760px){
  .mobile-controls-backdrop{
    position:fixed!important;
    top:50dvh!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    height:50dvh!important;
    background:rgba(2,7,14,.48)!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    pointer-events:auto!important;
  }
}