:root{color-scheme:light;--paper:#edf4fb;--paper-2:#e2edf8;--film:#ffffffa8;--film-strong:#ffffffdb;--film-edge:#123f7329;--grid-minor:#1e5faa11;--grid-major:#1e5faa1f;--ink:#123f73;--ink-2:#2f6fb4;--ink-3:#8fb0d6;--ink-4:#c7d9ee;--navy:#0a2647;--accent:#1d63c9;--accent-2:#2f80ed;--text:#0f2a48;--text-2:#3e5a7a;--text-3:#6b84a1;--line-green:#06c755;--amber:#b45309;--radius:4px;--shadow:0 1px 0 #0a26470a, 0 12px 32px -18px #0a264759;--font:"IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--wrap:1180px}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font);color:var(--text);background-color:var(--paper);background-image:linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);background-position:-1px -1px;background-size:120px 120px,120px 120px,24px 24px,24px 24px;margin:0;font-size:16px;line-height:1.65;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .25 0 0 0 0 .45 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}main,header,footer{z-index:1;position:relative}a{color:var(--accent);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}img,svg{max-width:100%}h1,h2,h3{color:var(--navy);letter-spacing:-.01em;margin:0;line-height:1.25}p{margin:0}.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}@media (width<=640px){.wrap{padding:0 16px}}.mono{font-family:var(--mono)}.eyebrow{font-family:var(--font);letter-spacing:.02em;color:var(--ink-2);align-items:center;gap:10px;font-size:13.5px;font-weight:500;display:inline-flex}.eyebrow:before{content:"";background:currentColor;width:28px;height:1px}.film{background:var(--film);border:1px solid var(--film-edge);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px)saturate(1.1);position:relative}.crop{position:relative}.crop:before,.crop:after{content:"";border:1.5px solid var(--ink-2);pointer-events:none;width:14px;height:14px;position:absolute}.crop:before{border-bottom:0;border-right:0;top:-7px;left:-7px}.crop:after{border-top:0;border-left:0;bottom:-7px;right:-7px}.btn{border-radius:var(--radius);font:600 15px/1.2 var(--font);border:1.5px solid var(--navy);cursor:pointer;white-space:nowrap;justify-content:center;align-items:center;gap:10px;padding:12px 20px;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex;text-decoration:none!important}.btn:hover{box-shadow:3px 3px 0 var(--ink-3);transform:translateY(-1px)}.btn-primary{background:var(--navy);color:#fff}.btn-ghost{background:var(--film-strong);color:var(--navy)}.btn-line{background:var(--line-green);color:#fff;border-color:#04a447}.btn-line:hover{box-shadow:3px 3px #04a44759}.btn svg{flex:none}.chip{font:500 12px/1 var(--mono);letter-spacing:.04em;border:1px solid var(--ink-3);color:var(--ink);background:var(--film-strong);border-radius:2px;align-items:center;gap:6px;padding:6px 9px;display:inline-flex}.chip-navy{background:var(--navy);color:#fff;border-color:var(--navy)}.chip-src{font-family:var(--font);letter-spacing:0;font-size:12.5px}.chip-src.own{border-color:var(--accent);color:var(--accent)}.chip-src.partner{color:#4c3fb0;border-color:#6a5acd}.chip-demo{color:var(--amber);font-family:var(--font);letter-spacing:0;background:#fff7ed;border-color:#e6a35a}.dwg{width:100%;height:auto;font-family:var(--mono);display:block;overflow:visible}.dwg .pad{fill:#2f6fb40d;stroke:var(--ink-3);stroke-width:.8px;stroke-dasharray:3 3}.dwg .shadow{fill:#0a264717;stroke:none}.dwg .plinth-f{fill:#d4e3f3;stroke:var(--ink);stroke-width:1.1px}.dwg .plinth-s{fill:#bcd2ea;stroke:var(--ink);stroke-width:1.1px}.dwg .wall-f{fill:#f7fbff;stroke:var(--ink);stroke-width:1.3px;stroke-linejoin:round}.dwg .wall-s{fill:#dbe8f6;stroke:var(--ink);stroke-width:1.3px;stroke-linejoin:round}.dwg .roof-b{fill:#c9dcf0;stroke:var(--ink);stroke-width:1.1px;stroke-linejoin:round}.dwg .roof-f,.dwg .roof-s{stroke:var(--ink);stroke-width:1.3px;stroke-linejoin:round}.dwg .roof-e{stroke:var(--ink);stroke-width:1.3px}.dwg .hatch{stroke:var(--ink-2);stroke-width:.7px;opacity:.55}.dwg .fascia{fill:var(--navy);stroke:var(--navy);stroke-width:.6px}.dwg .glass{fill:#a9c8ea;stroke:var(--ink);stroke-width:1px}.dwg .glass-s{fill:#8fb5df;stroke:var(--ink);stroke-width:1px}.dwg .door{fill:#5f88b8;stroke:var(--ink);stroke-width:1px}.dwg .recess{fill:#b7cde6;stroke:var(--ink);stroke-width:1px}.dwg .post{fill:#f7fbff;stroke:var(--ink);stroke-width:1px}.dwg .sill{fill:var(--ink)}.dwg .ln{stroke:var(--ink);stroke-width:1.1px;fill:none}.dwg .ln-soft{stroke:var(--ink-2);stroke-width:.9px;stroke-dasharray:5 3}.dwg .ln-thin{stroke:var(--ink);stroke-width:.7px}.dwg .ln-x{stroke:var(--ink-3);stroke-width:.7px}.dwg .dim{stroke:var(--ink-2);stroke-width:.8px}.dwg .dim-t{fill:var(--ink);font-size:11px;font-family:var(--mono)}.dwg .lvl{fill:var(--ink)}.dwg .ground{stroke:var(--navy);stroke-width:2.2px}.dwg .earth{fill:#123f7314}.dwg .tree-c{fill:#2f6fb414;stroke:var(--ink-2);stroke-width:.9px}.dwg .tree-c2{fill:none;stroke:var(--ink-3);stroke-width:.7px}.dwg .room{fill:#ffffffb8;stroke:none}.dwg .porch{stroke:none}.dwg .porch-edge{fill:none;stroke:var(--ink-2);stroke-width:1px;stroke-dasharray:6 4}.dwg .wall{stroke:var(--navy);stroke-linecap:square}.dwg .col{fill:var(--navy)}.dwg .gap{fill:#fff;stroke:none}.dwg .win{fill:#fff;stroke:var(--ink);stroke-width:.8px}.dwg .leaf{stroke:var(--ink);stroke-width:1.6px}.dwg .swing{fill:none;stroke:var(--ink-2);stroke-width:.8px;stroke-dasharray:3 2}.dwg .entry{stroke:var(--accent);stroke-width:1.6px;fill:none}.dwg .axis{stroke:var(--ink-3);stroke-width:.6px;stroke-dasharray:10 3 2 3}.dwg .bubble{fill:var(--film-strong);stroke:var(--ink);stroke-width:1px}.dwg .bubble-t{fill:var(--ink);font-size:11px;font-weight:600;font-family:var(--mono)}.dwg .north-a{fill:var(--navy)}.dwg .rm-t{fill:var(--navy);font:600 13px var(--font)}.dwg .rm-a{fill:var(--ink-2);font:400 10.5px var(--mono)}.dwg .rm-t.sm{font-size:10.5px}.dwg .rm-a.sm{font-size:9px}.dwg .sb-b{fill:var(--navy)}.dwg .sb-w{fill:#fff;stroke:var(--navy);stroke-width:.8px}.sheet{padding:22px}.sheet-head{border-bottom:1px solid var(--ink-4);justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:10px;display:flex}.sheet-head h3{font-size:16px}.sheet-head .mono{color:var(--text-3);letter-spacing:.08em;font-size:11.5px}.tblock{border:1.5px solid var(--navy);background:var(--film-strong);grid-template-columns:repeat(4,minmax(0,1fr));font-size:13px;display:grid}.tblock>div{border-left:1px solid var(--ink-3);min-width:0;padding:7px 10px}.tblock>div:first-child{border-left:0}.tblock small{font:400 11px/1.3 var(--font);color:var(--text-3);display:block}.tblock b{color:var(--navy);white-space:nowrap;text-overflow:ellipsis;font-weight:600;display:block;overflow:hidden}@media (width<=560px){.tblock{grid-template-columns:repeat(2,minmax(0,1fr))}.tblock>div:nth-child(3){border-left:0}.tblock>div:nth-child(n+3){border-top:1px solid var(--ink-3)}}.demo-bar{z-index:2;color:#7c2d12;text-align:center;background:repeating-linear-gradient(-45deg,#fff7ed 0 14px,#ffedd5 14px 28px);border-bottom:1px solid #f3c48f;padding:7px 16px;font-size:13.5px;position:relative}.site-head{z-index:20;-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--film-edge);background:#edf4fbd1;position:sticky;top:0}.site-head .wrap{align-items:center;gap:24px;height:68px;display:flex}.brand{color:var(--navy);white-space:nowrap;align-items:center;gap:12px;display:flex;text-decoration:none!important}.lbl-short{display:none}@media (width<=560px){.lbl-full{display:none}.lbl-short{display:inline}.site-head .wrap{gap:12px;height:62px}.brand-mark{width:34px;height:34px}.brand-sub{letter-spacing:.14em}.demo-bar{font-size:12.5px}}.brand-mark{flex:none;width:40px;height:40px}.brand-name{font-size:17px;font-weight:700;line-height:1.1}.brand-sub{font:500 10px/1.2 var(--mono);letter-spacing:.2em;color:var(--ink-2)}.nav{align-items:center;gap:4px;margin-left:auto;display:flex}.nav a{color:var(--text-2);border-radius:3px;padding:8px 12px;font-size:14.5px}.nav a:hover{background:var(--film-strong);color:var(--navy);text-decoration:none}.nav .btn{margin-left:8px;padding:9px 14px;font-size:14px}.nav a.btn-line,.nav a.btn-line:hover{color:#fff;background:var(--line-green)}@media (width<=860px){.nav a:not(.btn){display:none}}.site-foot{border-top:1.5px solid var(--navy);background:#ffffff80;margin-top:96px}.site-foot .wrap{grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:40px;padding-bottom:40px;display:grid}.site-foot h4{font:600 13px var(--font);color:var(--ink-2);margin:0 0 12px}.site-foot ul{gap:6px;margin:0;padding:0;font-size:14.5px;list-style:none;display:grid}.site-foot p{color:var(--text-2);font-size:14.5px}.foot-bottom{border-top:1px solid var(--ink-4)}.foot-bottom .wrap{font:12px var(--mono);color:var(--text-3);grid-template-columns:none;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:18px;display:flex}@media (width<=760px){.site-foot .wrap{grid-template-columns:1fr}.foot-bottom .wrap{flex-direction:column}}.section{padding:88px 0 0}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px;display:flex}.section-head h2{margin-top:10px;font-size:clamp(26px,3.2vw,36px)}.section-head p{color:var(--text-2);max-width:560px;margin-top:10px}.plan-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;display:grid}.plan-card{color:inherit;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden;text-decoration:none!important}.plan-card:hover{transform:translateY(-3px);box-shadow:0 1px #0a26470a,0 22px 40px -20px #0a264773}.plan-card .art{border-bottom:1px solid var(--film-edge);background:linear-gradient(var(--grid-major) 1px, transparent 1px) -1px -1px / 40px 40px, linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) -1px -1px / 40px 40px, linear-gradient(180deg, #ffffff80, #e2edf899);place-items:center;height:240px;padding:18px 14px 6px;display:grid;position:relative}.plan-card .art .dwg{width:100%;height:100%}.plan-card .art .chips{flex-wrap:wrap;gap:6px;display:flex;position:absolute;top:12px;left:12px}.plan-card .art .code{position:absolute;top:12px;right:12px}.plan-card .body{flex-direction:column;flex:1;gap:8px;padding:16px 18px 18px;display:flex}.plan-card h3{font-size:18px}.plan-card .tag{color:var(--text-2);font-size:14px}.specs{border-top:1px dashed var(--ink-4);color:var(--text-2);flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:12px;font-size:13.5px;display:flex}.specs span{align-items:center;gap:6px;display:inline-flex}.specs svg{color:var(--ink-2)}.budget-tag{font:600 12px var(--mono);color:#fff;background:var(--accent);letter-spacing:.02em;border-radius:2px;padding:5px 8px}:focus-visible{outline:2.5px solid var(--accent-2);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.dwg .roof-base{fill:#e4eef9;stroke:none}.bp{--ink:#e3eefb;--ink-2:#a9c8ee;--ink-3:#5f8cc4;--ink-4:#a9c8ee40;--navy:#fff;--text:#eaf2fc;--text-2:#b9cfea;--text-3:#86a6cc;--film-strong:#ffffff0f;--film-edge:#a9c8ee47;color:var(--text);background-color:#0d2f5c;background-image:linear-gradient(#ffffff17 1px,#0000 1px),linear-gradient(90deg,#ffffff17 1px,#0000 1px),linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px),radial-gradient(1200px 500px at 20% 0,#1a4a86,#0000 70%);background-size:120px 120px,120px 120px,24px 24px,24px 24px,100% 100%;position:relative}.bp h2,.bp h3{color:#fff}.bp .dwg .room{fill:#ffffff08}.bp .dwg .gap,.bp .dwg .win,.bp .dwg .bubble{fill:#0f3463}.bp .dwg .col,.bp .dwg .north-a,.bp .dwg .sb-b{fill:#fff}.bp .dwg .sb-w{fill:#0f3463;stroke:#fff}.bp .dwg .wall{stroke:#fff}.bp .dwg .entry{stroke:#7fb6ff}.btn.is-off{border-color:var(--ink-3);color:var(--text-3);cursor:not-allowed;box-shadow:none;background:#e3ebf5}.btn.is-off:hover{box-shadow:none;transform:none}.nav .btn.is-off,.nav a.btn-line.is-off{color:var(--text-3);background:#e3ebf5}.dwg .deck-top{fill:#e9f1fa;stroke:var(--ink);stroke-width:1px}.dwg .plank{stroke:var(--ink-3);stroke-width:.5px}.dwg .tread{fill:#f3f8fd;stroke:var(--ink);stroke-width:.8px}.dwg .beam{fill:#f7fbff;stroke:var(--ink);stroke-width:1.1px}.dwg .beam-s{fill:#dbe8f6;stroke:var(--ink);stroke-width:1.1px}.dwg .gable-open{fill:#123f7324;stroke:var(--ink);stroke-width:1px}.dwg .roof-gl{fill:#deebf961;stroke:none}.dwg{--roof:#e0866b;--roof-b:#c9735c}.dwg .pad{fill:#78b27833;stroke:#7fb07f}.dwg .shadow{fill:#1e3c2824}.dwg .wall-f{fill:#fffaf0}.dwg .wall-s{fill:#efe3cf}.dwg .plinth-f{fill:#d9dee8}.dwg .plinth-s{fill:#bfc7d6}.dwg .roof-base{fill:var(--roof)}.dwg .roof-b{fill:var(--roof-b)}.dwg .roof-gl{fill:var(--roof);fill-opacity:.42}.dwg .hatch{stroke:#28140f61;opacity:1}.dwg .fascia{fill:#2b3445;stroke:#2b3445}.dwg .glass{fill:#8cc6f2}.dwg .glass-s{fill:#6aaee4}.dwg .door{fill:#b9824e}.dwg .recess{fill:#cdb89a}.dwg .deck-top{fill:#ecd2a8}.dwg .plank{stroke:#b99468}.dwg .tread{fill:#f1e2c6}.dwg .tree-c{fill:#56a56066;stroke:#4f9560}.dwg .tree-c2{stroke:#6fb07a}.dwg .person{fill:#3c5a8c99}.dwg .room.z-bed{fill:#dfe8fb}.dwg .room.z-wet{fill:#cfeef1}.dwg .room.z-kit{fill:#fde5c8}.dwg .room.z-live{fill:#f4efd3}.dwg .room.z-deck{fill:#eed9b6}.dwg .room.z-serv{fill:#d8ecd2}.dwg .room.z-circ{fill:#eaeaf3}.dwg .dot{fill:#966e3c73}.cover{object-fit:cover;width:100%;height:100%;display:block}.gallery{grid-template-columns:1fr 1fr;gap:10px;display:grid}.gallery img{border:1px solid var(--film-edge);border-radius:3px;width:100%;height:auto;display:block}.gallery img:first-child{grid-column:1/-1}.plan-card .art:has(.cover){padding:0;overflow:hidden}