:root{
  --paper:#f7f2e6;          
  --paper2:#fbf7ee;         
  --ink:#1e2a38;            
  --ink-strong:#111b26;     
  --ink-soft:#5d6b7a;       
  --rule:#cbbfa8;           
  --rule-soft:#e0d6c2;
  --accent:#1f5fa0;         
  --accent-ink:#173f6b;
  --marker:#f2d98a;         
  --green:#2f7a53;          
  --plum:#8a4f7d;           
  --pen:"Klee One","Klee","Yu Kyokasho","YuKyokasho Yoko","游教科書体","Hiragino Mincho ProN","Yu Mincho",serif;
  --text:"Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}

body{
  font-family:var(--text);
  color:var(--ink);
  line-height:1.9;
  background-color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.06'/></svg>"),
    radial-gradient(120vw 80vh at 50% -20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(203,191,168,.18), transparent 60%);
}

a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(31,95,160,.35)}
a:hover{color:var(--accent-ink); border-bottom-color:var(--accent-ink)}

.wrap{max-width:820px; margin:0 auto; padding:0 24px}


nav{display:flex; align-items:center; justify-content:space-between; padding:26px 0 18px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--pen); font-weight:600;
  font-size:22px; color:var(--ink-strong); border:0}
.brand:hover{color:var(--ink-strong)}
.brand .mark{width:32px; height:32px; border-radius:8px; display:block}
.brand b{font-weight:700}

.muted{color:var(--ink-soft); font-size:14px}
a.muted{border-bottom-color:rgba(93,107,122,.3)}


header.hero{padding:34px 0 8px}
header.hero h1{
  font-family:var(--pen); font-weight:600; color:var(--ink-strong);
  font-size:clamp(30px,5.6vw,44px); line-height:1.45; letter-spacing:.01em}
header.hero .lead{font-size:17px; margin-top:18px}

header.page{padding:30px 0 6px}
header.page h1{font-family:var(--pen); font-weight:600; color:var(--ink-strong);
  font-size:clamp(26px,4.4vw,34px); line-height:1.5}
header.page .upd{color:var(--ink-soft); font-size:13.5px; margin-top:8px}

h2{font-family:var(--pen); font-weight:600; color:var(--ink-strong); font-size:23px; line-height:1.55}
h3{font-family:var(--pen); font-weight:600; color:var(--ink-strong); font-size:17px; margin:20px 0 4px}


section > h2{
  display:inline-block; padding-bottom:3px;
  background-image:linear-gradient(transparent 92%, rgba(30,42,56,.35) 92%);
}

p{font-size:15.5px; margin-top:13px}
ul{margin:12px 0 0 1.15em; font-size:15.5px}
li{margin-top:7px}
b, strong{font-weight:700; color:var(--ink-strong)}


.mark-pen{
  background-image:linear-gradient(var(--marker), var(--marker));
  background-position:0 .82em;
  background-size:100% .5em;
  background-repeat:repeat-y;
  padding:0 .08em;
}

section{margin-top:42px}


