:root{--bg:#0b0d12;--surface:#11141b;--line:#272c36;--text:#f2f4f6;--muted:#8b929f;--accent:#90f5bc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}button,input,textarea{font:inherit}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);position:sticky;top:0;background:#0b0d12e8;backdrop-filter:blur(16px);z-index:4}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:600 16px ui-monospace,Consolas,monospace}.brand i,header nav span i{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 16px #90f5bc88}.brand i{display:block}header nav{display:flex;align-items:center;gap:28px}header nav a{color:var(--muted);text-decoration:none;font-size:13px}header nav span{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:20px;padding:8px 12px;color:#aab0ba;font:11px ui-monospace,monospace}.hero{min-height:670px;max-width:1180px;margin:auto;padding:90px 24px;display:flex;flex-direction:column;justify-content:center;border-inline:1px solid var(--line);position:relative}.tag,.title p,.about>p{color:var(--accent);font:11px ui-monospace,monospace;letter-spacing:.16em}.hero h1{font-size:clamp(52px,8vw,102px);line-height:.99;letter-spacing:-.065em;margin:24px 0 28px}.hero h1 em{font-style:normal;color:#6d7480}.intro{max-width:520px;color:var(--muted);font-size:17px;line-height:1.7}.start{color:var(--text);text-decoration:none;border-bottom:1px solid #4d5562;width:max-content;margin-top:28px;padding:10px 0;font-size:14px}.code{position:absolute;right:55px;bottom:60px;min-width:225px;border:1px solid var(--line);padding:18px 22px;background:#0e1117;color:#59616d;font:12px/2 ui-monospace,monospace}.code b{display:inline-block;width:74px;color:#aeb5bf;font-weight:400}.code em{color:var(--accent);font-style:normal}.tools{background:#f0f1ed;color:#15171b;padding:100px max(24px,calc((100vw - 1180px)/2))}.title{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px}.title p{color:#50775f;margin:0 0 12px}.title h2{font-size:42px;letter-spacing:-.045em;margin:0}.title small{color:#7b8087;font:11px ui-monospace,monospace}.tabs{display:flex;gap:6px;border-bottom:1px solid #ced1ca;padding-bottom:14px;overflow:auto}.tabs button{border:0;background:none;color:#73777d;padding:11px 18px;border-radius:7px;cursor:pointer;white-space:nowrap;font-size:13px}.tabs button.active{background:#171a1e;color:#fff}.workspace{margin-top:22px}.panel{display:none;background:white;border:1px solid #d8dad5;padding:34px;min-height:430px}.panel.active{display:block}.panel-title{display:flex;justify-content:space-between;border-bottom:1px solid #e2e4df;padding-bottom:23px;margin-bottom:25px}.panel-title h3{font-size:23px;margin:0 0 7px}.panel-title p{color:#777c82;font-size:13px;margin:0}.panel-title label{height:max-content;background:#e3f7e9;color:#357650;padding:7px 9px;border-radius:4px;font:10px ui-monospace,monospace}.editors{display:grid;grid-template-columns:1fr 1fr;gap:14px}.editors span{display:flex;flex-direction:column;gap:9px;color:#62676d;font-size:11px;font-weight:600;text-transform:uppercase}textarea,input{background:#f5f6f3;border:1px solid #dfe1dc;color:#171a1d;outline:none;border-radius:3px}textarea:focus,input:focus{border-color:#78a78b;box-shadow:0 0 0 3px #8bc49e22}textarea{min-height:210px;resize:vertical;padding:16px;font:13px/1.65 ui-monospace,Consolas,monospace}.actions{display:flex;align-items:center;gap:9px;margin-top:16px;flex-wrap:wrap}.actions button,.time-row button,.result button{border:1px solid #d6d8d3;background:#fff;color:#373b40;padding:10px 15px;border-radius:4px;cursor:pointer;font-size:12px}.primary{background:#171a1e!important;border-color:#171a1e!important;color:#fff!important}.actions small{color:#666}.actions small.error{color:#b33434}.time-row{display:grid;grid-template-columns:1fr auto;gap:12px}.time-row input{height:48px;padding:0 14px}.result{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:15px;margin-top:20px;background:#f5f6f3;border:1px solid #dfe1dc;padding:20px}.result span{color:#777;font-size:12px}.result strong{font:15px ui-monospace,monospace}.link{border:0;background:none;color:#477057;padding:14px 0;cursor:pointer;font-size:12px}.uuid{background:#101318;color:var(--accent);padding:44px 28px;text-align:center;font:clamp(16px,3vw,28px) ui-monospace,monospace}.about{max-width:1180px;margin:auto;padding:125px 24px;text-align:center;border-inline:1px solid var(--line)}.about h2{font-size:clamp(34px,5vw,62px);letter-spacing:-.055em;margin:22px 0 44px}.about div{display:flex;justify-content:center;gap:10px}.about div span{border:1px solid var(--line);border-radius:30px;padding:10px 17px;color:var(--muted);font-size:12px}footer{max-width:1180px;margin:auto;border:1px solid var(--line);border-bottom:0;padding:28px 24px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:#6e7580;font-size:11px}footer p{text-align:center}footer>small{text-align:right}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--accent);color:#102016;padding:10px 17px;border-radius:5px;font-size:12px;opacity:0;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){header nav{display:none}.hero{min-height:590px}.hero h1{font-size:53px}.code{display:none}.tools{padding-top:70px}.title h2{font-size:33px}.panel{padding:22px 18px}.editors{grid-template-columns:1fr}.time-row,.result{grid-template-columns:1fr}.actions small{width:100%}.about{padding-block:90px}.about div{flex-wrap:wrap}footer{grid-template-columns:1fr;gap:15px;text-align:center}footer .brand{justify-content:center}footer p,footer>small{text-align:center;margin:0}}