:root{
 --bg:#000000;
 --accent:#8b5cf6;
 --fg:#ffffff;
 --card:#1a1a1a;
 --time-scale:1;
}

body{
 margin:0;
 background:var(--bg);
 color:var(--fg);
 font-family:system-ui,sans-serif;
}

.toolbar{
 position:absolute;
 top:15px;
 right:15px;
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}

.toolbar button,.iconbtn{
 cursor:pointer;
 border:none;
 background:var(--card);
 color:var(--fg);
 padding:10px;
 border-radius:8px;
}

#colorPicker,#bgPicker{
 width:42px;
 height:42px;
 padding:0;
 border:none;
 background:none;
 cursor:pointer;
}

.container{
 min-height:100vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
}

#name{
 background:none;
 border:none;
 color:var(--accent);
 font-size:1.3rem;
 text-align:center;
 margin-bottom:20px;
 min-width:300px;
}

.time{
 color:var(--accent);
 font-size:calc(min(12vw,8rem) * var(--time-scale));
 font-weight:bold;
 text-align:center;
 white-space:nowrap;
 font-variant-numeric:tabular-nums;
 font-feature-settings:"tnum";
 font-family:monospace;
}

.controls{
 margin-top:25px;
 display:flex;
 gap:12px;
}

.controls button{
 background:var(--accent);
 color:white;
 border:none;
 border-radius:8px;
 padding:12px 20px;
 font-size:1rem;
}

#laps{
 list-style:none;
 padding:0;
 margin-top:30px;
 width:min(600px,90vw);
}

#laps li{
 padding:8px 12px;
 margin-bottom:6px;
 border-radius:8px;
 background:var(--card);
}