:root{
  --bg:#f7f8fc;
  --ink:#141a2e;
  --ink-2:#4d5670;
  --ink-3:#8a92aa;
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.9);
  --line:rgba(20,30,60,.08);
  --line-2:rgba(20,30,60,.16);
  --violet:#6f5cff;
  --cyan:#1fb6e8;
  --pink:#ff7ab8;
  --accent:#ff4fa3;
  --accent-soft:rgba(255,79,163,.12);
  --grad:linear-gradient(120deg,var(--violet),var(--cyan));
  --r-lg:18px; --r-md:13px; --r-sm:10px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root:not([data-theme="light"]){}
:root[data-theme="dark"]{}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:15px;line-height:1.75;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;min-height:100vh;
  padding-bottom:calc(108px + env(safe-area-inset-bottom));
}

/* ===== animated background ===== */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,#ffffff 0%,var(--bg) 60%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;will-change:transform}
.b1{width:56vmax;height:56vmax;left:-18vmax;top:-22vmax;
  background:radial-gradient(circle at 40% 40%,#c9befe 0%,rgba(201,190,254,0) 65%);
  animation:drift1 26s ease-in-out infinite alternate}
.b2{width:50vmax;height:50vmax;right:-20vmax;top:10vh;
  background:radial-gradient(circle at 50% 50%,#b3ecff 0%,rgba(179,236,255,0) 65%);
  animation:drift2 32s ease-in-out infinite alternate}
.b3{width:44vmax;height:44vmax;left:20vw;bottom:-28vmax;
  background:radial-gradient(circle at 50% 50%,#ffd1e6 0%,rgba(255,209,230,0) 65%);
  animation:drift3 38s ease-in-out infinite alternate;opacity:.65}
@keyframes drift1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vw,22vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-14vw,-16vh) scale(1.1)}}
.grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(20,30,60,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,30,60,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 30%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 55% at 50% 30%,#000 30%,transparent 100%);
  opacity:.6}
.noise{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px}

.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:26px 16px 32px}

/* ===== header ===== */
header{margin-bottom:22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--glass);margin-bottom:12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:clamp(26px,7vw,40px);font-weight:800;margin:0 0 8px;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
header p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.75;max-width:56ch}

.cols{display:grid;grid-template-columns:1fr;gap:14px;min-width:0}
.cols > *{min-width:0}
@media (min-width:920px){
  .cols{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:22px}
  .cols > div:last-child{position:sticky;top:20px}
  body{padding-bottom:40px}
}

/* ===== glass ===== */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -28px rgba(20,30,60,.35),0 1px 2px rgba(20,30,60,.04)}

/* ===== segmented ===== */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;min-width:0;padding:4px;
  margin-bottom:14px;border-radius:var(--r-md)}
.seg button{min-width:0;overflow:hidden;border:1px solid transparent;background:transparent;color:var(--ink-2);
  border-radius:var(--r-sm);padding:9px 4px;cursor:pointer;font-family:inherit;min-height:52px;
  transition:background .18s,color .18s,box-shadow .18s}
.seg button b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.seg button em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.7;letter-spacing:.02em}
.seg button[aria-pressed="true"]{color:var(--ink);background:#fff;border-color:var(--line);
  box-shadow:0 0 0 1px rgba(111,92,255,.28),0 8px 22px -10px rgba(111,92,255,.55),0 1px 2px rgba(20,30,60,.06)}

