@font-face{font-family:Chakra Petch;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/1fc9a8acda3903f0-s.p.woff2) format("woff2");unicode-range:u+02d7,u+0303,u+0331,u+0e01-0e5b,u+200c-200d,u+25cc}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/7b750d5bfef15842-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/2a7c45462b39533e-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/4c7c43bdd7a35c63-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/8d541ca8617572f0-s.p.woff2) format("woff2");unicode-range:u+02d7,u+0303,u+0331,u+0e01-0e5b,u+200c-200d,u+25cc}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/3955bbd902881c26-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/f6d84cc3be9d6158-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/84f090e3b62fb9e3-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Chakra Petch Fallback;src:local("Arial");ascent-override:96.77%;descent-override:30.05%;line-gap-override:0.00%;size-adjust:102.51%}.__className_3c00f2{font-family:Chakra Petch,Chakra Petch Fallback;font-style:normal}.__variable_3c00f2{--font-display:"Chakra Petch","Chakra Petch Fallback"}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/f8092a6a9ad7a44c-s.p.woff2) format("woff2");unicode-range:u+02d7,u+0303,u+0331,u+0e01-0e5b,u+200c-200d,u+25cc}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/96ad5eed80b1484c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/0ab56aae8cf76709-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/a1a058a3e6543db0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/7dfdf996fafd0873-s.p.woff2) format("woff2");unicode-range:u+02d7,u+0303,u+0331,u+0e01-0e5b,u+200c-200d,u+25cc}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/3c7225ad892364d7-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/8fc9138006ae4675-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/0b53384bc8cc52db-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/f33c62bdbd09f5b8-s.p.woff2) format("woff2");unicode-range:u+02d7,u+0303,u+0331,u+0e01-0e5b,u+200c-200d,u+25cc}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/2b74019ebf7a71b9-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/33387a3e1220e613-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/2f6258ffdaf4644f-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/1f1bc71f0d981582-s.p.woff2) format("woff2");unicode-range:u+02d7,u+0303,u+0331,u+0e01-0e5b,u+200c-200d,u+25cc}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/21b3ec5f6f7ed992-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/760a9ea75c6166f6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/21502afb5d341639-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Sarabun Fallback;src:local("Arial");ascent-override:109.45%;descent-override:23.78%;line-gap-override:0.00%;size-adjust:97.58%}.__className_ceb837{font-family:Sarabun,Sarabun Fallback;font-style:normal}.__variable_ceb837{--font-body:"Sarabun","Sarabun Fallback"}*{box-sizing:border-box}body,html{padding:0;margin:0}:root{--bg:#eae5da;--bg-alt:#ded7c7;--surface:#fbf9f4;--surface-raised:#ffffff;--ink:#2c2620;--ink-soft:#6e6555;--ink-faint:#9b9081;--line:#d3cab6;--line-strong:#b6a98c;--frame:#2c2620;--accent:#3b5dc9;--accent-ink:#f5f6ff;--danger:#b13e53;--danger-ink:#fff3f0;--led-idle:#b6a98c;--led-pending:#e8a23a;--led-connected:#3f9d5e;--led-failed:#b13e53;--shadow-board:0 18px 40px -18px rgba(44,38,32,0.45),0 2px 0 rgba(44,38,32,0.06);--shadow-card:0 1px 0 rgba(44,38,32,0.04),0 6px 18px -12px rgba(44,38,32,0.25);--radius-sm:8px;--radius-md:14px;--radius-lg:20px}body{font-family:var(--font-body),"Sarabun","Noto Sans Thai",system-ui,-apple-system,sans-serif;background:var(--bg);background-image:radial-gradient(circle at 15% 8%,var(--bg-alt),transparent 55%),radial-gradient(circle at 85% 92%,var(--bg-alt),transparent 55%);background-attachment:fixed;color:var(--ink);line-height:1.6}h1,h2,h3{font-family:var(--font-display),"Chakra Petch",var(--font-body),sans-serif;font-weight:700;letter-spacing:.01em}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,Courier New,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}main{max-width:560px;margin:0 auto;padding:16px 12px 120px;display:flex;flex-direction:column;gap:18px}header.app-header{text-align:center;padding-top:20px}header.app-header h1{font-size:1.4rem;margin:0 0 4px;color:var(--ink)}header.app-header p{margin:0;color:var(--ink-soft);font-size:.8rem}.nav-buttons{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.btn,.nav-buttons{justify-content:center}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--frame);background:var(--surface-raised);color:var(--ink);font-size:.9rem;font-weight:600;text-decoration:none;box-shadow:0 2px 0 var(--frame);transition:transform .12s ease,box-shadow .12s ease}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--frame)}.btn.btn-outline{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink-soft);box-shadow:none}.btn.btn-outline:active:not(:disabled){transform:translateY(1px)}.btn.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 2px 0 #223a86}.btn.btn-primary:active:not(:disabled){box-shadow:0 0 0 #223a86}.btn.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink);box-shadow:0 2px 0 #7a2436}.btn.btn-danger:active:not(:disabled){box-shadow:0 0 0 #7a2436}.btn.btn-sm{padding:7px 12px;font-size:.8rem}.btn:disabled{background:var(--surface);border-color:var(--line);box-shadow:none}.btn .pixel-icon{width:16px;height:16px;flex-shrink:0}.icon-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:52px;padding:8px 10px;border-radius:var(--radius-sm);border:1.5px solid var(--frame);background:var(--surface-raised);color:var(--ink);box-shadow:0 2px 0 var(--frame);transition:transform .12s ease,box-shadow .12s ease;font-size:.62rem;font-weight:600;line-height:1}.icon-btn .pixel-icon{width:18px;height:18px}.icon-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--frame)}.icon-btn.active{background:var(--accent);color:var(--accent-ink);border-color:#223a86;box-shadow:0 2px 0 #223a86}.icon-btn.on{background:#e8a23a;color:#382303;border-color:#382303;box-shadow:0 2px 0 #382303}footer.app-footer{text-align:center;padding:24px 16px 12px;font-size:.75rem;color:var(--ink-faint)}.panel{background:var(--surface);border:1.5px solid var(--frame);border-radius:var(--radius-md);padding:14px;box-shadow:var(--shadow-card)}.panel h2{font-size:.95rem;margin:0 0 10px;color:var(--ink)}.canvas-board{display:flex;flex-direction:column;align-items:center;gap:10px}.canvas-stage{position:relative;width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--frame);box-shadow:var(--shadow-board);touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-image:linear-gradient(45deg,#d9d2c2 25%,transparent 0),linear-gradient(-45deg,#d9d2c2 25%,transparent 0),linear-gradient(45deg,transparent 75%,#d9d2c2 0),linear-gradient(-45deg,transparent 75%,#d9d2c2 0);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#eee8d8}.canvas-stage canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.canvas-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px}.zoom-tools{display:flex;align-items:center;justify-content:center;gap:10px}.zoom-readout{min-width:46px;text-align:center;font-size:.78rem;color:var(--ink-soft)}.friend-tag{position:absolute;pointer-events:none;transform:translate(-50%,-140%);background:var(--ink);color:#fff2d6;font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.25)}.dock{background:var(--surface);border:1.5px solid var(--frame);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px}.dock-row{display:flex;align-items:center;gap:10px}.palette-tray{display:grid;grid-template-columns:repeat(8,1fr);grid-gap:8px;gap:8px;flex:1 1}.well{aspect-ratio:1;border-radius:999px;border:2px solid var(--frame);padding:0;min-width:0;box-shadow:0 2px 0 rgba(44,38,32,.35);transition:transform .12s ease,box-shadow .12s ease}.well.active{transform:translateY(-4px);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--frame),0 6px 0 rgba(44,38,32,.25)}.dock-actions{justify-content:space-between}.dock-actions,.heat-legend{display:flex;gap:8px;flex-wrap:wrap}.heat-legend,.legend-chip{align-items:center}.legend-chip{display:inline-flex;gap:5px;font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:999px;border:1.5px solid var(--line-strong);color:var(--ink-faint);background:var(--surface-raised);transition:color .15s ease,border-color .15s ease}.legend-chip .dot{width:8px;height:8px;border-radius:999px;background:var(--ink-faint)}.legend-chip.mine.active{color:var(--accent);border-color:var(--accent)}.legend-chip.mine.active .dot{background:var(--accent)}.legend-chip.theirs.active{color:#c45a35;border-color:#c45a35}.legend-chip.theirs.active .dot{background:#c45a35}.stepper{display:flex;flex-direction:column;gap:12px}.role-picker{display:flex;gap:8px}.role-picker .btn{flex:1 1;padding-top:14px;padding-bottom:14px}.step{flex-direction:column;padding:14px;border-radius:var(--radius-md);border:1.5px dashed var(--line-strong);background:var(--surface-raised)}.step,.step-title{display:flex;gap:8px}.step-title{font-family:var(--font-display),"Chakra Petch",sans-serif;font-size:.84rem;font-weight:700;color:var(--ink);align-items:center}.step-badge{width:24px;height:24px;border-radius:999px;background:var(--ink);color:#fff2d6;font-size:.78rem;font-family:ui-monospace,Consolas,monospace;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.code-box{background:var(--bg)}.code-box,.code-input{width:100%;min-height:64px;resize:vertical;border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);color:var(--ink);font-family:ui-monospace,Courier New,monospace;font-size:.72rem;padding:8px;word-break:break-all}.code-input{background:var(--surface-raised)}.copy-btn{width:100%;padding:12px;font-size:.88rem}.state-badge{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--surface-raised);border:1.5px solid var(--line-strong);color:var(--ink);width:-moz-fit-content;width:fit-content}.led{width:10px;height:10px;border-radius:999px;background:var(--led-idle);box-shadow:inset 0 -1px 1px rgba(0,0,0,.2)}.led.pending{background:var(--led-pending);box-shadow:0 0 6px 1px rgba(232,162,58,.7),inset 0 -1px 1px rgba(0,0,0,.2);animation:led-pulse 1.1s ease-in-out infinite}.led.connected{background:var(--led-connected);box-shadow:0 0 6px 1px rgba(63,157,94,.7),inset 0 -1px 1px rgba(0,0,0,.2)}.led.failed{background:var(--led-failed);box-shadow:0 0 6px 1px rgba(177,62,83,.6),inset 0 -1px 1px rgba(0,0,0,.2)}@keyframes led-pulse{0%,to{opacity:1}50%{opacity:.45}}.hint{font-size:.78rem;color:var(--ink-soft)}.error-text{font-size:.78rem;color:var(--danger);font-weight:600}.clear-banner{border:1.5px solid var(--danger);background:#fbeae7;color:#7a2436;border-radius:var(--radius-md);padding:12px 14px;font-size:.85rem;display:flex;flex-direction:column;gap:8px}.method-content h2{font-size:1.05rem;margin-top:24px;color:var(--ink)}.method-content li,.method-content p{font-size:.92rem;color:var(--ink-soft)}.method-content ul{padding-left:20px}.method-content code{background:var(--bg-alt);border-radius:4px;padding:1px 5px;font-size:.85em}@media (max-width:640px){main{padding-bottom:24px}.dock{position:-webkit-sticky;position:sticky;bottom:0;z-index:5;margin:0 -12px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:max(12px,env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}