:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bar-bg:rgba(250,248,243,.84);
  --bar-ink:#22201d;
  --bar-line:rgba(34,32,29,.13);
  --active-bg:#22201d;
  --active-ink:#f3f0e8;
  --shu:#c23a22;
  --shadow:0 10px 30px -14px rgba(50,38,24,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bar-bg:rgba(30,29,27,.86);
    --bar-ink:#ebe7de;
    --bar-line:rgba(235,231,222,.15);
    --active-bg:#ebe7de;
    --active-ink:#1e1d1b;
    --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bar-bg:rgba(30,29,27,.86);
  --bar-ink:#ebe7de;
  --bar-line:rgba(235,231,222,.15);
  --active-bg:#ebe7de;
  --active-ink:#1e1d1b;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  height:100%;margin:0;overflow:hidden;background:#e8e4da;
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#paper{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}

#guide{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .35s ease;mix-blend-mode:multiply}
#guide.on{opacity:1}
.sheet{position:relative;width:min(80vw,56vh);aspect-ratio:1;margin-bottom:130px}
.sheet svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sheet line,.sheet rect{stroke:rgba(194,58,34,.34);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.sheet line{stroke-dasharray:5 6}
.glyph{position:absolute;inset:0;width:100%;height:100%}

#hint{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(20px + env(safe-area-inset-top,0px));
  width:min(34ch,calc(100vw - 40px));
  margin:0;text-align:center;font-size:15px;line-height:1.6;color:#5a544a;
  pointer-events:none;transition:opacity .6s ease;
}
#hint.gone{opacity:0}

.bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:1px;padding:5px;
  background:var(--bar-bg);color:var(--bar-ink);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--bar-line);border-radius:999px;box-shadow:var(--shadow);
  max-width:calc(100vw - 16px);
}
.bar button,.strip button{
  appearance:none;border:0;margin:0;padding:0;background:transparent;color:inherit;
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  touch-action:manipulation;font:inherit;transition:background-color .15s ease,color .15s ease;
}
.bar button[hidden]{display:none}
.strip{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(72px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:2px;padding:4px;
  background:var(--bar-bg);color:var(--bar-ink);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--bar-line);border-radius:999px;box-shadow:var(--shadow);
}
.strip[hidden]{display:none}
.strip-label{font-size:14px;padding:0 8px;white-space:nowrap}
.strip button:focus-visible{outline:2px solid var(--shu);outline-offset:1px}
.strip svg{width:24px;height:24px}
.bar button:disabled{opacity:.32;cursor:default}
.bar button[aria-pressed="true"]{background:var(--active-bg);color:var(--active-ink)}
.bar button:focus-visible{outline:2px solid var(--shu);outline-offset:1px}
.bar svg{width:24px;height:24px}
.g{font-family:"Yuji Syuku","Hiragino Mincho ProN",serif;font-size:23px;line-height:1}
.seal-ico{
  display:grid;place-items:center;width:20px;height:24px;border-radius:2px;
  background:var(--shu);color:#f7efe6;font-family:"Yuji Syuku",serif;font-size:14px;line-height:1;
}
.sep{width:1px;height:22px;background:var(--bar-line);margin:0 3px;flex:none}
@media (max-width:360px){ .bar button{width:40px} .sep{margin:0 1px} }
@media (prefers-reduced-motion: reduce){ #guide,#hint,.bar button{transition:none} }