:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:var(--lightningcss-light,#eef1f5)var(--lightningcss-dark,#0d1016);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#161b23);--line:var(--lightningcss-light,#d7dde6)var(--lightningcss-dark,#2a323d);--text:var(--lightningcss-light,#1b2430)var(--lightningcss-dark,#dbe3ec);--muted:var(--lightningcss-light,#64748b)var(--lightningcss-dark,#8b98a8);--control:var(--lightningcss-light,#eef1f6)var(--lightningcss-dark,#202836);--control-hover:var(--lightningcss-light,#e2e8f1)var(--lightningcss-dark,#27313f);--sunken:var(--lightningcss-light,#f1f4f8)var(--lightningcss-dark,#1b212b);--sunken-hover:var(--lightningcss-light,#e6eaf1)var(--lightningcss-dark,#232b36);--accent:var(--lightningcss-light,#3d6fb5)var(--lightningcss-dark,#6f9bd8);--on:var(--lightningcss-light,#d8e4f6)var(--lightningcss-dark,#2b3a4e);--on-text:var(--lightningcss-light,#17335c)var(--lightningcss-dark,#dbe7f6);--anchor-on:var(--lightningcss-light,#86aada)var(--lightningcss-dark,#4a6b96);--error:var(--lightningcss-light,#b3261e)var(--lightningcss-dark,#ff9b9b);--warn-text:var(--lightningcss-light,#7a5312)var(--lightningcss-dark,#f0c07a);--warn-bg:var(--lightningcss-light,#fdf4e3)var(--lightningcss-dark,#2c2418);--warn-line:var(--lightningcss-light,#d9a441)var(--lightningcss-dark,#7d6432);--scrim:var(--lightningcss-light,#141a2466)var(--lightningcss-dark,#06080cb8);--shadow:var(--lightningcss-light,#141e322e)var(--lightningcss-dark,#00000080);--float:var(--lightningcss-light,#ffffffd9)var(--lightningcss-dark,#161b23d1);--float-solid:var(--lightningcss-light,#fffffff7)var(--lightningcss-dark,#161b23f5);--swatch-line:var(--lightningcss-light,#0000002e)var(--lightningcss-dark,#ffffff2e);font-family:system-ui,Hiragino Sans,Noto Sans JP,sans-serif}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}#root{height:100vh}.layout{grid-template-rows:100%;grid-template-columns:300px 1fr;height:100%;display:grid;overflow:hidden}.panel{background:var(--panel);border-right:1px solid var(--line);padding:20px;overflow-y:auto}.panel h1{margin:0;font-size:15px}.panel h2{color:var(--muted);margin:0 0 8px;font-size:11.5px;font-weight:600}.panel section{margin-top:22px}.panel label{align-items:center;gap:8px;margin-bottom:8px;font-size:12px;display:flex}.note{color:var(--muted);margin:4px 0 0;font-size:11px;line-height:1.6}.error{color:var(--error);white-space:pre-wrap;font-size:11.5px}.buttons{gap:8px;display:flex}button{border:1px solid var(--line);background:var(--control);color:var(--text);font:inherit;cursor:pointer;border-radius:6px;flex:1;padding:8px 12px;font-size:12px}button:hover:not(:disabled){background:var(--control-hover)}button:disabled{opacity:.45;cursor:default}dl{grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:11px;display:grid}dt{color:var(--muted)}dd{font-variant-numeric:tabular-nums;margin:0}.viewer{min-width:0;min-height:0;overflow:hidden}.viewer canvas{display:block;position:absolute;inset:0}select{border:1px solid var(--line);background:var(--control);width:100%;color:var(--text);font:inherit;border-radius:6px;padding:8px 10px;font-size:12px}.field{margin-bottom:14px}.field-head{justify-content:space-between;align-items:baseline;margin-bottom:4px;font-size:12px;display:flex}.field-value{color:var(--muted);font-variant-numeric:tabular-nums}.field input[type=range]{width:100%;accent-color:var(--accent)}.logo{color:var(--text);justify-content:center;align-items:center;gap:10px;display:flex}.logo-text{letter-spacing:-.01em;font-size:15px}.logo-text b{font-weight:600}.logo-text i{color:var(--muted);font-style:normal;font-weight:400}.choice{border:1px solid var(--line);border-radius:6px;gap:0;display:flex;overflow:hidden}.choice button{background:0 0;border:none;border-radius:0;flex:1;padding:5px 10px;font-size:12px}.choice button+button{border-left:1px solid var(--line)}.choice button.on{background:var(--on);color:var(--on-text)}.debug{border-top:1px solid var(--line);margin-top:26px;padding-top:14px}button.link{color:var(--muted);cursor:pointer;background:0 0;border:none;flex:none;padding:0;font-size:12px}button.link:hover{color:var(--text)}.debug dl{margin-top:10px}.panel{flex-direction:column;display:flex}.panel section{flex:none}.warn{color:var(--warn-text);background:var(--warn-bg);border-left:2px solid var(--warn-line);border-radius:0 4px 4px 0;margin:4px 0 10px;padding:8px 10px;font-size:12px;line-height:1.6}.disclaimer{border-top:1px solid var(--line);color:var(--muted);margin-top:12px;padding-top:10px;font-size:11px;line-height:1.65}.disclaimer-head{color:var(--text);margin-bottom:4px;font-weight:600;display:block}.disclaimer p{margin:0 0 6px}.disclaimer p:last-child{margin-bottom:0}.fineprint{opacity:.75;margin-top:10px;font-size:10.5px;line-height:1.55}button.secondary{width:100%;color:var(--muted);background:0 0}button.secondary:hover:not(:disabled){background:var(--sunken);color:var(--text)}.credit{color:var(--muted);justify-content:center;align-items:baseline;gap:8px;margin-top:auto;padding-top:22px;font-size:11px;display:flex}.credit b{color:var(--text);letter-spacing:.06em;font-weight:600}.field-label{align-items:center;gap:4px;display:inline-flex}button.reset{width:18px;height:18px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;padding:0;font-size:12px;line-height:1}button.reset:hover{background:var(--sunken-hover);color:var(--text)}.overlay{background:var(--scrim);z-index:10;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.dialog{background:var(--panel);border:1px solid var(--line);width:min(480px,100%);max-height:90vh;box-shadow:0 18px 50px var(--shadow);border-radius:10px;padding:22px 24px;overflow-y:auto}.dialog h2{color:var(--text);margin:0 0 12px;font-size:14px;font-weight:600}.dialog ul{margin:0 0 12px;padding-left:1.2em;font-size:12px;line-height:1.75}.dialog li{margin-bottom:6px}.dialog p{margin:0 0 12px;font-size:12px;line-height:1.75}.dialog .fineprint{color:var(--muted)}.dialog .buttons{margin-top:18px}.dialog .buttons button{padding:9px 12px}.view-tools{z-index:1;border:1px solid var(--line);background:var(--float);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:8px;align-items:center;gap:14px;padding:7px 12px;display:flex;position:absolute;top:12px;right:12px}.view-tools button{background:var(--control);flex:none;padding:4px 10px;font-size:12px}.view-tools button.theme{width:26px;padding:4px 0;font-size:13px;line-height:1}.view-tools label{color:var(--muted);gap:5px;margin:0;font-size:12px}.view-tools label:hover{color:var(--text)}@media (width<=720px){#root{height:auto;min-height:100dvh}.layout{grid-template-rows:auto auto;grid-template-columns:1fr;height:auto;min-height:100dvh;overflow:visible}.viewer{order:-1;height:50dvh;min-height:260px}.panel{border-right:none;border-top:1px solid var(--line);padding:16px;overflow:visible}.field input[type=range]{height:28px}.choice button{padding:9px 10px}button{padding:10px 12px}.view-tools{gap:10px;padding:6px 10px;top:8px;right:8px}.dialog{padding:18px 18px 20px}}.anchors{grid-template-columns:repeat(3,1fr);gap:3px;width:84px;display:grid}.anchors button{aspect-ratio:1;border:1px solid var(--line);background:var(--sunken);border-radius:3px;flex:none;width:100%;padding:0}.anchors button.on{background:var(--anchor-on);border-color:var(--accent)}.anchors button:hover:not(.on){background:var(--control-hover)}.view-tools .color{display:flex;position:relative}.view-tools .swatch{border:1px solid var(--line);border-radius:4px;width:22px;height:22px;padding:0}.palette{z-index:2;border:1px solid var(--line);background:var(--float-solid);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:8px;grid-template-columns:repeat(4,22px);gap:5px;padding:8px;display:grid;position:absolute;top:28px;right:0}.palette button{border:1px solid var(--swatch-line);border-radius:4px;width:22px;height:22px;padding:0}.palette button.on{outline:2px solid var(--accent);outline-offset:1px}.palette .custom{color:var(--muted);grid-column:1/-1;align-items:center;gap:6px;margin:2px 0 0;font-size:11px;display:flex}.palette input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:4px;width:22px;height:22px;padding:0}.palette input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.palette input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}