:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--surface:#f6f6f7;--surface-raised:#eeeef0;--border:#dcdce0;--border-strong:#c2c2c8;--text:#1a1a1d;--text-muted:#55555c;--text-faint:#70707a;--accent:#d19a24;--accent-text:#8a5a00;--stage-surround:#767676;--stage-surround-text:#fff;--radius:6px;--gap:16px;--font:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;line-height:1.7}.app{max-width:1100px;margin:0 auto;padding:24px 20px 64px}.app__title{flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 20px;font-size:1.25rem;display:flex}.app__provisional{color:var(--text-faint);border:1px solid var(--border-strong);border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:400}.legal{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:24px;padding:12px 16px;font-size:.82rem}.legal__short{margin:0}.legal__lead{color:var(--accent-text)}.legal__privacy{color:var(--text-muted);margin:4px 0 0}.legal__details{margin-top:8px}.legal__summary{cursor:pointer;color:var(--text-muted);width:-moz-fit-content;width:fit-content;font-size:.8rem}.legal__summary:hover{color:var(--text)}.legal__body{border-top:1px solid var(--border-strong);margin-top:12px;padding-top:12px}.legal__heading{color:var(--accent-text);margin:16px 0 6px;font-size:.85rem}.legal__heading:first-child{margin-top:0}.legal__paragraph{color:var(--text-muted);margin:0 0 8px}.legal__list{color:var(--text-muted);margin:0 0 8px;padding-left:1.2em}.legal__item{margin-bottom:4px}.stage{background:var(--stage-surround);border-radius:var(--radius);padding:28px 24px}.compare{grid-template-columns:1fr 1fr;align-items:start;gap:24px;display:grid}.compare:has(>.panel[hidden]){grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto}.panel[hidden]{display:none}.panel{text-align:center;gap:8px;margin:0;display:grid}.panel__label{color:var(--stage-surround-text);order:-1;font-size:.8rem}.panel{perspective:1400px}.panel__canvas{transform-origin:50%;will-change:transform;border-radius:2px;width:100%;height:auto;display:block;box-shadow:0 2px 10px #00000059}@media (max-width:560px){.compare{grid-template-columns:1fr}}.dropzone{border:1px dashed var(--border-strong);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px;padding:12px 14px;display:flex}.dropzone.is-dragover{border-style:solid;border-color:var(--accent);background:var(--surface)}.dropzone__button{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;white-space:nowrap;padding:6px 16px;font-size:.85rem}.dropzone__button:hover{background:var(--surface-raised)}.dropzone__hint{color:var(--text-muted);margin:0;font-size:.78rem}.dropzone__message{color:var(--text-muted);flex-basis:100%;margin:0;font-size:.8rem;line-height:1.6}.dropzone__message.is-error{color:#8a1c08;border-radius:var(--radius);background:#fdeeea;padding:8px 12px}.controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;gap:12px 24px;margin-bottom:16px;padding:14px 16px;display:grid}.field{grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;font-size:.8rem;display:grid}.field[hidden]{display:none}.field__label{color:var(--text);white-space:nowrap}.field__note{color:var(--text-faint);order:9;grid-column:1/-1;font-size:.7rem;line-height:1.5}.field__value{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:3.5em}.field input[type=range]{width:100%;min-width:90px}.field input[type=color]{border:1px solid var(--border-strong);cursor:pointer;background:0 0;border-radius:4px;width:40px;height:26px;padding:0}.field select{border:1px solid var(--border-strong);background:var(--bg);color:var(--text);border-radius:4px;grid-column:2/-1;padding:4px 6px;font-size:.8rem}.field--swatch{grid-column:1/-1;grid-template-columns:auto 1fr}.swatches{flex-wrap:wrap;gap:6px;display:flex}.swatch{border:1px solid var(--border-strong);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:3px 10px 3px 4px;font-size:.75rem;display:inline-flex}.swatch:hover{background:var(--surface-raised)}.swatch.is-selected{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}.swatch__chip{border:1px solid #0003;border-radius:50%;width:18px;height:18px}.export{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px;padding:14px 16px;font-size:.8rem;display:flex}.export__label{font-weight:700}.export__run{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);color:var(--text);cursor:pointer;padding:6px 16px;font-size:.82rem}.export__run:hover:not(:disabled){background:var(--surface-raised)}.export__run:disabled{opacity:.5;cursor:default}.export__option{color:var(--text-muted);align-items:center;gap:5px;display:inline-flex}.export__option[hidden]{display:none}.export__note{color:var(--text-faint);flex-basis:100%;margin:0;font-size:.72rem;line-height:1.6}.export__message{color:var(--text-muted);flex-basis:100%;margin:0;font-size:.78rem;line-height:1.6}.export__message.is-error{color:#8a1c08;border-radius:var(--radius);background:#fdeeea;padding:8px 12px}.layers{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:8px;margin-bottom:16px;padding:14px 16px;font-size:.8rem;display:grid}.layers__label{font-weight:700}.layers__bar{flex-wrap:wrap;gap:8px;display:flex}.layers__add{border:1px solid var(--border-strong);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;padding:5px 14px;font-size:.78rem}.layers__add:hover{background:var(--surface-raised)}.layers__note,.layers__empty{color:var(--text-faint);margin:0;font-size:.72rem;line-height:1.6}.layers__error:empty{display:none}.layers__error{border-radius:var(--radius);color:#8a1c08;background:#fdeeea;margin:0;padding:8px 12px;line-height:1.6}.layers__list{gap:6px;display:grid}.layer{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 10px;display:flex}.layer.is-hidden{opacity:.5}.layer__name{white-space:nowrap;font-weight:700}.layer__mask,.layer__clear,.layer__remove{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;max-width:14em;padding:3px 10px;font-size:.75rem;overflow:hidden}.layer__mask:hover,.layer__clear:hover,.layer__remove:hover{background:var(--surface-raised)}.layer__clear[hidden],.layer__coverage[hidden],.layer__value[hidden],.layer__color[hidden],.layer__strength[hidden]{display:none}.layer__color{border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;border-radius:4px;width:34px;height:22px;padding:0}.layer__coverage,.layer__value{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.layer__strength{flex:80px;min-width:80px;max-width:150px}.layer__remove{margin-left:auto}.layer__warnings:empty{display:none}.layer__warnings{flex-basis:100%}.layer__note{background:var(--surface-raised);color:var(--text-muted);border-radius:4px;margin:4px 0 0;padding:6px 10px;font-size:.72rem;line-height:1.6}.layer__warning{color:#7a4b00;background:#fff6e6;border-radius:4px;margin:4px 0 0;padding:6px 10px;font-size:.72rem;line-height:1.6}@media (max-width:720px){.layer{grid-template-columns:auto 1fr auto}}.flip{margin-bottom:24px}.flip__heading{margin:0 0 12px;font-size:.95rem}.flip__bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px;padding:12px 16px;font-size:.8rem;display:flex}.flip__label{font-weight:700}.flip__slider{flex:180px;min-width:140px}.flip__value{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:3em}.flip__hint{color:var(--text-faint);flex-basis:100%;font-size:.72rem}.flip__stage{background:var(--stage-surround);border-radius:var(--radius);place-items:center;padding:40px 24px;display:grid;overflow:visible}.book{perspective:1600px;perspective-origin:60%}.book__stack{transform-style:preserve-3d;width:var(--book-width,320px);position:relative}.book__page,.book__face{transform-style:preserve-3d;position:absolute;inset:0}.book__page--body{position:relative}.book__sheet{transform-style:preserve-3d;transform-origin:100%;position:absolute;inset:0}.book__face{backface-visibility:hidden}.book__face--inside{transform:rotateY(180deg)}.book__canvas{width:100%;height:auto;display:block;box-shadow:0 2px 12px #0006}.footer{border-top:1px solid var(--border);color:var(--text-faint);flex-wrap:wrap;gap:4px 12px;margin-top:24px;padding-top:12px;font-size:.72rem;display:flex}.footer code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.footer__link{color:var(--accent-text);text-underline-offset:2px;text-decoration:underline}.footer__link:hover{color:var(--text)}