:root{--p-bg: #ffffff;--p-ink: #22262a;--p-ink-dim: #5a6068;--p-border: #ccd2d9;--p-accent: #2f5e9e;--p-accent-ink: #ffffff;--p-surface: #f2f4f6;--p-warn-bg: #fdf3d7;--p-warn-ink: #6d5200;--p-shadow: 0 8px 28px rgba(0, 0, 0, 0.22)}@media(prefers-color-scheme: dark){:root:not([data-theme=light]){--p-bg: #23272c;--p-ink: #e3e6e9;--p-ink-dim: #9aa1a9;--p-border: #454c54;--p-accent: #4d7fc0;--p-accent-ink: #ffffff;--p-surface: #2c3138;--p-warn-bg: #453a10;--p-warn-ink: #eed88f;--p-shadow: 0 8px 28px rgba(0, 0, 0, 0.55)}}:root[data-theme=dark]{--p-bg: #23272c;--p-ink: #e3e6e9;--p-ink-dim: #9aa1a9;--p-border: #454c54;--p-accent: #4d7fc0;--p-accent-ink: #ffffff;--p-surface: #2c3138;--p-warn-bg: #453a10;--p-warn-ink: #eed88f;--p-shadow: 0 8px 28px rgba(0, 0, 0, 0.55)}body{margin:0}#preview-root{padding:24px 24px 160px}.panel[hidden]{display:none}.panel{position:fixed;right:16px;bottom:16px;z-index:100;width:320px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-border);border-radius:8px;box-shadow:var(--p-shadow);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;font-size:12.5px;line-height:1.5}.panel-titlebar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--p-accent);color:var(--p-accent-ink);border-radius:7px 7px 0 0;cursor:grab;user-select:none;touch-action:none}.panel-titlebar:active{cursor:grabbing}.panel-title{flex:1;font-weight:600}.panel-chip{background:rgba(0,0,0,0);color:inherit;border:1px solid hsla(0,0%,100%,.55);border-radius:4px;width:22px;height:22px;line-height:1;cursor:pointer;font-size:11px}.panel-body{overflow-y:auto;padding:4px 0 10px}.sec{border-bottom:1px solid var(--p-border)}.sec>summary{padding:8px 12px;font-weight:600;cursor:pointer;list-style:none}.sec>summary::before{content:"▸";display:inline-block;margin-right:6px;color:var(--p-ink-dim)}.sec>summary::-webkit-details-marker{display:none}.sec[open]>summary::before{content:"▾"}.sec-inner{padding:2px 12px 10px}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}.row>span:first-child{color:var(--p-ink-dim)}.ctrl{display:inline-flex;align-items:center;gap:4px}.ctrl input[type=number],.ctrl input[type=text],.ctrl select{font:inherit;color:var(--p-ink);background:var(--p-surface);border:1px solid var(--p-border);border-radius:4px;padding:2px 6px}.ctrl input[type=number]{width:4.5em}.ctrl input[type=range]{width:110px;accent-color:var(--p-accent)}.ctrl input[type=color]{width:44px;height:24px;padding:0;border:1px solid var(--p-border);border-radius:4px;background:none}.hint{margin:6px 0;color:var(--p-ink-dim);font-size:11px}.preset-row{display:flex;flex-wrap:wrap;gap:6px}.preset-row button{font:inherit;padding:5px 10px;background:var(--p-surface);color:var(--p-ink);border:1px solid var(--p-border);border-radius:5px;cursor:pointer}.preset-row button:hover{border-color:var(--p-accent);color:var(--p-accent)}.contrast-block{margin-top:10px;padding-top:8px;border-top:1px dashed var(--p-border)}.contrast-list{list-style:none;margin:6px 0;padding:0;font-variant-numeric:tabular-nums}.contrast-list li{display:flex;justify-content:space-between;padding:1px 0}.contrast-list li span:first-child{color:var(--p-ink-dim)}.warnings{margin-top:8px;padding:8px 10px;background:var(--p-warn-bg);color:var(--p-warn-ink);border-radius:5px}.warnings p{margin:2px 0}.output{padding:8px 12px 0}.output-settings{padding-bottom:6px;border-bottom:1px solid var(--p-border);margin-bottom:8px}.theme-seg{display:inline-flex}.theme-seg button{font:inherit;font-size:11px;padding:3px 8px;background:var(--p-surface);color:var(--p-ink);border:1px solid var(--p-border);cursor:pointer}.theme-seg button:first-child{border-radius:4px 0 0 4px}.theme-seg button:last-child{border-radius:0 4px 4px 0}.theme-seg button:not(:first-child){border-left:none}.theme-seg button.is-active{background:var(--p-accent);border-color:var(--p-accent);color:var(--p-accent-ink)}.tabs{display:flex;align-items:center;gap:2px}.tab{font:inherit;font-size:11.5px;padding:4px 10px;background:rgba(0,0,0,0);color:var(--p-ink-dim);border:1px solid rgba(0,0,0,0);border-bottom:none;border-radius:5px 5px 0 0;cursor:pointer}.tab.is-active{background:var(--p-surface);color:var(--p-ink);border-color:var(--p-border)}.copy-btn{margin-left:auto;font:inherit;font-size:11px;padding:3px 10px;background:var(--p-surface);color:var(--p-ink);border:1px solid var(--p-border);border-radius:4px;cursor:pointer}.copy-btn:hover{border-color:var(--p-accent);color:var(--p-accent)}.output-pre{margin:0;padding:8px;height:180px;overflow:auto;background:var(--p-surface);border:1px solid var(--p-border);border-radius:0 5px 5px 5px;font-family:Consolas,Menlo,monospace;font-size:10.5px;line-height:1.45;white-space:pre;tab-size:2}.output-actions{display:flex;gap:6px;margin-top:8px}.output-actions button{flex:1;font:inherit;padding:6px 8px;background:var(--p-accent);color:var(--p-accent-ink);border:none;border-radius:5px;cursor:pointer}.output-actions button:hover{filter:brightness(1.1)}.panel-fab{position:fixed;right:16px;bottom:16px;z-index:100;width:48px;height:48px;border-radius:50%;background:var(--p-accent);color:var(--p-accent-ink);border:none;box-shadow:var(--p-shadow);font-size:22px;cursor:pointer}@media(max-width: 700px){.panel{left:0;right:0;bottom:0;width:auto;max-height:60vh;border-radius:10px 10px 0 0;border-left:none;border-right:none;border-bottom:none}.panel-titlebar{border-radius:9px 9px 0 0;cursor:default}#preview-root{padding-bottom:65vh}}