/* === base.css === reset + body grid + canvas + wordmark === */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;height:100%;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  overflow:hidden;overscroll-behavior:none;
}
/* 方眼背景は body 一つで完結。キャンバスは透明レイヤとして上に乗る */
body{
  background-color:var(--grid-base);
}
canvas{
  display:block;touch-action:none;position:fixed;inset:0;
}
.wordmark{
  position:fixed;top:max(16px,env(safe-area-inset-top));left:18px;z-index:10;
  font-family:'Crimson Pro',Garamond,serif;
  font-size:22px;font-weight:400;letter-spacing:.08em;
  color:transparent;
  -webkit-text-stroke:0.7px var(--ink);
  line-height:1;
  user-select:none;pointer-events:none;
  opacity:.75;
}
/* rec button — 赤丸 + REC ラベルのピル型 */
.rec-btn{
  position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;z-index:10;
  appearance:none;-webkit-appearance:none;border:none;
  background:var(--ink);
  color:var(--ivory);
  cursor:pointer;
  font-family:'Crimson Pro',Garamond,serif;
  font-size:11px;font-weight:400;letter-spacing:.18em;
  padding:6px 14px 6px 10px;
  border-radius:999px;
  display:flex;align-items:center;gap:7px;
  opacity:.55;
  transition:opacity .15s;
}
.rec-btn::before{
  content:"";
  width:10px;height:10px;border-radius:50%;
  background:var(--rust);
  flex:0 0 10px;
}
.rec-btn:hover{opacity:.75}
.rec-btn.recording{
  opacity:1;
  background:var(--rust);
}
.rec-btn.recording::before{
  background:var(--ivory);
  animation:rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink{
  0%,100%{opacity:1}
  50%{opacity:.2}
}