:root{--navy:#12315c;--blue:#1877e8;--muted:#6e7b8f;--line:#e4ebf3}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#17263c;background:radial-gradient(circle at 50% 38%,#e4f1ff 0,transparent 32rem),#f6f9fd;font-family:Sarabun,sans-serif}.timer-page{max-width:1280px;min-height:calc(100vh - 55px);padding:22px 32px;margin:auto}.timer-header{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);font:700 25px Kanit,sans-serif}.brand img{width:122px;height:42px;object-fit:contain;object-position:left center}.brand-mark{border-radius:8px;background:var(--navy);color:#fff;font:700 14px Sarabun,sans-serif;padding:5px 7px;letter-spacing:.7px}.back-link,.text-button{border:0;background:transparent;color:var(--blue);font:600 15px Sarabun,sans-serif;text-decoration:none;cursor:pointer}.timer-main{text-align:center;display:flex;min-height:calc(100vh - 160px);flex-direction:column;justify-content:center;align-items:center}.eyebrow{margin:0;color:var(--blue);letter-spacing:2px;font-size:12px;font-weight:700}.timer-main h1{font:600 34px Kanit,sans-serif;margin:7px 0 0}.timer-display{font:700 clamp(120px,24vw,310px)/1 Kanit,sans-serif;letter-spacing:5px;color:var(--navy);margin:12px 0 24px;font-variant-numeric:tabular-nums}.timer-display.warning{color:#e68a11}.timer-display.finished{color:#d53b4c}.settings{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.settings label{display:flex;flex-direction:column;text-align:left;color:var(--muted);font-size:13px;gap:5px}.settings input{width:150px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 11px;font:600 17px Sarabun,sans-serif;color:#17263c}.settings label:last-child input{width:208px}.actions{display:flex;align-items:center;gap:10px;margin-top:20px}.primary-button,.secondary-button{font:600 16px Sarabun,sans-serif;border-radius:11px;padding:11px 22px;cursor:pointer}.primary-button{border:1px solid var(--blue);background:var(--blue);color:#fff;box-shadow:0 8px 16px #cce3ff}.secondary-button{border:1px solid #d8e7fa;background:#f1f7ff;color:#1d67bd}.sound-note{color:var(--muted);font-size:14px;margin:20px 0 0}footer{text-align:center;color:var(--muted);font-size:14px;padding:0 20px 28px}footer a{color:var(--blue);font-weight:600;text-decoration:none}@media(max-width:560px){.timer-page{padding:14px}.brand img{width:94px;height:34px}.brand{font-size:21px}.timer-display{font-size:104px;letter-spacing:1px}.timer-main{min-height:calc(100vh - 130px)}.settings{gap:8px}.settings input{width:118px}.settings label:last-child input{width:180px}.actions{flex-wrap:wrap;justify-content:center}}