.mph{--mph-bg:var(--background-color,#050505);--mph-panel:var(--card-color,#0e0e0e);--mph-stage:#080808;--mph-line:#ffffff12;--mph-line-2:#ffffff1f;--mph-ink:var(--color,#eaeaea);--mph-ink-2:#eaeaea9e;--mph-ink-3:#eaeaea66;--mph-gold:var(--primary,#d4af37);--mph-gold-hi:var(--primary-hover,#f5d76e);--mph-gold-soft:#d4af371f;--mph-gold-line:#d4af3752;--mph-title:var(--title,#fff);--mph-top-h:56px;grid-template-rows:var(--mph-top-h) minmax(0, 1fr);border:1px solid var(--mph-line);background:var(--mph-panel);width:min(1480px,100% - 32px);height:calc(100dvh - 104px);min-height:520px;color:var(--mph-ink);font-family:var(--font-sans);touch-action:manipulation;border-radius:20px;margin:92px auto 0;display:grid;position:relative;overflow:hidden}:root[data-theme=light] .mph{--mph-bg:#050505;--mph-panel:#0e0e0e;--mph-ink:#eaeaea;--mph-gold:#d4af37;--mph-gold-hi:#f5d76e;--mph-title:#fff}.mph--loading{background:linear-gradient(var(--mph-panel), var(--mph-panel)) top / 100% var(--mph-top-h) no-repeat, var(--mph-stage)}.mph.is-dragover:after{content:"Drop to open";z-index:30;border:1.5px dashed var(--mph-gold-line);color:var(--mph-gold-hi);letter-spacing:.02em;pointer-events:none;background:#050505d1;border-radius:16px;place-items:center;font-size:.95rem;display:grid;position:absolute;inset:8px}.mph-btn{letter-spacing:-.005em;white-space:nowrap;height:38px;transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:0 .95rem;font-size:.86rem;font-weight:550;display:inline-flex}.mph-btn:active:not(:disabled){transform:scale(.97)}.mph-btn:disabled{opacity:.45;cursor:not-allowed}.mph-btn--ghost{color:var(--mph-ink);box-shadow:inset 0 0 0 1px var(--mph-line-2)}.mph-btn--gold{background:var(--mph-gold);color:#15110a}@media (hover:hover) and (pointer:fine){.mph-btn--ghost:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--mph-gold-line)}.mph-btn--gold:hover:not(:disabled){background:var(--mph-gold-hi)}}.mph-btn--lg{border-radius:12px;height:46px;padding:0 1.4rem;font-size:.95rem}.mph-btn--sm{height:32px;padding:0 .7rem;font-size:.8rem}.mph-btn--block{width:100%}.mph-iconbtn{width:38px;height:38px;color:var(--mph-ink-2);transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);border-radius:10px;place-items:center;display:inline-grid}.mph-iconbtn--sm{border-radius:8px;width:32px;height:32px}.mph-iconbtn:disabled{opacity:.35;cursor:not-allowed}.mph-iconbtn.is-on{background:var(--mph-gold-soft);color:var(--mph-gold-hi)}@media (hover:hover) and (pointer:fine){.mph-iconbtn:hover:not(:disabled){background:var(--mph-line);color:var(--mph-ink)}}.mph-spin{animation:.9s linear infinite mph-spin}@keyframes mph-spin{to{transform:rotate(360deg)}}.mph-show-sm{display:none}.mph-top{border-bottom:1px solid var(--mph-line);justify-content:space-between;align-items:center;gap:.75rem;min-width:0;padding:0 .6rem;display:flex}.mph-top__group{align-items:center;gap:.25rem;display:flex}.mph-top__export{gap:.45rem}.mph-select{height:38px;box-shadow:inset 0 0 0 1px var(--mph-line-2);color:var(--mph-ink);font:inherit;appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") right .7rem center no-repeat,0 0;border:0;border-radius:10px;padding:0 1.9rem 0 .75rem;font-size:.82rem}.mph-select option{background:#111}.mph-select:disabled{opacity:.45}.mph-body{grid-template-columns:84px minmax(0,1fr) 320px;grid-template-areas:"rail center panel";min-height:0;display:grid}.mph-rail{border-right:1px solid var(--mph-line);scrollbar-width:none;flex-direction:column;grid-area:rail;gap:4px;padding:10px 8px;display:flex;overflow-y:auto}.mph-tool{color:var(--mph-ink-3);letter-spacing:.01em;transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);border-radius:12px;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 9px;font-size:.68rem;font-weight:550;display:flex}.mph-tool:disabled{opacity:.35;cursor:not-allowed}.mph-tool.is-on{background:var(--mph-gold-soft);color:var(--mph-gold-hi);box-shadow:inset 0 0 0 1px #d4af3738}@media (hover:hover) and (pointer:fine){.mph-tool:hover:not(:disabled):not(.is-on){background:var(--mph-line);color:var(--mph-ink)}}.mph-center{background:var(--mph-stage);grid-area:center;min-width:0;min-height:0;position:relative}.mph-panel{border-left:1px solid var(--mph-line);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;grid-area:panel;min-height:0;padding:18px 18px 28px;overflow-y:auto}.mph-panel[hidden]{visibility:hidden;display:block}.mph-stage{position:absolute;inset:0}.mph-canvas-wrap{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:0;overflow:hidden}.mph-canvas-wrap.is-brush{cursor:none}.mph-canvas-wrap.is-pan{cursor:grab}.mph-canvas-wrap.is-pan:active{cursor:grabbing}.mph-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.mph-cursor{pointer-events:none;opacity:0;will-change:transform;border:1px solid #ffffffd9;border-radius:50%;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #0000008c,inset 0 0 0 1px #00000059}.mph-cursor:after{content:"";background:var(--mph-gold-hi);border-radius:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;position:absolute;top:50%;left:50%}.mph-handle{cursor:grab;touch-action:none;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:absolute;top:-22px;left:-22px}.mph-handle span{opacity:0;border-radius:50%;width:10px;height:10px}.mph-handle:active{cursor:grabbing}.mph-handle:focus-visible{outline:none}.mph-handle:focus-visible span{opacity:1;box-shadow:0 0 0 2px var(--mph-gold)}.mph-badge{box-shadow:inset 0 0 0 1px var(--mph-line-2);color:var(--mph-ink);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;background:#0a0a0ad9;border-radius:999px;padding:.3rem .7rem;font-size:.72rem;font-weight:600;position:absolute;top:12px;left:50%;transform:translate(-50%)}.mph-zoom{box-shadow:inset 0 0 0 1px var(--mph-line);background:#0e0e0ee6;border-radius:11px;align-items:center;gap:2px;padding:3px;display:flex;position:absolute;bottom:12px;right:12px}.mph-zoom__val{min-width:44px;height:32px;color:var(--mph-ink-2);font-variant-numeric:tabular-nums;border-radius:8px;place-items:center;padding:0 .3rem;font-size:.74rem;display:inline-grid}@media (hover:hover) and (pointer:fine){.mph-zoom__val:hover{background:var(--mph-line);color:var(--mph-ink)}}.mph-status{max-width:calc(100% - 160px);box-shadow:inset 0 0 0 1px var(--mph-line);color:var(--mph-ink-2);pointer-events:none;background:#0e0e0ee6;border-radius:9px;align-items:center;gap:.45rem;padding:.38rem .7rem;font-size:.74rem;line-height:1.3;display:inline-flex;position:absolute;bottom:12px;left:12px}.mph-status--ok:before{content:"";background:var(--mph-gold);border-radius:50%;flex:none;width:6px;height:6px}.mph-status--warn{color:#e8c26a}.mph-toast{z-index:5;color:#f1c7c7;background:#1a0f10;border-radius:10px;align-items:center;gap:.75rem;width:max-content;max-width:calc(100% - 24px);padding:.55rem .55rem .55rem .9rem;font-size:.82rem;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #dc5a5a59}.mph-toast__close{border-radius:7px;flex:none;place-items:center;width:28px;height:28px;font-size:1.1rem;line-height:1;display:grid}.mph-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.85rem;padding:1.5rem;display:flex;position:absolute;inset:0}.mph-empty__icon{background:var(--mph-gold-soft);width:58px;height:58px;color:var(--mph-gold-hi);border-radius:16px;place-items:center;display:grid;box-shadow:inset 0 0 0 1px #d4af3738}.mph-empty__title{letter-spacing:-.015em;color:var(--mph-title);margin-top:.3rem;font-size:1.2rem;font-weight:650}.mph-empty__text{max-width:46ch;color:var(--mph-ink-2);font-size:.88rem;line-height:1.55}.mph-empty__hint{color:var(--mph-ink-3);font-size:.76rem}.mph-empty__error{color:#f1c7c7;max-width:44ch;font-size:.9rem;line-height:1.55}.mph-panel__head{justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:1rem;display:flex}.mph-panel__title{letter-spacing:-.01em;color:var(--mph-title);font-size:.98rem;font-weight:650}.mph-panel__desc{color:var(--mph-ink-3);margin-top:.25rem;font-size:.78rem;line-height:1.45}.mph-group{border-top:1px solid var(--mph-line);margin-top:1.1rem;padding-top:1rem}.mph-group__title{color:var(--mph-ink-3);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem;font-size:.66rem;font-weight:650}.mph-hint{color:var(--mph-ink-3);margin-top:.35rem;font-size:.74rem;line-height:1.45}.mph-note{box-shadow:inset 0 0 0 1px var(--mph-line);color:var(--mph-ink-2);background:#ffffff06;border-radius:10px;margin:.4rem 0 .9rem;padding:.6rem .75rem;font-size:.76rem;line-height:1.5}.mph-note--warn{color:#e9d39a;background:#d4af370f;box-shadow:inset 0 0 0 1px #d4af3733}.mph-row{justify-content:space-between;align-items:center;gap:.75rem;margin-top:.6rem;display:flex}.mph-row .mph-hint{margin:0}.mph-slider{margin-bottom:.85rem}.mph-slider.is-disabled{opacity:.4}.mph-slider__head{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.15rem;display:flex}.mph-slider__label{color:var(--mph-ink-2);font-size:.8rem}.mph-slider__value{min-width:42px;color:var(--mph-ink);font-variant-numeric:tabular-nums;text-align:right;border-radius:6px;padding:.1rem .35rem;font-size:.76rem}.mph-slider__value:disabled{cursor:default;color:var(--mph-ink-3)}@media (hover:hover) and (pointer:fine){.mph-slider__value:hover:not(:disabled){background:var(--mph-line)}}.mph-range{--track:#ffffff1a;appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:28px;margin:0;display:block}.mph-range:disabled{cursor:not-allowed}.mph-range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--track) var(--from), var(--mph-gold) var(--from), var(--mph-gold) var(--to), var(--track) var(--to));border-radius:3px;height:3px}.mph-range::-moz-range-track{background:linear-gradient(to right, var(--track) var(--from), var(--mph-gold) var(--from), var(--mph-gold) var(--to), var(--track) var(--to));border-radius:3px;height:3px}.mph-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;transition:transform var(--dur-fast) var(--ease-out);background:#f1efe8;border:0;border-radius:50%;margin-top:-7.5px;box-shadow:0 0 0 1px #0006,0 2px 6px #00000080}.mph-range::-moz-range-thumb{background:#f1efe8;border:0;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 1px #0006,0 2px 6px #00000080}.mph-range:active::-webkit-slider-thumb{transform:scale(1.12)}.mph-range:focus-visible{outline:none}.mph-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #d4af378c}.mph-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #d4af378c}.mph-toggle{margin-bottom:.85rem}.mph-toggle.is-disabled{opacity:.45}.mph-toggle__row{cursor:pointer;justify-content:space-between;align-items:center;gap:.75rem;min-height:32px;display:flex}.mph-toggle__label{color:var(--mph-ink);font-size:.84rem}.mph-switch{appearance:none;cursor:pointer;width:36px;height:21px;transition:background var(--dur-fast) var(--ease-out);background:#ffffff24;border-radius:999px;flex:none;position:relative}.mph-switch:after{content:"";width:16px;height:16px;transition:transform var(--dur-base) var(--ease-out);background:#f1efe8;border-radius:50%;position:absolute;top:2.5px;left:2.5px}.mph-switch:checked{background:var(--mph-gold)}.mph-switch:checked:after{background:#15110a;transform:translate(15px)}.mph-switch:disabled{cursor:not-allowed}.mph-seg{box-shadow:inset 0 0 0 1px var(--mph-line);background:#ffffff08;border-radius:11px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:3px;margin-bottom:.9rem;padding:3px;display:grid}.mph-seg__btn{min-width:0;min-height:44px;color:var(--mph-ink-2);transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:5px 2px;font-size:.7rem;font-weight:550;line-height:1.15;display:flex}.mph-seg__btn span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.mph-seg__btn.is-on{background:var(--mph-gold-soft);color:var(--mph-gold-hi);box-shadow:inset 0 0 0 1px #d4af3740}@media (hover:hover) and (pointer:fine){.mph-seg__btn:hover:not(.is-on){color:var(--mph-ink)}}.mph-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:1.1rem;display:grid}.mph-preset{box-shadow:inset 0 0 0 1px var(--mph-line);color:var(--mph-ink-2);text-align:center;transition:box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);border-radius:11px;flex-direction:column;gap:6px;padding:5px 5px 7px;font-size:.7rem;font-weight:550;display:flex}.mph-preset.is-on{box-shadow:inset 0 0 0 1.5px var(--mph-gold);color:var(--mph-gold-hi)}.mph-preset__swatch{aspect-ratio:4/3;background:linear-gradient(135deg,#6f5a4c,#c9a58d 55%,#e8d6c4);border-radius:7px;display:block}.mph-preset__swatch[data-preset=natural]{background:linear-gradient(135deg,#5f4a3e,#c8a088 55%,#f0dcca)}.mph-preset__swatch[data-preset=cinematic]{background:linear-gradient(135deg,#12343a,#5f6e66 50%,#e0a26a)}.mph-preset__swatch[data-preset=warm]{background:linear-gradient(135deg,#7a4a2a,#d99a66 55%,#f6d7a8)}.mph-preset__swatch[data-preset=cool]{background:linear-gradient(135deg,#2c3e55,#8aa2b8 55%,#dce7f0)}.mph-preset__swatch[data-preset=vintage]{background:linear-gradient(135deg,#5a5048,#a89a82 55%,#e4d8bc)}.mph-preset__swatch[data-preset=bw]{background:linear-gradient(135deg,#1a1a1a,#7a7a7a 55%,#e6e6e6)}.mph-preset__swatch[data-preset=contrast]{background:linear-gradient(135deg,#0a0a0a,#a8664a 50%,#fff2e0)}.mph-preset__swatch[data-preset=soft]{background:linear-gradient(135deg,#a88a7e,#e2c4b6 55%,#fbefe8)}@media (hover:hover) and (pointer:fine){.mph-preset:hover:not(.is-on){box-shadow:inset 0 0 0 1px var(--mph-line-2);color:var(--mph-ink)}}.mph-swatches{margin-bottom:.4rem}.mph-swatches__row{flex-wrap:wrap;gap:8px;margin-top:.4rem;display:flex}.mph-swatch{cursor:pointer;border-radius:50%;width:30px;height:30px;position:relative;box-shadow:inset 0 0 0 1px #ffffff26}.mph-swatch.is-on{box-shadow:0 0 0 2px var(--mph-panel), 0 0 0 3.5px var(--mph-gold)}.mph-swatch--custom{background:conic-gradient(#e44,#ec4,#4e6,#4ce,#46e,#e4c,#e44);place-items:center;display:grid;overflow:hidden}.mph-swatch--custom input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.mph-swatch--custom:focus-within{outline:2px solid var(--mph-gold);outline-offset:2px}.mph-about{width:min(1120px,100% - 32px);color:var(--color,#eaeaea);margin:4rem auto 5rem}.mph-about__title{letter-spacing:-.015em;color:var(--title,#fff);margin-bottom:1.5rem;font-size:1.35rem;font-weight:650}.mph-about__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;display:grid}.mph-about h3{color:var(--primary,#d4af37);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem;font-size:.8rem;font-weight:650}.mph-about p{color:var(--subtitle-gray,#888);font-size:.92rem;line-height:1.65}@media (max-width:1100px){.mph-body{grid-template-columns:76px minmax(0,1fr) 290px}}@media (max-width:899px){.mph{--mph-top-h:52px;width:calc(100% - 16px);height:calc(100dvh - 74px - 88px - env(safe-area-inset-bottom,0px));border-radius:16px;min-height:460px;margin-top:74px}.mph-top{gap:.25rem;padding:0 .4rem}.mph-hide-sm{display:none}.mph-show-sm{display:inline}.mph-top .mph-btn{width:40px;padding:0}.mph-select{padding-right:1.6rem;font-size:.78rem}.mph-body{grid-template:"center"minmax(0,1fr)"rail""panel"/minmax(0,1fr)}.mph-rail{border-right:0;border-top:1px solid var(--mph-line);overscroll-behavior-x:contain;flex-direction:row;gap:2px;padding:6px;overflow:auto hidden}.mph-tool{flex:1 0 64px;padding:7px 4px 6px;font-size:.66rem}.mph-panel{border-left:0;border-top:1px solid var(--mph-line);max-height:32dvh;padding:14px 14px 20px}.mph-panel.is-collapsed,.mph-panel[hidden]{display:none}.mph-status{max-width:calc(100% - 150px);font-size:.7rem}.mph-about__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}.mph-about{margin:2.5rem auto 7rem}.mph-range::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9.5px}.mph-range::-moz-range-thumb{width:22px;height:22px}}@media (max-width:380px){.mph-iconbtn{width:34px}}@media (prefers-reduced-motion:reduce){.mph-spin{animation-duration:2s}}