:root{--bg: #f4f6f8;--panel: #fff;--panel-2: #f8fafb;--canvas: #e9edf1;--line: #e1e7ec;--line-2: #d5dde3;--line-3: #eef2f5;--ink: #1d252c;--muted: #5b6875;--hover: #f3f6f8;--acc: #00c1a2;--acc-strong: #00a88c;--primary: #007d6e;--primary-hover: #006b5e;--sel: #e3f7f3;--sel-line: #b8ebe1;--sel-ink: #00695c;--danger: #b42318;--danger-line: #f1c4bf;--danger-bg: #fdf1f0;--code-bg: #1d252c;--code-ink: #e6ebf2;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Helvetica, Arial, sans-serif;--mono: ui-monospace, Menlo, Consolas, monospace;--shadow-board: 0 1px 2px rgba(29, 37, 44, .12), 0 8px 24px rgba(29, 37, 44, .12);--wrap: 980px;--left: 400px;--gap: 16px;--pad: 16px;--label: 64px;color-scheme:light}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}ul,ol{list-style:none}a{color:var(--primary)}a:hover{color:var(--primary-hover)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}[hidden]{display:none !important}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);overflow-x:clip}h1,h2,h3,strong{font-weight:700}code,kbd,pre{font-family:var(--mono)}:focus-visible{outline:2px solid var(--acc-strong);outline-offset:2px}.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.small{color:var(--muted);font-size:12px}.sp_only{display:none}.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.i-fill{fill:currentColor;stroke:none}.app-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px max(var(--pad),(100% - var(--wrap))/2 + var(--pad));background:var(--panel);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:7px;background:var(--acc)}.brand-mark svg{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.app-header h1{display:flex;flex-direction:column;min-width:0;font-size:15px;line-height:1.3}.h1-sub{font-weight:400;font-size:12px;color:var(--muted)}.lang-switch{display:flex;gap:4px}.lang-switch a{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:12px;line-height:1.2;text-decoration:none}.lang-switch a:hover{background:#f0f4f7;color:var(--ink)}.lang-switch a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}.wrap{display:grid;grid-template-columns:var(--left) minmax(0, 1fr);gap:var(--gap);align-items:start;max-width:var(--wrap);margin:0 auto;padding:20px var(--pad)}.panel-settings{grid-column:1;grid-row:1}.panel-editor{grid-column:1;grid-row:2}.panel-preview{grid-column:2;grid-row:1/span 2;position:sticky;top:var(--pad)}.panel-code{grid-column:1/-1;grid-row:3}.panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px}.hd{padding:12px 16px;border-bottom:1px solid var(--line)}.hd h2{display:flex;align-items:center;gap:8px;font-size:14px}.num{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--sel);color:var(--sel-ink);font-size:12px;font-weight:700}.body{padding:14px 16px 16px}.body>:first-child{margin-top:0}.hr{height:1px;margin:14px 0;background:var(--line)}.row{display:flex;align-items:center;gap:10px;margin:10px 0}.row>label{flex:0 0 var(--label);color:var(--muted);font-size:12px}.inp{min-width:0;min-height:34px;padding:6px 9px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:13px}select.inp{font-family:var(--sans)}.inp[readonly]{background:var(--panel-2)}.row .inp{flex:1 1 0;width:auto;min-width:3.5em}.row select.inp{flex:none}.lbl{display:block;margin-top:14px;color:var(--muted);font-size:12px}.lbl+.row{margin-top:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:13px;line-height:1.2;text-decoration:none;white-space:nowrap}.btn:hover{background:#f0f4f7;color:var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}.btn-primary:hover{background:var(--primary-hover);color:#fff}.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}.btn-dark:hover{background:#2c3740;color:#fff}.btn-sm{gap:4px;min-height:28px;padding:0 10px;border-radius:7px;font-size:12px}.btn-sm .i{width:14px;height:14px}.btn.is-done{background:var(--sel);border-color:var(--sel-line);color:var(--sel-ink)}.pills{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px}.pill{min-height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:12px;line-height:1.2}.pill:hover{background:var(--hover)}.pill[aria-pressed=true]{background:var(--sel);border-color:var(--acc-strong);box-shadow:inset 0 0 0 1px var(--acc-strong);color:var(--sel-ink)}.msg{margin-top:8px;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.6}.msg:empty{display:none}.msg.error{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger)}.hint{display:grid;gap:4px;margin-top:12px;color:var(--muted);font-size:12px;line-height:1.6}.hint li{padding-left:1em;text-indent:-1em}.hint li::before{content:"・"}:lang(en) .hint li::before{content:"• "}kbd{display:inline-block;min-width:1.8em;padding:1px 6px;margin-right:2px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--panel);color:var(--ink);font-size:11px;line-height:1.5;text-align:center;text-indent:0}.codes{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px 16px}.codes>div{display:flex;flex-direction:column;min-width:0}.codes .code{flex:1}.code-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;margin-bottom:6px}.code{display:block;padding:12px 14px;border-radius:8px;background:var(--code-bg);color:var(--code-ink);font:12px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:break-word;tab-size:2}.canvas{position:relative;padding:60px 16px;border-radius:10px;background:var(--canvas)}.editor{position:relative;width:260px;height:260px;margin:0 auto;border-radius:8px;background:var(--panel);box-shadow:var(--shadow-board)}.plot{position:absolute;inset:10px;background-image:linear-gradient(to right, var(--line-2) 1px, transparent 1px),linear-gradient(to bottom, var(--line-2) 1px, transparent 1px),linear-gradient(to right, var(--line-3) 1px, transparent 1px),linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);background-size:25% 25%,25% 25%,5% 5%,5% 5%}.plot::before{content:"";position:absolute;inset:0;border:1px solid var(--line-2);pointer-events:none}.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.plot .guide{stroke:var(--muted);stroke-width:1;opacity:.3;vector-effect:non-scaling-stroke}.plot .handle-line{stroke:var(--acc-strong);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}.plot .curve{stroke:var(--primary);stroke-width:2.5;fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}.cp,.lpt{position:absolute;width:14px;height:14px;padding:0;border-radius:50%;transform:translate(-50%, -50%);cursor:grab;touch-action:none}.cp::after,.lpt::after{content:"";position:absolute;inset:-10px;border-radius:50%}.cp{background:var(--acc);border:2px solid #fff;box-shadow:0 0 0 1px var(--acc-strong),0 2px 6px rgba(29, 37, 44, 0.25);z-index:2}.lpt{background:#fff;border:2px solid var(--primary);box-shadow:0 1px 3px rgba(29, 37, 44, 0.25);z-index:3}.plot.is-dragging,.plot.is-dragging *{cursor:grabbing}.editor:not([data-mode=bezier]) .cp{display:none}.editor[data-mode=linear] .plot{cursor:crosshair;touch-action:none}.stage{padding:16px}.board{position:relative;padding:30px 24px 24px;border-radius:8px;background:var(--panel);box-shadow:var(--shadow-board)}.track{position:relative;height:6px;margin-bottom:30px;border-radius:999px;background:var(--line-2)}.knob{position:absolute;left:0;top:50%;z-index:1;width:22px;height:22px;transform:translate(-50%, -50%);border-radius:50%;border:2px solid var(--acc-strong);background:#fff;box-shadow:0 1px 3px rgba(29, 37, 44, 0.2)}.box{position:relative;z-index:1;width:100px;height:100px;border-radius:12px;background:var(--acc)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}.notice{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.6}.ad{margin:0 auto;text-align:center}.guide{max-width:var(--wrap);margin:0 auto;padding:28px var(--pad) 8px}.guide h2{margin:0 0 14px;font-size:17px}.guide h3{margin:26px 0 10px;font-size:14px}.steps{display:grid;gap:10px;counter-reset:step}.steps li{display:grid;grid-template-columns:2em minmax(0, 1fr);gap:2px 10px;counter-increment:step;font-size:13px;line-height:1.7}.steps li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sel);color:var(--sel-ink);font-size:12px;font-weight:700}.steps span{color:var(--muted)}.keys{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:12px}.site-footer{max-width:var(--wrap);margin:0 auto;padding:32px var(--pad) 40px}.footer-links ul{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}.footer-links li+li::before{content:"/";margin-right:12px;color:var(--muted)}.footer-links a{color:var(--muted);text-decoration:none}.footer-links a:hover{text-decoration:underline}address{margin-top:16px;color:var(--muted);font-size:11px;font-style:normal}address a{color:var(--muted)}.toast{position:fixed;left:50%;bottom:24px;z-index:100;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;box-shadow:0 8px 24px rgba(29, 37, 44, 0.3);opacity:0;pointer-events:none;transform:translate(-50%, 12px);transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%, 0)}.toast.error{background:var(--danger)}@media(max-width: 899px){.wrap{grid-template-columns:minmax(0, 1fr)}.panel-settings,.panel-editor,.panel-preview,.panel-code{grid-column:auto;grid-row:auto}.panel-preview{position:static}}@media(max-width: 767px){.sp_only{display:block}.sp_none{display:none}.ad{text-align:left;margin:0}.inp{font-size:16px}.codes{grid-template-columns:minmax(0, 1fr)}.codes .code{white-space:pre;overflow-x:auto}.row-steps{flex-wrap:wrap}}@media(max-width: 600px){.app-header{padding:10px 12px}.h1-sub{display:none}.wrap{padding:12px}.guide,.site-footer{padding-left:12px;padding-right:12px}}@media(prefers-reduced-motion: reduce){.toast{transition:none}}