:root{--bg:#fbf8f1;--surface:#fff;--soft:#f5efe2;--line:#ebe2cf;--text:#1f1a14;--muted:#6b6152;--gold:#a8741a;--gold-2:#8a5a12;--gold-soft:#f8eed4;--espresso:#1b1611;--cream:#fff4dc;--line-green:#06c755;--grad:linear-gradient(135deg, #d6a645 0%, #b07a1c 55%, #8a5a12 100%);--serif:"Fraunces", "Noto Serif Thai", Georgia, serif;--sans:"IBM Plex Sans Thai", system-ui, sans-serif;--ease:cubic-bezier(.2, .7, .2, 1);--panel:400px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--espresso);color:var(--text);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}.ic{flex:none;width:1.1em;height:1.1em}.shell{grid-template-columns:var(--panel) 1fr;height:100dvh;transition:grid-template-columns .35s var(--ease);grid-template-rows:auto 1fr;grid-template-areas:"top stage""panel stage";display:grid}.shell.folded{grid-template-columns:0 1fr}.top,.panel{overflow:hidden}.shell.folded .top,.shell.folded .panel{visibility:hidden;transition:visibility 0s .35s}.top{background:var(--bg);grid-area:top;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px 6px;display:flex}.brand{color:var(--text);font:600 1.15rem/1 var(--serif);align-items:center;gap:10px;text-decoration:none;display:flex}.brand em{color:var(--gold);font-style:normal}.wordmark{flex-direction:column;gap:4px;line-height:1;display:flex}.wordmark b{font-weight:600}.wordmark[data-l=th] b{font-family:var(--sans)}.wordmark small{font:500 .62em/1.1 var(--sans);letter-spacing:.02em;opacity:.72}.seg{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px;display:inline-flex}.seg button{color:var(--muted);background:0 0;border:0;border-radius:999px;align-items:center;gap:7px;padding:6px 13px;font-size:.88rem;font-weight:500;transition:background .2s,color .2s;display:inline-flex}.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #3c280a24}.seg.dark{background:#ffffff0f;border-color:#ffffff1a}.seg.dark button{color:#fff4dca6}.seg.dark button[aria-pressed=true]{background:var(--cream);color:var(--espresso)}.panel{background:var(--bg);border-right:1px solid #0003;flex-direction:column;grid-area:panel;min-width:0;min-height:0;display:flex}.intro{padding:14px 22px 4px}.intro h1{font:600 1.9rem/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 8px}.intro p{color:var(--muted);margin:0;font-size:.92rem}.tabs,.sheet-head,.fab,.hint{display:none}.top-end{align-items:center;gap:8px;display:flex}.groups{scrollbar-width:thin;flex:1;min-height:0;padding:4px 22px 18px;overflow-y:auto}.group{padding-top:20px}.group h2{font:600 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text);align-items:center;gap:10px;margin:0 0 12px;display:flex}.num{background:var(--espresso);width:22px;height:22px;color:var(--cream);letter-spacing:0;border-radius:50%;place-items:center;font-size:.72rem;display:grid}.cur{letter-spacing:0;text-transform:none;color:var(--gold-2);white-space:nowrap;text-overflow:ellipsis;max-width:55%;margin-left:auto;font-size:.85rem;font-weight:500;overflow:hidden}.biz-list{grid-template-columns:repeat(4,1fr);gap:10px 8px;display:grid}.biz{background:0 0;border:0;flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.biz-img{aspect-ratio:1;background:var(--soft);outline-offset:2px;width:100%;transition:outline-color .2s, transform .25s var(--ease);border-radius:18px;outline:2px solid #0000;overflow:hidden}.biz-img img{object-fit:cover;width:100%;height:100%;display:block}.biz:hover .biz-img{transform:translateY(-2px)}.biz.on .biz-img{outline-color:var(--gold)}.biz-name{color:var(--muted);text-align:center;font-size:.8rem;font-weight:500;line-height:1.25}.biz.on .biz-name{color:var(--text)}.design-list{grid-template-columns:1fr 1fr;gap:14px 12px;display:grid}.design{text-align:left;background:0 0;border:0;flex-direction:column;gap:3px;padding:0;display:flex}.design-img{aspect-ratio:4/3;background:var(--soft);border:1px solid var(--line);outline-offset:2px;transition:outline-color .2s, transform .25s var(--ease), box-shadow .25s;border-radius:12px;outline:2px solid #0000;margin-bottom:5px;display:block;position:relative;overflow:hidden}.design-img img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}.design:hover .design-img{transform:translateY(-2px);box-shadow:0 12px 24px -16px #3c280a80}.design.on .design-img{outline-color:var(--gold)}.tick{background:var(--gold);color:#fff;opacity:0;width:24px;height:24px;transition:opacity .2s, transform .25s var(--ease);border-radius:50%;place-items:center;display:grid;position:absolute;top:7px;right:7px;transform:scale(.6)}.plan{color:var(--cream);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1b1611d1;border-radius:999px;padding:3px 9px;font-size:.7rem;font-weight:600;position:absolute;bottom:7px;left:7px}.tick .ic{width:14px;height:14px}.design.on .tick{opacity:1;transform:none}.design-name{font-size:.9rem;font-weight:600}.design-note{color:var(--muted);font-size:.78rem;line-height:1.35}.swatch-list{grid-template-columns:repeat(4,1fr);gap:12px 8px;display:grid}.swatch{background:0 0;border:0;flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.sw{background:linear-gradient(135deg, var(--b) 50%, var(--a) 50%);outline-offset:3px;width:52px;height:52px;transition:outline-color .2s, transform .25s var(--ease);border-radius:50%;outline:2px solid #0000;position:relative;box-shadow:inset 0 0 0 1px #0000001f}.sw i{background:var(--c);border-radius:50%;width:12px;height:12px;position:absolute;top:11px;left:11px}.swatch:hover .sw{transform:scale(1.06)}.swatch.on .sw{outline-color:var(--gold)}.sw-name{color:var(--muted);text-align:center;font-size:.76rem;line-height:1.2}.swatch.on .sw-name{color:var(--text);font-weight:500}.font-list{gap:8px;display:grid}.font{border:1px solid var(--line);background:var(--surface);text-align:left;border-radius:14px;align-items:center;gap:14px;padding:10px 14px;transition:border-color .2s,box-shadow .2s;display:flex}.font:hover{box-shadow:0 8px 18px -14px #3c280a80}.font.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.font-sample{min-width:92px;font-size:1.6rem;line-height:1.2}.font-name{flex-direction:column;font-size:.9rem;font-weight:600;display:flex}.font-name small{color:var(--muted);font-size:.78rem;font-weight:400}.cta-box{border-top:1px solid var(--line);background:var(--surface);padding:16px 22px 20px}.cta{background:var(--espresso);color:var(--cream);transition:transform .2s var(--ease), box-shadow .2s;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 20px;font-size:1rem;font-weight:600;text-decoration:none;display:flex;box-shadow:0 14px 28px -16px #1b1611cc}.cta .ic{color:var(--line-green);width:1.25em;height:1.25em}.cta:hover{transform:translateY(-1px)}.cta-note{text-align:center;color:var(--muted);margin:8px 0 12px;font-size:.8rem}.cta-note b{color:var(--gold-2)}.cta-row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip-btn{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-size:.82rem;font-weight:500;text-decoration:none;transition:background .2s;display:inline-flex}.chip-btn:hover{background:var(--gold-soft)}.stage{background:radial-gradient(1200px 600px at 70% -10%, #3a2c1c 0%, transparent 60%), radial-gradient(900px 500px at 0% 110%, #2b2016 0%, transparent 60%), var(--espresso);flex-direction:column;grid-area:stage;min-width:0;min-height:0;display:flex}.stage-bar{color:var(--cream);border-bottom:1px solid #ffffff0f;align-items:center;gap:14px;padding:10px 16px;display:flex}.stage-bar .seg{margin-left:auto}.fold-btn{color:var(--cream);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;flex:none;align-items:center;gap:7px;padding:7px 12px;font-size:.84rem;font-weight:500;transition:background .2s;display:inline-flex}.fold-btn:hover{background:#ffffff1f}.shell.folded .fold-btn{background:var(--cream);color:var(--espresso);border-color:#0000}.now{flex-direction:column;min-width:0;display:flex}.now strong{font:600 1.05rem/1.2 var(--serif)}.now span{color:#fff4dc99;white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;overflow:hidden}.viewport{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.viewport:has(.device.phone){margin:20px 28px 24px}.device{flex:none;position:relative}.status{display:none}.screen{background:#fff;position:relative;overflow:hidden}.screen-in{transform-origin:0 0;position:relative}.frame{background:#fff;border:0;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0}.frame.entering{opacity:0}.device.desktop{flex-direction:column;align-self:stretch;display:flex;overflow:hidden}.device.desktop .screen{flex:1}.device.phone{transform-origin:50%;background:#0e0b08;border-radius:58px;padding:14px;box-shadow:0 40px 80px -30px #000c,inset 0 0 0 2px #3a2f25,0 0 0 1px #ffffff0f}.device.phone .screen{background:var(--sb,#fff);border-radius:44px;width:390px;height:844px;transition:background .25s}.device.phone .status{height:46px;color:var(--sbt,#000);justify-content:space-between;align-items:center;padding:6px 30px 0 44px;font:600 15px/1 -apple-system,SF Pro Text,system-ui,sans-serif;display:flex}.status span{gap:6px;display:flex}.status .ic{width:18px;height:18px}.device.phone:after{content:"";z-index:2;pointer-events:none;background:#0e0b08;border-radius:20px;width:110px;height:30px;position:absolute;top:24px;left:50%;translate:-50%}.note-wrap{z-index:50;background:#1b161100;place-items:center;padding:20px;transition:background .2s;display:grid;position:fixed;inset:0}.note-wrap[hidden]{display:none}.note-wrap.open{background:#1b161173}.note{background:var(--surface);text-align:center;opacity:0;width:min(360px,100%);transition:opacity .2s, transform .25s var(--ease);border-radius:24px;padding:26px 22px 16px;transform:translateY(12px)scale(.98);box-shadow:0 30px 60px -20px #00000080}.note-wrap.open .note{opacity:1;transform:none}.note-ic{background:var(--gold-soft);width:48px;height:48px;color:var(--gold-2);border-radius:50%;place-items:center;display:inline-grid}.note-ic .ic{width:24px;height:24px}.note h3{font:600 1.25rem/1.25 var(--serif);margin:12px 0 6px}.note-text{color:var(--muted);margin:0 0 18px;font-size:.95rem}.note-back{width:100%;color:var(--muted);background:0 0;border:0;border-radius:999px;margin-top:6px;padding:10px;font-weight:500}.note-back:hover{background:var(--soft)}@media (width<=860px){.shell{grid-template:"stage"minmax(0,1fr)/minmax(0,1fr);transition:none}.top,.stage-bar,.intro,.cta-note{display:none}.stage{background:#fff}:is(.viewport,.viewport:has(.device.phone)){margin:0}.device.bare,.device.bare .screen,.device.bare .screen-in{width:100%;height:100%}.panel{z-index:30;visibility:hidden;max-height:70dvh;transition:transform .35s var(--ease), visibility 0s .35s;border:0;border-radius:22px 22px 0 0;position:fixed;bottom:0;left:0;right:0;transform:translateY(105%);box-shadow:0 -18px 40px -16px #0006}.shell.opts-open .panel{visibility:visible;transition:transform .35s var(--ease);transform:none}.panel:before{content:"";background:var(--line);border-radius:4px;width:38px;height:4px;position:absolute;top:7px;left:50%;translate:-50%}.sheet-head{justify-content:space-between;align-items:center;gap:8px;padding:18px 12px 4px;display:flex}.done-btn{background:var(--espresso);color:var(--cream);border:0;border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;display:inline-flex}.seg button{padding:6px 12px}.tabs{gap:4px;padding:8px 12px 0;display:flex}.tabs button{color:var(--muted);background:0 0;border:0;border-radius:999px;flex:1;padding:8px 4px;font-size:.88rem;font-weight:500}.tabs button[aria-selected=true]{background:var(--soft);color:var(--text)}.groups{flex:none;padding:0;overflow:visible}.group{padding-top:10px;display:none}.group.active{display:block}.group h2{display:none}.group>div{scroll-snap-type:x proximity;scrollbar-width:none;gap:10px;padding:2px 16px 10px;scroll-padding-inline:16px;display:flex;overflow-x:auto}.group>div::-webkit-scrollbar{display:none}.group>div>*{scroll-snap-align:start;flex:none}.biz{width:68px}.design{width:116px}.design-note{display:none}.design-name{font-size:.8rem}.swatch{width:60px}.sw{width:44px;height:44px}.sw i{width:10px;height:10px;top:9px;left:9px}.font{gap:10px;width:170px;padding:8px 12px}.font-sample{min-width:0;font-size:1.3rem}.cta-box{padding:8px 12px calc(10px + env(safe-area-inset-bottom));align-items:center;gap:8px;display:flex}.cta{flex:1;padding:11px 14px;font-size:.92rem}.cta-row{flex-wrap:nowrap}.chip-btn span,.chip-btn[data-prices]{display:none}.chip-btn{padding:10px}.chip-btn .ic{width:1.2em;height:1.2em}.fab{right:12px;bottom:var(--fab-b,90px);z-index:20;background:var(--espresso);transition:opacity .25s, transform .3s var(--ease), bottom .25s var(--ease);border-radius:999px;display:flex;position:fixed;box-shadow:0 14px 30px -12px #0000008c,0 0 0 1px #ffffff14}.shell.opts-open .fab{opacity:0;pointer-events:none;transform:translateY(16px)}.fab-opts,.fab-start{color:var(--cream);white-space:nowrap;background:0 0;border:0;align-items:center;gap:8px;font-size:.86rem;font-weight:600;text-decoration:none;display:inline-flex}.fab-opts{padding:6px 14px 6px 6px}.fab-opts img{border-radius:50%}.fab-start{opacity:0;max-width:0;transition:max-width .4s var(--ease), padding .4s var(--ease), opacity .3s;padding:0;overflow:hidden}.fab-start .ic{color:var(--line-green);width:1.2em;height:1.2em}.shell.nudge .fab-start{opacity:1;border-left:1px solid #fff4dc2e;max-width:140px;padding:6px 14px 6px 12px}.hint{right:12px;bottom:calc(var(--fab-b,90px) + 54px);z-index:21;background:var(--surface);max-width:230px;color:var(--text);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s var(--ease);border-radius:14px;padding:10px 14px;font-size:.86rem;font-weight:500;line-height:1.4;display:block;position:fixed;transform:translateY(6px);box-shadow:0 14px 30px -12px #00000073}.hint:after{content:"";background:var(--surface);border-radius:2px;width:12px;height:12px;position:absolute;bottom:-6px;right:26px;transform:rotate(45deg)}.shell.hinting .hint{opacity:1;transform:none}.note-wrap{padding:12px 12px calc(12px + env(safe-area-inset-bottom));place-items:end center}}