/* ===== stage ===== */
.stage{position:relative;padding:22px 16px 16px;min-width:0;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:14px;min-height:240px;overflow:hidden;
  background:linear-gradient(180deg,rgba(236,239,248,.9),rgba(226,230,242,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(20,30,60,.04),0 18px 40px -28px rgba(20,30,60,.35)}
.stage.is-empty{justify-content:center;padding:40px 18px}
.stage.is-empty .hold,.stage.is-empty .actual{display:none!important}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.stage.is-empty::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--a),transparent 0 62%,var(--violet) 78%,var(--cyan) 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{--a:360deg}}
.stage.over{box-shadow:0 0 0 2px var(--accent)}
.hold{position:relative;line-height:0;max-width:100%;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.hold.dragging{cursor:grabbing}
#preview{display:block;max-width:100%;height:auto;border-radius:4px;background-color:#fff;
  background-image:
    linear-gradient(45deg,#d6d9e3 25%,transparent 25%,transparent 75%,#d6d9e3 75%),
    linear-gradient(45deg,#d6d9e3 25%,transparent 25%,transparent 75%,#d6d9e3 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;
  box-shadow:0 0 0 1px rgba(20,30,60,.12),0 0 50px -8px rgba(111,92,255,.28),0 24px 50px -28px rgba(20,30,60,.5);
  -webkit-touch-callout:none}
.tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;padding:2px 10px;border-radius:20px;
  white-space:nowrap;letter-spacing:.03em}
.actual{display:flex;align-items:flex-end;gap:9px;color:var(--ink-3);font-size:11px;font-family:var(--mono);letter-spacing:.06em}
.actual canvas{display:block;background:#fff;border-radius:2px;
  background-image:
    linear-gradient(45deg,#d6d9e3 25%,transparent 25%,transparent 75%,#d6d9e3 75%),
    linear-gradient(45deg,#d6d9e3 25%,transparent 25%,transparent 75%,#d6d9e3 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;box-shadow:0 0 0 1px rgba(20,30,60,.12)}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;width:100%}
.drop.hide{display:none}
.drop strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.drop p{margin:0;font-size:12.5px;color:var(--ink-2);max-width:30ch;line-height:1.7}

.alert{margin-top:10px;background:var(--accent-soft);border:1px solid rgba(255,79,163,.4);
  color:var(--ink);border-radius:var(--r-md);padding:11px 13px;font-size:12.5px;line-height:1.65}
.alert.hide{display:none}

/* ===== buttons ===== */
.b{border:1px solid var(--line);background:var(--glass-2);color:var(--ink);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;min-height:46px;
  box-shadow:0 1px 2px rgba(20,30,60,.05);
  transition:background .16s,border-color .16s,transform .12s,box-shadow .16s}
.b:hover{background:#fff;border-color:var(--line-2)}
.b:active{transform:translateY(1px)}
.b:disabled{opacity:.4;cursor:not-allowed}
.b.solid{position:relative;border:0;color:#fff;font-weight:700;background:var(--grad);
  box-shadow:0 12px 28px -12px rgba(111,92,255,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.b.solid:hover{filter:brightness(1.06);background:var(--grad)}
.b.solid:disabled{filter:saturate(.25);box-shadow:none}
.b.ghost{border-color:var(--line-2)}
.b.big{padding:13px 28px;font-size:15px}

.acts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.acts #fitSafe{grid-column:1/-1;border-color:rgba(111,92,255,.4);
  background:linear-gradient(120deg,rgba(111,92,255,.12),rgba(31,182,232,.10)),#fff}
@media (min-width:520px){.acts{grid-template-columns:repeat(3,1fr)}}

/* ===== cards ===== */
.card{padding:17px 16px;margin-top:14px}
.card h2{font-size:12px;font-weight:600;margin:0 0 12px;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--mono);color:var(--ink-2)}
.card + .card{margin-top:12px}
.field{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.field label{font-size:13px;color:var(--ink-2)}
.field .v{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:500;letter-spacing:.02em}
.note{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.7}
.toggles{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-height:40px;color:var(--ink-2)}
.check input{accent-color:var(--violet);width:18px;height:18px;margin:0}
details{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
summary{font-size:12.5px;color:var(--ink-2);cursor:pointer;list-style:none;min-height:32px;line-height:32px}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋ ";color:var(--ink-3)}
details[open] summary::before{content:"− "}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(20,30,60,.12)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--grad);border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2),0 4px 14px -2px rgba(111,92,255,.6);margin-top:-9px}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(20,30,60,.12)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--violet);border:2px solid #fff}
input[type=range]:disabled{opacity:.35}

input[type=text]{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 10px;font-family:var(--mono);
  font-size:16px;background:#fff;color:var(--ink);width:86px;min-width:0;text-align:center}

/* ===== thumbs ===== */
.films{margin-top:16px}
.films h2{font-family:var(--mono);font-size:11px;font-weight:500;margin:0 0 8px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.thumb{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;cursor:pointer;overflow:hidden;padding:0;box-shadow:0 1px 2px rgba(20,30,60,.05)}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
.thumb[aria-pressed="true"]{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 6px 16px -6px rgba(111,92,255,.6)}
.thumb .n{position:absolute;left:0;bottom:0;background:rgba(20,26,46,.8);color:#fff;font-family:var(--mono);
  font-size:9.5px;padding:0 5px;border-top-right-radius:5px;line-height:15px}
.thumb .x{position:absolute;right:2px;top:2px;width:19px;height:19px;border-radius:50%;background:rgba(20,26,46,.7);
  color:#fff;border:0;font-size:12px;line-height:19px;padding:0;cursor:pointer}

/* ===== bottom bar ===== */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(247,248,252,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -20px rgba(20,30,60,.25);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.bar .in{max-width:1060px;margin:0 auto;display:flex;gap:8px;align-items:center}
.bar .in .b.solid{flex:1;font-size:14.5px}
.bar .st{max-width:1060px;margin:7px auto 0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.bar .st.warn{color:var(--accent)}
@media (min-width:920px){
  .bar{position:static;margin-top:12px;padding:14px 16px 12px;border-radius:var(--r-lg);
    background:var(--glass);border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -28px rgba(20,30,60,.35),0 1px 2px rgba(20,30,60,.04)}
  .bar .in{flex-wrap:wrap}
  .bar .in .b.solid{flex:1 1 100%;order:3;min-height:50px}
  .bar .in input[type=text]{flex:1}
  .bar .in .b.ghost{order:2}
  .bar .st{margin-top:8px}
}

.guide{margin-top:16px;padding:17px 18px}
@media (min-width:920px){.guide{margin-top:22px}}
.guide h2{font-family:var(--mono);font-size:12px;font-weight:600;margin:0 0 8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.guide ul{margin:0;padding-left:1.15em;color:var(--ink-2)}
.guide li{margin:6px 0;font-size:13px;line-height:1.75}
.guide li::marker{color:var(--violet)}
footer{margin-top:24px;text-align:center}

.hidden{display:none!important}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .blob,.eyebrow i,.stage.is-empty::before{animation:none!important}
  *{transition:none!important}
}

/* ===== sub pages / footer nav ===== */
.sitenav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:26px 0 8px;font-size:12.5px}
.sitenav a{color:var(--ink-2);text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent}
.sitenav a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.copy{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);text-align:center;line-height:1.8}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.01em;font-size:15px}
.brand img{width:22px;height:22px;border-radius:6px}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.back{font-size:12.5px;color:var(--ink-2);text-decoration:none;border:1px solid var(--line);background:var(--glass-2);
  padding:8px 13px;border-radius:999px;white-space:nowrap}
.back:hover{background:#fff;border-color:var(--line-2)}
.page{max-width:760px;margin:0 auto}
.article{padding:26px 22px 30px}
@media (min-width:640px){.article{padding:34px 38px 40px}}
.article h1{font-size:clamp(23px,6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.article .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:22px}
.article .lead{font-size:15px;color:var(--ink-2);line-height:1.9;margin:0 0 22px}
.article h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:32px 0 10px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink)}
.article h2:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.article h3{font-size:14.5px;font-weight:700;margin:20px 0 6px;color:var(--ink)}
.article p{margin:0 0 14px;font-size:14.5px;line-height:1.95;color:var(--ink)}
.article ul,.article ol{margin:0 0 14px;padding-left:1.4em;font-size:14.5px;line-height:1.9}
.article li{margin:4px 0}
.article li::marker{color:var(--violet)}
.article a{color:var(--violet);text-decoration:underline;text-decoration-color:rgba(111,92,255,.35);text-underline-offset:3px}
.article table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 18px;background:#fff;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.article th,.article td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.article th{background:rgba(111,92,255,.06);font-weight:600;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.article tr:last-child td{border-bottom:0}
.article td.num{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.tblwrap{overflow-x:auto}
.cta{display:flex;justify-content:center;margin:30px 0 4px}
.cta .b{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.faq dt{font-weight:700;margin:16px 0 4px;font-size:14.5px}
.faq dd{margin:0 0 6px;color:var(--ink);font-size:14.5px;line-height:1.9}
.faq dt::before{content:"Q. ";color:var(--violet);font-family:var(--mono);font-weight:500}
.article .small{font-size:12.5px;color:var(--ink-3)}

/* ===== ad slots ===== */
.ad{margin:16px 0 0;text-align:center;min-width:0;overflow:hidden}
.ad:empty,.ad:not(:has(ins)){display:none}
.ad ins{display:block;margin:0 auto}