:root{--paper:#eee9dd;--ink:#171717;--red:#f0442f;--rule:#1c1c1c;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-height:100vh;background-image:linear-gradient(#0000000b 1px,transparent 1px);background-size:100% 28px}
.masthead{display:grid;grid-template-columns:150px 1fr auto;gap:36px;align-items:start;padding:34px clamp(20px,5vw,72px);border-bottom:3px solid var(--rule)}
.logo{display:block;color:var(--ink);text-decoration:none;text-transform:lowercase;font:900 27px/.72 Arial,sans-serif;letter-spacing:-.09em;transform:rotate(-2deg);width:max-content}
.logo span{color:var(--red);font-size:55px;position:absolute}
.intro p{font:700 10px/1 monospace;letter-spacing:.16em;margin:2px 0 16px}
.intro h1{font:900 clamp(35px,5vw,70px)/.93 Arial,"PingFang SC",sans-serif;letter-spacing:-.07em;margin:0}
.intro em{font-style:normal;color:var(--red)}
.live-badge{font:700 11px/1 monospace;border:2px solid;padding:10px 12px}
.live-badge i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.2}
}
main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(370px,.65fr);min-height:650px}
.workspace{border-right:3px solid var(--rule);display:flex;flex-direction:column;min-width:0}
.editor-head,.editor-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--rule);font:700 11px/1 monospace;text-transform:uppercase}
.editor-head button{appearance:none;border:0;border-bottom:1px solid;background:transparent;font:inherit;cursor:pointer;padding:3px}
.editor-head button:hover{color:var(--red)}
textarea{resize:none;display:block;width:100%;flex:1;min-height:520px;border:0;background:#f8f4e9aa;padding:30px clamp(22px,4vw,58px);outline:0;color:var(--ink);font:400 19px/1.85 Georgia,"Songti SC","SimSun",serif;caret-color:var(--red)}
textarea::placeholder{color:#7f7a71}
.editor-foot{border-top:1px solid var(--rule);border-bottom:0;color:#6d685f}
.dashboard{min-width:0}
.time-card{background:var(--red);color:#fff;padding:30px clamp(22px,3vw,42px);border-bottom:3px solid var(--rule)}
.time-card p{font:700 11px/1 monospace;letter-spacing:.14em;margin:0}
.big-time{font:900 clamp(45px,6vw,82px)/1 Arial,sans-serif;letter-spacing:-.075em;margin:26px 0 32px}
.time-card label{display:flex;justify-content:space-between;font:700 11px/1 monospace}
.time-card input{width:100%;accent-color:#171717;margin:17px 0 8px}
.speed-scale{display:flex;justify-content:space-between;font:10px/1 monospace}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.stats-grid article{min-height:110px;padding:18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;justify-content:space-between}
.stats-grid article:nth-child(odd){border-right:0}
.stats-grid .hero-stat{grid-column:1/-1;min-height:145px;border-right:0;background:var(--ink);color:var(--paper);flex-direction:row;align-items:end}
.stats-grid span{font:700 11px/1.25 monospace;text-transform:uppercase}
.stats-grid small{font-weight:400;color:#aaa}
.stats-grid strong{font:900 38px/1 Arial,sans-serif;letter-spacing:-.05em;overflow-wrap:anywhere}
.hero-stat strong{font-size:72px}
.method{padding:18px;margin:0;color:#676259;font:11px/1.6 monospace}
footer{border-top:3px solid var(--rule);padding:20px clamp(20px,5vw,72px);display:flex;justify-content:space-between;font:700 12px/1 monospace}
footer strong{color:var(--red)}
@media(max-width:800px){.masthead{grid-template-columns:80px 1fr;gap:18px}
.live-badge{grid-column:1/-1;width:max-content}
.intro h1{font-size:40px}
main{grid-template-columns:1fr}
.workspace{border-right:0;border-bottom:3px solid}
.editor-head,.editor-foot{padding-inline:14px}
textarea{min-height:50vh;padding:22px 18px}
.dashboard{display:grid;grid-template-columns:1fr}
.big-time{font-size:60px}
.stats-grid .hero-stat{min-height:125px}
}
@media(max-width:420px){.masthead{padding:24px 16px}
.intro h1{font-size:34px}
.time-card{padding:26px 20px}
.stats-grid strong{font-size:32px}
.hero-stat strong{font-size:56px}
}