
  :root{--bg:#f0f9ff;--card:#ffffff;--border:#bae6fd;--accent:#0369a1;--accent2:#f97316;--accent3:#0ea5e9;--text:#0c4a6e;--muted:#7ab8d4;--success:#059669;--danger:#dc2626}
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;min-height:100vh;display:flex;flex-direction:column}
  body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(14,165,233,.08) 0%,transparent 60%);pointer-events:none;z-index:0}
  header{position:relative;z-index:10;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--border);background:var(--card)}
  .logo{font-family:'DM Mono',monospace;font-size:1.4rem;letter-spacing:.08em;color:var(--accent)}.logo span{color:var(--accent2)}
  main{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:28px 16px 40px;gap:20px;max-width:520px;margin:0 auto;width:100%}
  .hero{text-align:center}.hero h1{font-size:clamp(1.6rem,6vw,2.6rem);font-weight:800;line-height:1.15}.hero h1 em{font-style:normal;color:var(--accent3)}.hero p{margin-top:8px;color:var(--muted);font-size:.85rem}
  .meter-display{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:18px;width:100%;text-align:center;box-shadow:0 2px 12px rgba(3,105,161,.06)}
  .meter-title{font-family:'DM Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
  .temp-gauge{width:100%;height:28px;background:linear-gradient(90deg,#bae6fd,#7dd3fc,#f97316,#dc2626);border-radius:14px;position:relative;margin-bottom:10px;border:2px solid var(--border)}
  .temp-needle{position:absolute;top:-6px;width:4px;height:40px;background:var(--text);border-radius:2px;transform:translateX(-50%);transition:left .5s cubic-bezier(.4,0,.2,1)}
  .meter-labels{display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:.72rem;font-weight:500}
  .range-bar{width:100%;height:14px;background:#e0f2fe;border-radius:7px;position:relative;margin:10px 0 6px;border:1px solid var(--border)}
  .range-fill{position:absolute;height:100%;background:var(--accent3);border-radius:7px;transition:all .4s cubic-bezier(.4,0,.2,1)}
  .range-labels{display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:.72rem;font-weight:500;color:var(--accent)}
  .reading-text{font-family:'DM Mono',monospace;font-size:clamp(.9rem,3vw,1.2rem);color:var(--accent2);text-align:center;letter-spacing:.04em}
  .log-wrap{width:100%;display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto}
  .log-item{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--border);border-radius:10px;padding:7px 14px;font-size:.82rem;font-family:'DM Mono',monospace;animation:slideIn .2s ease both}
  .log-icon{width:22px;text-align:center}.log-val{font-weight:500;color:var(--text)}
  .input-group{width:100%;display:flex;flex-direction:column;gap:10px}
  .temp-input{width:100%;background:var(--card);border:2px solid var(--border);border-radius:12px;color:var(--text);font-family:'DM Mono',monospace;font-size:clamp(1rem,4vw,1.4rem);padding:15px 20px;outline:none;transition:border-color .2s,box-shadow .2s;text-align:center}.temp-input::placeholder{color:var(--muted);font-size:.85rem}.temp-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(3,105,161,.1)}.temp-input.hot{border-color:var(--danger)}.temp-input.cold{border-color:var(--accent3)}
  .measure-btn{background:var(--accent);color:#fff;border:none;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.04em;padding:16px;cursor:pointer;width:100%;transition:background .2s,transform .15s}.measure-btn:hover{background:#0284c7;transform:translateY(-1px)}.measure-btn:active{transform:scale(.98)}
  .samples-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
  .sample-dot{width:12px;height:12px;border-radius:50%;background:var(--border);transition:background .3s}.sample-dot.used{background:var(--accent)}.sample-dot.last{background:var(--danger)}
  .overlay{display:none;position:fixed;inset:0;background:rgba(240,249,255,.95);z-index:100;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}.overlay.show{display:flex}
  .result-card{background:var(--card);border:2px solid var(--border);border-radius:20px;padding:36px 28px;text-align:center;max-width:340px;width:100%;animation:popUp .5s cubic-bezier(.175,.885,.32,1.275) both;box-shadow:0 20px 60px rgba(3,105,161,.15)}
  .r-emoji{font-size:3.2rem;margin-bottom:10px}.r-title{font-size:2rem;font-weight:800;margin-bottom:8px;color:var(--accent)}.r-desc{color:var(--muted);font-size:.85rem;font-family:'DM Mono',monospace;margin-bottom:22px}.r-desc strong{color:var(--accent2);font-size:1.05rem}
  .btn-reset{background:var(--accent);color:#fff;border:none;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;padding:14px 32px;cursor:pointer;width:100%;transition:background .2s}.btn-reset:hover{background:#0284c7}
  .scale-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .scale-btn{background:var(--card);border:2px solid var(--border);border-radius:30px;padding:7px 16px;font-family:'DM Mono',monospace;font-size:.75rem;cursor:pointer;transition:all .2s;color:var(--muted)}.scale-btn:hover{border-color:var(--accent);color:var(--accent)}.scale-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
  footer{position:relative;z-index:10;padding:16px 24px;border-top:2px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:.7rem;color:var(--muted);font-family:'DM Mono',monospace;background:var(--card)}
  footer a{color:var(--muted);text-decoration:none;transition:color .2s}footer a:hover{color:var(--accent)}
  @keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
  @keyframes popUp{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
