:root{--bg:#f5f6f8;--surface:#fff;--surface-2:#eef0f4;--text:#161a22;--muted:#5b6475;--border:#d7dbe3;--accent:#0f6e64;--accent-contrast:#fff;--accent-soft:#dff2ef;--left:#2f6fd6;--right:#d8742a;--center:#7a4fc9;--danger:#b42318;--danger-soft:#fdecea;--ok:#1f7a3c;--warn:#8a5a00;--focus:#1a73e8;--workspace:#1a1f2b;--workspace-grid:#262d3c;--radius:10px;--shadow:0 1px 2px #1018280f, 0 1px 3px #10182814;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#0f1218;--surface:#171b23;--surface-2:#1e232d;--text:#e8ebf0;--muted:#9aa3b2;--border:#2c3340;--accent:#3fc1ad;--accent-contrast:#062520;--accent-soft:#123430;--left:#6aa0ff;--right:#ffa15c;--center:#b394ff;--danger:#ff7b6e;--danger-soft:#3a1714;--ok:#5fd38a;--warn:#f0c060;--focus:#8ab4ff;--workspace:#0b0e14;--workspace-grid:#1a2030;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0}body{font-size:15px;line-height:1.45}a{color:var(--accent)}code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}h1,h2,h3{margin:0;line-height:1.2}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.skip-link{z-index:100;background:var(--surface);border-radius:6px;padding:8px 12px;position:absolute;top:8px;left:-9999px}.skip-link:focus{left:8px}.sr-only,.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.muted{color:var(--muted)}.small{font-size:.86em}.hint{color:var(--muted);margin:6px 0 0;font-size:.86em}.error-text,.field-error{color:var(--danger);margin:4px 0 0;font-size:.86em}.warn-text{color:var(--warn);margin:6px 0 0;font-size:.86em}.ok-text{color:var(--ok);margin:0}.stack-sm>*+*{margin-top:8px}.inline{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:8px;min-height:40px;padding:8px 14px;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn-primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}.btn-ghost{background:0 0}.btn-small{min-height:32px;padding:5px 10px;font-size:.9em}.btn-lg{padding:12px 20px;font-size:1.05em}.google-btn{color:#1f1f1f;background:#fff;border-color:#747775}.google-btn:hover:not(:disabled){filter:none;background:#f2f2f2}.notice{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;margin:10px 0;padding:10px 12px}.notice p{margin:0}.notice p+p,.notice p+.inline{margin-top:8px}.notice-error{border-color:var(--danger);background:var(--danger-soft)}.notice-ok{border-color:var(--ok)}.brand-mark{gap:3px;display:inline-flex}.brand-mark span{background:linear-gradient(135deg, var(--left), var(--accent));border-radius:3px;width:26px;height:18px;display:block}.brand-mark span+span{background:linear-gradient(135deg, var(--accent), var(--right))}.brand-mark-lg{gap:4px}.brand-mark-lg span{border-radius:4px;width:30px;height:21px}.brand-mark-sm span{width:16px;height:11px}.home{min-height:100vh}.hero{color:var(--text);background:radial-gradient(60% 45% at 50% 80%, color-mix(in srgb, var(--left) 16%, transparent), transparent 70%), radial-gradient(40% 40% at 85% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);border-bottom:1px solid var(--border);padding:0 16px 56px;position:relative;overflow:hidden}.home-nav{align-items:center;max-width:1160px;margin:0 auto;padding:20px 0;display:flex}.home-brand{letter-spacing:.01em;align-items:center;gap:12px;font-size:1.35rem;font-weight:800;display:inline-flex}.hero-copy{text-align:center;max-width:760px;margin:24px auto 0}.eyebrow{border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);background:var(--accent-soft);color:var(--accent);letter-spacing:clamp(.03em,.6vw,.08em);text-wrap:balance;text-transform:uppercase;border-radius:999px;max-width:100%;margin:0 0 18px;padding:7px clamp(12px,3vw,18px);font-size:clamp(.78rem,3vw,1.05rem);font-weight:700;line-height:1.35;display:inline-block}.hero h1{letter-spacing:-.025em;text-wrap:balance;font-size:clamp(2.1rem,5.4vw,3.9rem);font-weight:800;line-height:1.05}.hero-accent{background:linear-gradient(90deg, var(--left), var(--accent));color:#0000;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-background-clip:text;background-clip:text;margin-right:-.08em;padding-right:.08em}.hero-lede{max-width:600px;color:var(--muted);text-wrap:pretty;margin:20px auto 0;font-size:clamp(1rem,1.6vw,1.15rem)}.hero-cta{justify-items:center;gap:4px;max-width:440px;margin:28px auto 0;display:grid}.hero-cta .notice{text-align:left;width:100%;margin:0 0 12px}.hero-fine{color:var(--muted);margin:10px 0 0;font-size:.86rem}.showcase{max-width:1160px;margin:48px auto 0}.desk{justify-content:center;align-items:flex-start;gap:.6%;display:flex}.monitor{width:49.7%;box-shadow:inset 0 0 0 1px #ffffff12, 0 28px 50px -22px #1018288c, 0 0 70px -20px color-mix(in srgb, var(--left) 45%, transparent);background:linear-gradient(#1b1f29,#0d1017);border-radius:clamp(6px,1.1vw,14px);padding:1.145% 1.145% 1.9%;position:relative}.screen{aspect-ratio:16/10;background:#000;border-radius:2px;overflow:hidden}.screen img{object-fit:cover;width:100%;height:100%;display:block}.stand{background:linear-gradient(90deg,#2a303c,#4a5263 50%,#2a303c);width:12%;height:clamp(18px,4.2vw,52px);position:absolute;top:100%;left:50%;transform:translate(-50%)}.stand:after{content:"";background:linear-gradient(90deg,#2a303c,#565f72 50%,#2a303c);border-radius:999px;width:300%;height:clamp(4px,.7vw,9px);position:absolute;bottom:0;left:50%;transform:translate(-50%,100%)}.showcase figcaption{text-align:center;max-width:560px;color:var(--muted);margin:clamp(40px,7vw,84px) auto 0;font-size:.86rem}.home-section{max-width:1160px;margin:0 auto;padding:64px 16px}.home-section h2{letter-spacing:-.015em;text-align:center;margin-bottom:32px;font-size:clamp(1.5rem,3vw,2rem)}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.feature-grid li{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:22px}.feature-grid h3{margin:14px 0 6px;font-size:1.05rem}.feature-grid p{color:var(--muted);margin:0}.feature-num{background:var(--accent-soft);width:32px;height:32px;color:var(--accent);border-radius:50%;place-items:center;font-weight:800;display:inline-grid}.home-footer{border-top:1px solid var(--border);text-align:center;color:var(--muted);padding:24px 16px 40px;font-size:.86rem}.home-footer p{max-width:640px;margin:0 auto}.maker-note{max-width:560px;color:var(--muted);text-wrap:balance;margin:0 auto 20px;font-size:.95rem;font-style:italic}@media (max-width:520px){.hero{padding-bottom:40px}.showcase{margin-top:40px}}.topbar{z-index:20;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0}.topbar-inner{justify-content:space-between;align-items:center;gap:12px;max-width:1440px;margin:0 auto;padding:8px 16px;display:flex}.brand{align-items:center;gap:10px;font-weight:700;display:flex}.account{align-items:center;gap:8px;min-width:0;display:flex}.account-name{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:40vw;overflow:hidden}.editor{max-width:1440px;margin:0 auto;padding:16px}.editor-loading{text-align:center;color:var(--muted);padding:48px}.steps ol{flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none;display:flex}.steps a{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 6px;font-size:.92em;font-weight:600;text-decoration:none;display:inline-flex}.step-num{background:var(--surface-2);border-radius:999px;place-items:center;width:24px;height:24px;font-size:.85em;display:inline-grid}.steps li.done .step-num{background:var(--accent);color:var(--accent-contrast)}.steps li.current a{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.editor-grid{grid-template-columns:minmax(360px,480px) minmax(0,1fr);align-items:start;gap:16px 24px;display:grid}.editor-grid>.step{grid-column:1}.preview-aside{grid-area:1/2/span 5;align-self:stretch}.preview-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;position:sticky;top:64px}.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;scroll-margin-top:70px}.step h2{align-items:center;gap:10px;margin-bottom:10px;font-size:1.1rem;display:flex}.step-badge{background:var(--accent-soft);width:26px;height:26px;color:var(--accent);border-radius:999px;place-items:center;font-size:.85em;display:inline-grid}@media (max-width:1000px){.editor-grid{grid-template-columns:minmax(0,1fr)}.editor-grid>.step,.preview-aside{grid-area:auto/1}.preview-inner{position:static}}.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px;display:grid}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:0;padding:12px}fieldset.card{margin:0}.card-title,fieldset.card>legend{align-items:center;gap:8px;margin-bottom:8px;font-size:.98rem;font-weight:700;display:flex}fieldset.card>legend{padding:0 4px}.monitor-card-left,.position-left,.export-left{border-top:3px solid var(--left)}.monitor-card-center,.position-center,.export-center{border-top:3px solid var(--center)}.monitor-card-right,.position-right,.export-right{border-top:3px solid var(--right)}.swatch{border-radius:3px;width:12px;height:12px;display:inline-block}.swatch-left{background:var(--left)}.swatch-center{background:var(--center)}.swatch-right{background:var(--right)}.badge{background:var(--surface-2);color:var(--muted);border-radius:999px;padding:2px 6px;font-size:.72em;font-weight:600}.field-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.field{flex-direction:column;gap:4px;min-width:0;display:flex}.field label,.diag-row label{font-size:.86em;font-weight:600}.unit{color:var(--muted);font-weight:400}input[type=text]{width:100%;font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:7px;min-height:38px;padding:7px 9px}input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}input[type=range]{width:100%;accent-color:var(--accent)}fieldset.physical{border:1px dashed var(--border);border-radius:8px;margin:12px 0 0;padding:8px 10px 10px}fieldset.physical legend{padding:0 4px;font-size:.86em;font-weight:700}.diag-row{margin-top:8px}.diag-row .inline input{max-width:90px}.mode-toggle{border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;align-items:stretch;gap:0;display:inline-flex;overflow:hidden}.seg{cursor:pointer;background:var(--surface);align-items:center;padding:6px 12px;font-size:.9em;font-weight:600;display:inline-flex;position:relative}.seg+.seg{border-left:1px solid var(--border)}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg.on{background:var(--accent);color:var(--accent-contrast)}.seg.disabled{opacity:.5;cursor:not-allowed}.seg:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:-3px}.toolbar-label{color:var(--muted);align-self:center;padding:6px 8px;font-size:.86em}.check{align-items:center;gap:6px;font-size:.9em;font-weight:600;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--accent)}.workspace-toolbar{flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:10px;display:flex}.workspace-wrap{width:100%}.workspace{background-color:var(--workspace);background-image:linear-gradient(var(--workspace-grid) 1px, transparent 1px), linear-gradient(90deg, var(--workspace-grid) 1px, transparent 1px);touch-action:none;-webkit-user-select:none;user-select:none;background-size:24px 24px;border-radius:8px;width:100%;position:relative;overflow:hidden}.workspace-canvas,.workspace-svg{display:block;position:absolute;top:0;left:0}.workspace-svg{overflow:visible}.mode-image .workspace-svg{cursor:grab}.mode-image.dragging .workspace-svg{cursor:grabbing}.mode-image .monitor{pointer-events:none}.monitor{cursor:move;outline:none}.monitor-fill{fill:#ffffff0f}.monitor-fill[data-has-image="1"]{fill:#0000}.monitor-left .monitor-outline{stroke:var(--left)}.monitor-center .monitor-outline{stroke:var(--center)}.monitor-right .monitor-outline{stroke:var(--right)}.monitor-outline{fill:none;stroke-width:2px}.monitor.is-focused .monitor-outline,.monitor:focus-visible .monitor-outline{stroke:var(--focus);stroke-width:4px;stroke-dasharray:6 3}.monitor.is-overlap .monitor-outline{stroke:#ff5a4e}.monitor-tag{fill:#0000009e}.monitor-label{fill:#fff;font-weight:700}.monitor-meta{fill:#fff;paint-order:stroke;stroke:#000000b3;stroke-width:3px}.image-outline{fill:none;stroke:#ffffff73;stroke-dasharray:4 4;stroke-width:1px}.hatch-gap-line{stroke:#ffdc788c}.hatch-overlap-line{stroke:#ff463cd9}.gap-rect{stroke:#ffdc78cc;stroke-width:1px}.gap-label{fill:#ffe7a3;font-weight:600}.overlap-rect{stroke:#ff5a4e;stroke-width:2px;pointer-events:none}.origin line{stroke:#ffffff80;stroke-width:1px}.origin text{fill:#fff9}.workspace-caption{margin:8px 0 0}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);background:var(--surface-2);padding:16px}.dropzone.is-over{border-color:var(--accent);background:var(--accent-soft)}.dropzone p{margin:0 0 8px}.image-info p{overflow-wrap:anywhere;margin:0 0 6px}.framing>*+*{margin-top:12px}.export-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.export-card{flex-direction:column;gap:8px;display:flex}.export-card .btn{overflow-wrap:anywhere;text-align:center;justify-content:center}.export-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.export-head .card-title{margin:0}.dims{font-variant-numeric:tabular-nums;font-weight:700}.thumb{background:#000;border-radius:4px;width:100%;height:auto;display:block}.export-card p{margin:0}.apply{border-top:1px solid var(--border);margin-top:16px;padding-top:12px}.apply summary{cursor:pointer;font-weight:700}.apply ol{padding-left:20px}.apply li{margin:6px 0}.os-list dt{margin-top:8px;font-weight:700}.os-list dd{color:var(--muted);margin:2px 0 0;font-size:.92em}@media (max-width:520px){.field-row{grid-template-columns:1fr}.step{padding:12px}.editor{padding:10px}}.home-nav{flex-wrap:wrap;justify-content:space-between;gap:16px}.home-brand{color:var(--text);text-decoration:none}.home-links{flex-wrap:wrap;gap:20px;display:flex}.home-links a,.footer-links a{color:var(--muted);font-weight:600;text-decoration:none}.home-links a:hover,.footer-links a:hover{color:var(--text);text-decoration:underline}.footer-links{margin-bottom:12px}.home-intro{text-align:center;max-width:760px;padding-bottom:0}.home-intro p{color:var(--muted);margin:0;font-size:1.05rem}.home-intro h2,.home-faq h2{margin-bottom:16px}.section-more{text-align:center;color:var(--muted);margin:24px 0 0}.why-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 32px;margin:0;padding:0;list-style:none;display:grid}.why-grid h3{margin-bottom:6px;font-size:1.05rem}.why-grid p{color:var(--muted);margin:0}.home-why{padding-top:0}.home-faq{max-width:820px;padding-top:0}.faq-list{border-top:1px solid var(--border)}.faq-list details{border-bottom:1px solid var(--border)}.faq-list summary{cursor:pointer;padding:16px 0;list-style-position:outside}.faq-list summary h3{font-size:1.02rem;display:inline}.faq-list details p{color:var(--muted);margin:0 0 16px}.doc-nav{padding:20px 16px}.doc{max-width:760px;margin:0 auto;padding:8px 16px 64px}.doc h1{letter-spacing:-.02em;text-wrap:balance;font-size:clamp(1.8rem,4.4vw,2.6rem)}.doc h2{margin:36px 0 10px;font-size:1.35rem}.doc h3{margin:20px 0 6px;font-size:1.05rem}.doc p,.doc li{line-height:1.6}.doc li{margin:6px 0}.doc-meta{color:var(--muted);margin:10px 0 0;font-size:.9rem}.doc-lede{font-size:1.1rem}.doc-tip{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;padding:10px 14px}.doc-cta{text-align:center;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;margin-top:48px;padding:28px}.doc-cta h2{margin:0 0 6px}.doc-cta .btn{margin-top:8px;text-decoration:none}.breadcrumb ol{color:var(--muted);flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;font-size:.9rem;list-style:none;display:flex}.breadcrumb li+li:before{content:"›";margin-right:6px}.count-toggle{flex-wrap:wrap;align-items:center;gap:0;margin-top:12px;display:flex}.count-toggle .toolbar-label{margin-right:8px}.count-toggle .seg{border:1px solid var(--border)}.count-toggle .seg:first-of-type{border-radius:8px 0 0 8px}.count-toggle .seg:last-of-type{border-left:0;border-radius:0 8px 8px 0}.card-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.orientation-toggle{flex-wrap:nowrap;width:100%;margin:10px 0 4px;display:flex}.orientation-toggle .seg{white-space:nowrap;flex:1 1 0;justify-content:center;align-items:center;gap:5px;padding:5px 6px;font-size:.82em}.orient-icon{border:2px solid;border-radius:2px;display:inline-block}.orient-landscape{width:16px;height:11px}.orient-portrait{width:11px;height:16px}.add-monitor{width:100%;color:var(--muted);border-style:dashed;justify-content:center;margin-top:12px}.add-monitor:hover:not(:disabled){color:var(--text)}.export-grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.showcase .monitor{cursor:default}.showcase-toggle{border:1px solid var(--border);background:var(--surface);width:max-content;box-shadow:var(--shadow);border-radius:999px;justify-content:center;margin:0 auto 24px;display:flex;overflow:hidden}.showcase-toggle .seg{padding:7px 16px}.showcase-toggle .seg+.seg{border-left:1px solid var(--border)}.desk-3{align-items:center;gap:.4%;padding-bottom:3%;container-type:inline-size}.desk-3 .monitor{border-radius:clamp(5px,.9vw,12px);padding:.8% .8% 1.3%}.desk-3 .monitor-landscape{width:37.562%}.desk-3 .monitor-portrait{width:24.076%}.desk-3 .monitor-portrait .screen{aspect-ratio:10/16}.desk-3 .stand{width:4.5cqw;height:3.2cqw}.desk-3 .monitor-landscape .stand{height:9.943cqw}.desk-3 .stand:after{width:300%;height:.7cqw}