:root{--orange:#ff7138;--orange2:#ff9a5d;--bg:#11100f;--panel:#1b1918;--line:#34302c;--muted:#aaa19b;--white:#f8f5f2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 76% 5%,#342018 0,#11100f 32rem),var(--bg);color:var(--white);font-family:'IBM Plex Sans Thai',sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(#ff8b4a 1px,transparent 1px),linear-gradient(90deg,#ff8b4a 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}.shell{max-width:1120px;margin:auto;padding:28px 28px 40px}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px}.brand{font-size:20px;font-weight:600;letter-spacing:-.5px}.brand b{color:var(--orange)}.brand-mark{display:inline-grid;place-items:center;width:29px;height:29px;border:2px solid var(--orange);border-radius:50%;color:var(--orange);margin-right:9px}.status{font-size:12px;color:#bcb4ae}.status-dot{display:inline-block;width:7px;height:7px;background:#5ade91;border-radius:50%;margin-right:6px;box-shadow:0 0 10px #5ade91}.hero{padding:70px 0 42px}.eyebrow{color:var(--orange);font:700 11px 'Space Mono';letter-spacing:2px;margin-bottom:16px}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.12;letter-spacing:-2px;margin:0}.hero h1 span{color:var(--orange)}.hero p{color:var(--muted);line-height:1.8;margin-top:22px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:linear-gradient(145deg,rgba(42,37,33,.94),rgba(24,22,21,.94));border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 20px 60px #0005}.panel-heading{display:flex;gap:15px;align-items:flex-start;margin-bottom:30px}.step{font:700 11px 'Space Mono';color:var(--orange);background:#ff71381a;border:1px solid #ff713850;border-radius:6px;padding:7px 8px}.panel h2{font-size:18px;margin:0 0 5px}.panel-heading p{color:var(--muted);font-size:12px;margin:0}label{font-size:12px;color:#d0c8c3;display:block;margin-bottom:8px}.secret-wrap{display:flex;border:1px solid #554a43;background:#121110;border-radius:10px;overflow:hidden}.secret-wrap:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px #ff71381c}input{background:transparent;border:0;outline:0;color:var(--white);padding:15px;font:14px 'Space Mono';min-width:0;flex:1}.icon-btn{background:none;border:0;color:#867b73;padding:0 16px;cursor:pointer}.hint{font-size:11px;color:#7f766f;margin:9px 0 20px}.input-actions{display:flex;gap:9px;margin-bottom:14px}.button{border:0;border-radius:9px;padding:12px 17px;color:var(--white);font:600 13px 'IBM Plex Sans Thai';cursor:pointer;transition:.2s}.button:hover{transform:translateY(-2px)}.secondary{background:#302a26}.ghost{background:transparent;color:#a79c94}.primary{width:100%;background:linear-gradient(100deg,var(--orange),#ff8d4d);box-shadow:0 8px 24px #ff713844}.primary span{float:right;font-size:20px;line-height:12px}.message{min-height:22px;color:#ffab7d;font-size:12px;margin-top:12px}.example{font:11px 'Space Mono';line-height:1.8;color:#958a83;border-top:1px solid var(--line);padding-top:18px;margin-top:7px}.example b{font-family:'IBM Plex Sans Thai';color:#d2c9c2}.example span{color:#e9895c;margin-left:8px}.code-panel{display:flex;flex-direction:column}.code-display{text-align:center;padding:15px 0 28px;border-bottom:1px solid var(--line)}.code{font:700 clamp(43px,7vw,64px) 'Space Mono';letter-spacing:5px;color:var(--orange2);text-shadow:0 0 25px #ff713866;margin:5px 0 18px}.copy{border:1px solid #615047;color:#f0d7ca;background:#2a211e;border-radius:7px;padding:8px 17px;cursor:pointer;font:12px 'IBM Plex Sans Thai'}.copy:disabled,.outline:disabled{opacity:.45;cursor:not-allowed}.timer-row{display:flex;align-items:center;gap:7px;color:#a79c94;font-size:12px;padding:19px 0 8px}.timer-row b{color:var(--white);font:700 14px 'Space Mono';margin-left:auto}.progress{height:5px;border-radius:5px;background:#332e2b;overflow:hidden}.progress span{display:block;height:100%;width:100%;background:var(--orange);transition:width .4s}.outline{margin-top:22px;background:transparent;border:1px solid #704d3d;width:100%}.privacy{display:flex;gap:13px;background:#201d1a;border-radius:10px;padding:14px;margin-top:24px;color:#aaa099;font-size:11px;line-height:1.7}.privacy>span{color:#67d9a0;font-size:19px}.privacy b{color:#d8d0ca}.howto{padding:55px 0 28px}.howto h2{font-size:17px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.steps div{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding:16px 10px;color:#aaa19b;font-size:12px;line-height:1.7}.steps b{display:grid;place-items:center;border:1px solid #71513e;border-radius:50%;width:30px;height:30px;color:var(--orange);font:12px 'Space Mono'}.warning{display:flex;gap:14px;align-items:flex-start;background:#2c2017;border:1px solid #70442c;border-radius:10px;padding:15px 18px;color:#c4a391;font-size:11px;line-height:1.7}.warning span{color:var(--orange);font-size:19px}.warning p{margin:0}.warning b{color:#f0c0a5}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:46px;padding-top:22px;color:#827870;font-size:11px}footer span:first-child{color:#b9ada5}footer span:nth-child(2){color:var(--orange)}footer small{width:100%;color:#625b55}@media(max-width:720px){.shell{padding:20px 17px 32px}.topbar{align-items:flex-start;gap:10px}.status{font-size:10px;text-align:right}.hero{padding:48px 0 32px}.workspace{grid-template-columns:1fr}.panel{padding:22px}.steps{grid-template-columns:1fr}.howto{padding-top:38px}footer{display:block}footer span,footer small{display:block;margin-bottom:8px}}