:root{font-family:'DM Sans','Noto Sans Thai','Noto Sans SC',sans-serif;color:#244a34;background:#f1f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #c6a66a;outline-offset:3px}[hidden]{display:none!important}#app{height:100dvh;min-height:560px;display:flex;flex-direction:column;overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#fff;border-bottom:1px solid #e3e5dc;flex-shrink:0}.identity{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.15em}.identity strong{font-family:Georgia,serif;font-size:21px;font-weight:400}.sub{font-size:9px;color:#879080}.dot{width:7px;height:7px;border-radius:50%;background:#5c8060}#fullscreen{border:0;background:#f3f4ef;width:35px;height:35px;font-size:25px}.modes{display:flex;justify-content:center;gap:5px;padding:12px;background:#fff;z-index:2;flex-shrink:0}.modes button{border:0;background:transparent;border-radius:5px;padding:10px 20px;font-size:13px;white-space:nowrap}.modes button[aria-pressed=true]{background:#254e36;color:#fff}.modes button:hover{box-shadow:inset 0 0 0 1px #a0b2a1}#stage{position:relative;flex:1;min-height:260px;background:radial-gradient(ellipse at 50% 40%,#fafaf3,#e6e8dd);overflow:hidden}#canvas-host,#poster,#plan{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}#poster>img{width:100%;height:100%;object-fit:cover}#poster:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#122c20bb,#142e2220)}#poster>div{position:absolute;z-index:1;left:6%;top:50%;transform:translateY(-50%);color:#fff;max-width:85%}.eyebrow{letter-spacing:.2em;font-size:10px;color:#e7d2ab}h1{font-weight:400;font-size:clamp(24px,3vw,39px);margin:10px 0 22px}#start{display:flex;gap:36px;align-items:center;border:0;border-radius:3px;background:#fff;padding:14px 20px;color:#21472f;font-weight:600}#start:disabled{opacity:.6}#load-status{font-size:12px;margin-top:16px}#view-label{position:absolute;left:24px;top:20px;pointer-events:none;display:flex;flex-direction:column;gap:7px}#view-label span{font-size:9px;letter-spacing:.19em;color:#6c7a6b}#view-label strong{font-weight:500;font-size:16px}#tools{position:absolute;right:18px;bottom:16px;display:flex;gap:5px}#tools button{border:1px solid #dde1d6;min-width:36px;height:37px;border-radius:4px;background:#ffffffed;font-size:21px;box-shadow:0 2px 5px #233a2010}#tools button:disabled{opacity:.4;cursor:default}#tools #auto{font-size:16px;padding:0 11px}#auto span{font-size:11px}#auto[aria-pressed=true]{background:#244c35;color:white}footer{padding:13px 20px 8px;text-align:center;background:#fff;border-top:1px solid #e1e4db;flex-shrink:0}#presets{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}#presets button{border:1px solid #dde3d8;background:#fff;border-radius:30px;padding:7px 17px;font-size:12px}#presets button[aria-pressed=true]{border-color:#587a5d;background:#eef2e9}#hint{margin:9px 0 0;color:#7a8575;font-size:11px}.note{display:flex;gap:15px;align-items:center;padding:10px 22px;background:#f8f7f2;border-top:1px solid #e7e7de;flex-shrink:0}.note span{font-size:8px;letter-spacing:.13em;white-space:nowrap;color:#927f57}.note p{font-size:10px;line-height:1.5;margin:0;color:#7b8075}#plan{background:#e5e8df;display:flex;align-items:center;justify-content:center;padding:14px 14px 44px}#plan img{max-width:100%;max-height:100%;height:auto;object-fit:contain;box-shadow:0 5px 30px #23322225}#plan a{position:absolute;bottom:12px;font-size:12px;color:#244d32;text-underline-offset:3px}@media(max-width:600px){header{padding:10px 14px}.identity{gap:8px}.sub{display:none}.modes{padding:9px 7px;gap:0}.modes button{padding:9px 11px;font-size:11px;flex:1}#app{min-height:580px}#view-label{left:14px;top:13px}#view-label strong{font-size:13px}#tools{right:10px;bottom:10px;gap:4px}#auto span{display:none}.note{padding:9px 12px;gap:10px}.note p{font-size:9px}footer{padding:10px 8px 7px}#presets{gap:5px}#presets button{padding:7px 11px;font-size:11px}#poster>div{left:7%}}

.render-styles{display:flex;align-items:center;gap:3px;margin-left:auto;margin-right:15px;padding:3px;border:1px solid #e1e4db;border-radius:5px}.render-styles button{border:0;border-radius:3px;background:transparent;font-size:11px;padding:6px 12px}.render-styles button[aria-pressed=true]{background:#e7eee2;color:#244d33;font-weight:600}#view-label{padding:8px 11px;background:#f8faf1d9;border-radius:4px;backdrop-filter:blur(5px)}@media(max-width:600px){.render-styles{margin-right:8px;gap:0}.render-styles button{font-size:10px;padding:6px 8px}.identity strong{font-size:18px}.identity{letter-spacing:.1em;gap:6px}}