:root{--page:#e3e2dd;--paper:#f6f4ef;--card:#ffffff;--tint:#eceae4;--tint-strong:#dcdad4;--ink:#33312d;--ink-soft:#4a463f;--muted:#5c584f;--subtle:#5c584f;--faint:#8a8578;--line:#cfccc3;--line-soft:#ddd9d0;--line-faint:#e3e0d8;--track:#e6e3db;--accent:oklch(0.55 0.11 150);--accent-link:oklch(0.48 0.10 150);--accent-link-hover:oklch(0.38 0.10 150);--accent-wash:oklch(0.86 0.06 150);--accent-fill:rgba(88, 160, 120, 0.14);--shadow-card:0 1px 3px rgba(51, 49, 45, 0.12),0 8px 24px rgba(51, 49, 45, 0.08);--shadow-panel:0 1px 3px rgba(51, 49, 45, 0.1);--font:'Zen Maru Gothic',system-ui,-apple-system,'Hiragino Maru Gothic ProN',sans-serif;--app-max:430px;--gutter:22px;color-scheme:light}*,::after,::before{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--page);font-family:var(--font);color:var(--ink)}a{color:var(--accent-link)}a:hover{color:var(--accent-link-hover)}figure,h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}canvas{display:block}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.app{max-width:var(--app-max);margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--paper)}.busy{display:flex;position:fixed;inset:0;z-index:10001;background:rgba(246,244,239,.94);align-items:center;justify-content:center}.busy-stack{display:flex;flex-direction:column;align-items:center;gap:16px}.busy-card{background:var(--card);padding:22px 26px;box-shadow:var(--shadow-card)}.busy-track{width:96px;height:4px;background:var(--track);overflow:hidden;border-radius:999px}.busy-bar{width:36px;height:100%;background:var(--accent);border-radius:999px;animation:1.1s ease-in-out infinite sweep}.busy-text{font-size:15px;font-weight:500;color:var(--muted)}@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}.notice{margin:14px var(--gutter) 0;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:4px;font-size:15px;line-height:1.8;color:var(--ink-soft)}.intro{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:44px}.intro-head{padding:44px 28px 0;display:flex;flex-direction:column;align-items:center;text-align:center}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;letter-spacing:.06em}.rule{width:26px;height:1px;background:var(--line)}.title-wrap{margin-top:16px;position:relative;display:inline-block}.title-wash{position:absolute;left:-6px;right:-6px;bottom:0;height:12px;background:var(--accent-wash);border-radius:999px}.title{position:relative;font-size:clamp(24px, 8.4vw, 34px);font-weight:700;letter-spacing:.06em;line-height:1.25;white-space:nowrap}.lead{margin-top:20px;font-size:17px;font-weight:500;line-height:1.95;color:var(--ink-soft)}.intro-ad{padding:30px 28px 0}.intro-ad-label{font-size:13px;line-height:18px;text-align:center}.intro-cta{padding:28px 28px 6px}.intro-cta-second{padding:32px 28px 0}.note{text-align:center;margin-top:14px;font-size:13px;color:var(--faint)}.intro-demo{padding:30px 28px 0}.intro-demo+.intro-demo{padding-top:18px}.demo-card{background:var(--card);padding:14px;box-shadow:var(--shadow-card)}.demo-frame{position:relative;aspect-ratio:var(--demo-ratio,4 / 3);background:var(--tint-strong);overflow:hidden;touch-action:pan-y}.demo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.demo-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#85817a}.demo-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(51,49,45,.18);cursor:ew-resize}.demo-grip{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:999px;background:var(--card);box-shadow:0 1px 4px rgba(51,49,45,.28)}.demo-grip::after,.demo-grip::before{content:'';position:absolute;top:50%;width:0;height:0;margin-top:-4px;border-top:4px solid transparent;border-bottom:4px solid transparent}.demo-grip::before{left:5px;border-right:5px solid var(--muted)}.demo-grip::after{right:5px;border-left:5px solid var(--muted)}.demo-tag{position:absolute;bottom:8px;font-size:11px;letter-spacing:.1em;padding:4px 9px;border-radius:2px;background:rgba(246,244,239,.9);color:var(--muted);pointer-events:none}.demo-tag-before{left:8px}.demo-tag-after{right:8px;color:var(--accent);font-weight:700}.intro-about{padding:24px 28px 0}.about{font-size:14.5px;line-height:2.05;color:var(--muted)}.promo{margin-top:40px;padding:28px 28px 0;border-top:1px solid var(--line-soft);text-align:center}.promo-title{font-size:18px;font-weight:700;letter-spacing:.04em}.promo-text{margin-top:8px;font-size:14.5px;line-height:1.95;color:var(--muted)}.promo-link{display:block;width:min(300px,100%);margin:16px auto 0;border-radius:8px}.promo-link img{display:block;width:100%;height:auto;border-radius:10px}.promo-link:hover{opacity:.85}.sns-share{margin-top:40px;padding:26px 28px 0;border-top:1px solid var(--line-soft);text-align:center}.sns-share-label{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.22em;color:var(--faint);margin-bottom:16px}.share-rule{width:16px;height:1px;background:var(--line)}.sns-share-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.sns-share-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}.sns-share-button svg{width:20px;height:20px;fill:currentColor}.sns-share-button:hover{border-color:var(--accent);background:var(--accent-fill);color:var(--accent-link)}.sns-share-taittsuu:hover{border-color:#4ecdc4;background:rgba(78,205,196,.1);color:#3aa8a0}.sns-share-threads:hover,.sns-share-x:hover{border-color:#33312d;background:rgba(51,49,45,.06);color:#33312d}.sns-share-misskey:hover{border-color:#99c926;background:rgba(153,201,38,.12);color:#7ba51a}.sns-share-mastodon:hover{border-color:#6364ff;background:rgba(99,100,255,.1);color:#6364ff}.sns-share-bluesky:hover{border-color:#0085ff;background:rgba(0,133,255,.1);color:#0085ff}.sns-share-copy{width:auto;padding:0 16px;font-family:inherit}.sns-share-copy .copy-text{font-size:13px;font-weight:500}.copy-message{display:inline-block;margin-top:12px;padding:6px 14px;font-size:13px;color:var(--accent-link);background:var(--accent-fill);border-radius:999px}.about-page{min-height:100vh;min-height:100dvh;padding:44px var(--gutter) 44px}.about-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:10px}.about-section{margin-top:30px}.about-section h2{font-size:18px;font-weight:700;margin-bottom:10px}.about-section p{font-size:14.5px;line-height:2.05;color:var(--ink-soft)}.about-list{list-style:disc;padding-left:1.5em;font-size:14.5px;line-height:2.05;color:var(--ink-soft)}.about-list li+li{margin-top:6px}.about-page .foot-nav{margin-top:40px}.about-page .copyright{margin-top:28px}.about-link{margin-top:28px;text-align:center;font-size:13.5px}.about-link a{color:var(--accent-link);text-underline-offset:3px}.about-link a:hover{color:var(--accent-link-hover)}.copyright{margin-top:32px;padding:0 28px;text-align:center;font-size:11.5px;letter-spacing:.06em;color:var(--faint)}.btn{font-family:inherit;cursor:pointer;border:none;background:0 0;color:var(--ink);transition:background-color .15s,color .15s,border-color .15s,opacity .15s}.btn:disabled{cursor:default;opacity:.4}.btn-primary{border-radius:4px;padding:15px 30px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;letter-spacing:.06em}.btn-primary:hover:not(:disabled){background:#26241f}.btn-outline{border:1px solid var(--line);border-radius:4px;padding:15px 22px;color:var(--muted);font-size:15px}.btn-outline:hover{background:var(--tint)}.btn-outline-strong{border:2px solid var(--ink);border-radius:4px;color:var(--ink);font-size:15px;font-weight:700;letter-spacing:.06em}.btn-outline-strong:hover{background:var(--tint)}.btn-pill{border:1px solid var(--line);border-radius:999px;padding:12px 17px;color:var(--muted);font-size:13.5px}.btn-pill:hover{background:var(--tint)}.btn-pill-solid,.tools .btn-pill{padding:13px 17px;font-size:13.5px;font-weight:500;background:var(--card);white-space:nowrap}.btn-pill-solid{color:var(--ink)}.btn-pill[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn-tool{border:1px solid var(--line);border-radius:5px;padding:8px 12px;font-size:12.5px;color:var(--muted);background:0 0;white-space:nowrap}.btn-tool:hover{background:var(--tint);color:var(--ink)}.btn-reset{border-radius:999px;padding:13px 15px;color:var(--muted);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}.btn-reset:hover{color:var(--ink)}.btn-huge{display:block;width:100%;border-radius:6px;padding:21px 18px;font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.45}.btn-wide{display:block;width:100%;border-radius:6px;padding:17px;font-size:16px;font-weight:700}.btn-quiet{padding:13px 16px;font-size:14.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.btn-quiet:hover{color:var(--ink)}.btn-gap{margin-top:20px}.btn-gap-sm{margin-top:12px}.step{padding:16px var(--gutter) 40px}.step h2{margin-bottom:8px;font-size:21px;font-weight:700}.hint{margin-bottom:18px;font-size:14.5px;line-height:1.95;color:var(--subtle)}.tools{display:flex;gap:10px;flex-wrap:wrap}.tools-choice{margin-bottom:12px}.tools-sub{gap:8px}.tools-choice .btn-pill{padding:13px 18px;font-size:14px;font-weight:700;background:var(--card);color:var(--ink)}.tools-choice .btn-pill[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}.nav-tight{margin-top:16px}.foot-nav{margin-top:24px;text-align:center}.well{margin-top:16px;background:var(--tint);border-radius:6px;padding:10px}.well-flush{padding:6px}.preview{width:auto;height:auto;max-width:100%;max-height:60vh;margin:0 auto;background:#fff;border-radius:2px}.preview-interactive{touch-action:none}.preview-large{max-height:72vh}.lead-hint{margin-bottom:18px;font-size:17px;font-weight:700;line-height:1.85;color:var(--ink);text-align:center}.picker{display:block;border:3px dashed var(--accent);border-radius:8px;padding:16px;cursor:pointer;background:var(--card);text-align:center}.picker:hover{background:#fbfaf7}.picker:focus-within{outline:3px solid var(--accent);outline-offset:3px}.picker.is-dragover{background:var(--accent-fill);border-style:solid}.picker-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 8px}.picker-plus{font-size:42px;color:var(--accent);font-weight:700;line-height:1}.picker-title{font-size:19px;font-weight:700}.picker-note{font-size:13px;line-height:1.7;color:var(--muted)}.adjust{margin-top:14px;background:var(--card);border-radius:6px;padding:18px 18px 8px;box-shadow:var(--shadow-panel)}.slider-row{margin-bottom:16px;font-size:13.5px;font-weight:700;color:var(--muted)}.slider-row label{display:block}.slider-line{display:flex;align-items:center;gap:10px;margin-top:8px}.slider-line input[type=range]{width:100%;height:28px;accent-color:var(--accent)}.slider-line output{width:40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:400}.adjust-foot{padding-bottom:6px;text-align:center}.hint-center,.step-result{text-align:center}.done-mark{width:54px;height:54px;margin:6px auto 16px;border-radius:999px;background:var(--accent);color:#fff;font-size:28px;font-weight:700;line-height:54px}.step .done-title{margin-bottom:12px;font-size:23px;font-weight:700;line-height:1.55}.modes{display:grid;gap:26px;margin-top:8px;text-align:left}.mode-card{background:var(--card);padding:16px 14px 18px;box-shadow:var(--shadow-card);border-radius:6px}.mode-head{margin-bottom:12px}.mode-title{font-size:19px;font-weight:700;line-height:1.4}.mode-title::before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:999px;background:var(--accent);vertical-align:2px}.mode-desc{margin-top:6px;font-size:13.5px;line-height:1.85;color:var(--muted)}.mode-frame{background:var(--tint);border-radius:6px;padding:6px}.mode-canvas{width:auto;height:auto;max-width:100%;max-height:60vh;margin:0 auto;background:#fff;border-radius:2px}.mode-card.is-source .mode-frame{background:var(--tint-strong)}.mode-tools{display:flex;justify-content:flex-end;margin-top:10px}.mode-card .adjust{margin-top:12px;padding:14px 4px 0;box-shadow:none;border-top:1px solid var(--line-faint);border-radius:0}.mode-card .adjust-foot{padding-bottom:2px}.mode-card .btn-huge{margin-top:12px}.mode-card .saved-note{margin-top:10px;text-align:center}.mode-card .btn-quiet-sm{display:block;margin:6px auto 0;padding:10px 14px;font-size:13.5px}.mode-card .btn-quiet-sm+.btn-quiet-sm{margin-top:-6px}.saved-note{margin-top:14px;font-size:16px;font-weight:700;color:var(--accent-link)}.modal{display:flex;position:fixed;inset:0;z-index:9999;background:rgba(51,49,45,.5);align-items:center;justify-content:center;padding:20px}.modal-body{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--paper);padding:18px}.modal-confirm{width:min(390px,100%);padding:28px 22px 22px;border-radius:8px;text-align:center}.confirm-title{margin-bottom:14px;font-size:20px;font-weight:700}.confirm-text{margin-bottom:24px;font-size:15px;line-height:1.9;color:var(--ink-soft)}.confirm-actions{display:flex;flex-direction:column;gap:12px}@media (max-height:640px){.lead-hint{margin-bottom:14px;font-size:16px}.picker-empty{padding:18px 8px;gap:10px}.picker-plus{font-size:34px}.btn-gap{margin-top:16px}.done-mark{width:44px;height:44px;margin-bottom:12px;font-size:24px;line-height:44px}.step .done-title{margin-bottom:10px;font-size:21px}.mode-canvas{max-height:48vh}}@media (prefers-reduced-motion:reduce){.busy-bar{animation-duration:3s}}