section.block{
  background:var(--paper2); border:1px solid var(--rule); border-radius:4px;
  padding:22px 24px; margin-top:20px;
  box-shadow:1px 2px 0 rgba(30,42,56,.05);
}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; margin-top:20px}
.card{
  background:var(--paper2); border:1px solid var(--rule-soft); border-radius:4px;
  padding:18px 20px; box-shadow:1px 2px 0 rgba(30,42,56,.04);
}
.card h3{margin:0; font-size:16.5px}
.card p{font-size:14.5px; margin-top:7px; color:#3b4756}


.buybox{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px}
.btn{
  display:inline-block; font-family:var(--pen); font-weight:600; font-size:16.5px;
  background:var(--ink-strong); color:var(--paper); border:1px solid var(--ink-strong);
  padding:12px 26px; border-radius:3px; cursor:pointer;
  box-shadow:2px 2px 0 rgba(30,42,56,.18);
}
.btn:hover{background:#000; color:var(--paper); border-bottom-color:var(--ink-strong)}
.btn.ghost{background:transparent; color:var(--ink-strong); border:1px solid var(--rule);
  box-shadow:2px 2px 0 rgba(30,42,56,.07)}
.btn.ghost:hover{background:rgba(30,42,56,.05); color:var(--ink-strong)}
.btn.danger{background:#8c3a3a; border-color:#8c3a3a; margin-top:14px}
.btn.danger:hover{background:#732f2f}
.btn[disabled]{opacity:.4; cursor:not-allowed; box-shadow:none}

.pill{display:inline-block; font-size:12.5px; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:999px; padding:2px 12px; margin-top:18px}
.note{margin-top:12px}

kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--paper2); color:var(--ink-strong);
  border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px; padding:1px 6px;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  background:rgba(30,42,56,.05); border-radius:3px; padding:1px 5px}


table.spec{width:100%; border-collapse:collapse; margin-top:16px; font-size:15px}
table.spec th, table.spec td{border-top:1px solid var(--rule-soft); padding:13px 4px; text-align:left; vertical-align:top}
table.spec tr:first-child th, table.spec tr:first-child td{border-top:0}
table.spec th{width:32%; color:var(--ink-soft); font-weight:700; font-size:14px; white-space:nowrap}


.stopbox{border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:20px; background:var(--paper2)}
.stopbox div{padding:16px 20px; border-top:1px solid var(--rule-soft)}
.stopbox div:first-child{border-top:0}
.stopbox .keep{box-shadow:inset 4px 0 0 var(--green)}
.stopbox .halt{box-shadow:inset 4px 0 0 var(--plum)}
.stopbox b{font-family:var(--pen); font-weight:600; font-size:16px; color:var(--ink-strong)}
.stopbox p{margin-top:5px; font-size:14.5px}


.keyrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.keyinput{
  flex:1 1 300px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px;
  color:var(--ink-strong); background:#fffdf7;
  border:1px solid var(--rule); border-radius:3px; padding:11px 14px; letter-spacing:.04em;
}
.keyinput:focus{outline:2px solid rgba(31,95,160,.35); outline-offset:1px}
.msg{min-height:1.6em; font-size:14.5px; color:var(--ink-soft)}
.msg.bad{color:#8c3a3a}
.msg.ok{color:var(--green)}

.keybox{background:#fffdf7; border:1px solid var(--rule); border-radius:4px; padding:18px 20px; margin-top:16px}
.keyval{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:18px;
  word-break:break-all; color:var(--ink-strong); margin-top:6px}
#copy{display:none; margin-top:14px}


.seller-name{height:19px; width:auto; display:block; margin:0}
.grid-title{
  font-family:var(--pen); font-size:19px; font-weight:600; color:var(--ink-strong);
  margin:34px 0 -2px;
}
.card.solo{margin-top:10px}
.shot{position:relative; margin:26px 0 8px}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--rule);
  border-radius:6px; box-shadow:2px 4px 0 rgba(30,42,56,.07); background:#1c1c1e}
.shot figcaption{margin-top:8px; font-size:13px}
.shot.dialog{background:var(--paper2); border:1px solid var(--rule-soft);
  border-radius:10px; padding:28px 24px 18px; text-align:center}
.shot.dialog img{width:auto; max-width:min(320px,100%); margin:0 auto;
  border:0; border-radius:12px; box-shadow:0 6px 18px rgba(30,42,56,.18)}
.shot.dialog figcaption{margin-top:14px}
.shotlist{margin:14px 0 0; padding-left:0; list-style:none; counter-reset:shot}
.shotlist li{position:relative; padding-left:34px; margin:8px 0; font-size:15px}
.shotlist li::before{
  counter-increment:shot; content:counter(shot);
  position:absolute; left:0; top:.35em;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

footer{
  margin-top:60px; padding:22px 0 60px; border-top:1px solid var(--rule);
  color:var(--ink-soft); font-size:14px; text-align:center;
}
footer a{color:var(--ink-soft); border-bottom-color:rgba(93,107,122,.3)}
footer a:hover{color:var(--ink-strong)}

@media (max-width:520px){
  .wrap{padding:0 18px}
  table.spec th, table.spec td{display:block; width:100%; white-space:normal}
  table.spec td{border-top:0; padding-top:0}
}


.shot .zone{
  position:absolute; border:2px solid var(--accent); border-radius:6px;
  box-shadow:0 0 0 2px rgba(247,242,230,.55);
  pointer-events:none;
}
.shot .zone::before{
  content:attr(data-n);
  position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:12.5px; font-weight:700; line-height:24px; text-align:center;
  box-shadow:0 0 0 2px rgba(247,242,230,.9);
}
.shot .zone.plain::before{content:none}
.shot .tag{
  position:absolute; transform:translate(-50%,-50%);
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
  box-shadow:0 0 0 2px rgba(247,242,230,.9);
}
.shot .tag.arrow{font-size:17px; padding:1px 10px 3px}
@media(max-width:520px){
  .shot .zone::before{width:18px;height:18px;line-height:18px;font-size:10px;left:-9px}
  .shot .tag{font-size:10px; padding:2px 7px}
  .shot .tag.arrow{font-size:14px; padding:1px 7px 2px}
}


h2 .n{
  display:inline-flex; width:25px; height:25px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-family:var(--text); font-size:13px; font-weight:700;
  align-items:center; justify-content:center;
  margin-right:10px; vertical-align:3px;
}


.card.has-shot{position:relative}
.card .peek{
  display:inline-block; margin-top:9px; padding:0; font:inherit; font-size:12.5px;
  background:none; border:0; border-bottom:1px dashed rgba(31,95,160,.45);
  color:var(--accent); cursor:pointer;
}
.card .peek:hover{color:var(--accent-ink); border-bottom-color:var(--accent-ink)}
.card .pop{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(17,27,38,.55);
  opacity:0; visibility:hidden; transition:opacity .15s ease;
}
.card.open .pop{opacity:1; visibility:visible}
.pop-inner{
  position:relative; width:min(880px,94vw); max-height:90vh; overflow:auto;
  background:var(--paper2); border:1px solid var(--rule); border-radius:8px;
  padding:12px 12px 6px; box-shadow:0 18px 50px rgba(17,27,38,.35);
}
.pop-inner img{display:block; width:100%; height:auto; border-radius:4px; background:#1c1c1e}
.pop-inner b{display:block; font-family:var(--pen); font-size:15px; margin:10px 4px 0; color:var(--ink-strong)}
.pop-inner span{display:block; font-size:13px; color:var(--ink-soft); margin:2px 4px 8px}
.pop-close{
  position:absolute; right:10px; top:10px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:var(--paper); color:var(--ink-strong);
  border:1px solid var(--rule); font-size:17px; line-height:1; cursor:pointer;
  box-shadow:0 1px 4px rgba(17,27,38,.25);
}
.pop-close:hover{background:#fff}


.shot .frame{position:relative; display:block}
.shot.narrow{max-width:520px}
.card .more{display:block; margin-top:6px; font-size:12.5px}
section.block ol.setup3{margin:16px 0 0; padding-left:1.9em}
section.block ol.setup3 li{margin-bottom:14px; line-height:1.95}
section.block ol.setup3 li:last-child{margin-bottom:0}
section.block ol.setup3 + .note{margin-top:16px}
.card ol.setup3{margin:8px 0 0; padding-left:1.3em; font-size:14px}
.card ol.setup3 li{margin-bottom:6px}
.card ol.setup3 li:last-child{margin-bottom:0}

.slots{list-style:none; margin:18px 0 0; padding:0;
       border:1px solid var(--rule); border-radius:4px; overflow:hidden; background:var(--paper2)}
.slots li{display:flex; flex-wrap:wrap; align-items:center; gap:12px;
          padding:14px 18px; border-top:1px solid var(--rule-soft)}
.slots li:first-child{border-top:0}
.slots .dot{width:9px; height:9px; border-radius:50%; background:var(--rule); flex:none}
.slots li.on .dot{background:var(--green)}
.slots .who{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; color:var(--ink-strong)}
.slots .when{font-size:13.5px; color:var(--ink-soft); flex:1 1 auto}
.slots .btn{margin-top:0; padding:5px 14px; font-size:13.5px}
.slots .empty{color:var(--ink-soft); font-size:14.5px}

.shot.demo{margin-top:20px}
.shot.demo img{border-radius:6px}

.card .paid{margin:6px 0 10px; font-size:13px; font-weight:700; color:var(--accent)}
.card .paid.free{font-weight:600; color:var(--ink-soft)}

.shot .zp-index-1{left:77.0%; top:2.0%; width:22.0%; height:5.0%}
.shot .zp-index-2{left:0.4%; top:28.6%; width:44.0%; height:3.4%}
.shot .zp-index-3{left:0.4%; top:32.0%; width:99.2%; height:21.0%}
.shot .zp-index-4{left:0.4%; top:53.0%; width:99.2%; height:46.2%}
.shot .zp-index-5{left:0.4%; top:10.2%; width:40.5%; height:17.2%}
.shot .zp-index-6{left:0.4%; top:53.0%; width:99.2%; height:46.2%}
.shot .zp-index-7{left:74%; top:53.0%}
.shot .zp-table-1{left:3.5%; top:16.8%; width:49.0%; height:7.2%}
.shot .zp-table-2{left:87.5%; top:17.9%; width:9.5%; height:5.2%}
.shot .zp-table-3{left:8.6%; top:43.4%; width:82.2%; height:7.0%}
.shot .zp-table-4{left:8.6%; top:50.6%; width:82.2%; height:19.0%}
.shot .zp-table-5{left:64.8%; top:89.2%; width:32.2%; height:7.6%}
.shot .zp-send-1{left:0.7%; top:28.6%; width:6.4%; height:3.4%}
.shot .zp-send-2{left:9%; top:25.4%}
.shot .zp-quote-1{left:77.4%; top:2.0%; width:9.2%; height:5.0%}
.shot .zp-quote-2{left:82%; top:9.6%}
.shot .zp-pullback-1{left:86.9%; top:2.0%; width:8.6%; height:5.0%}
.shot .zp-pullback-2{left:91.0%; top:9.6%}