:root{--ink:#252522;--canvas:#fffcfa;--surface-white:#fffefe;--cream:#f7f2ed;--border-soft:#efe6dc;--border-firm:#e6dbd1;--muted-warm:#6b6964;--coral:#f2805d;--coral-pressed:#d96544;--error:#c6372e;--bg:var(--canvas);--fg:var(--ink);--muted:var(--muted-warm);--border:var(--border-soft);--border-strong:var(--border-firm);--surface:var(--cream);--surface-elevated:var(--surface-white);--accent:var(--coral);--on-primary:var(--canvas);--checker-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23e3ded7'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23e3ded7'/%3E%3C/svg%3E");--shadow-elevated:0 6px 24px #2525220f, 0 0 0 1px var(--border-firm);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-pill:999px;--text-2xs:.75rem;--text-xs:.85rem;--text-sm:.9rem;--text-base:.95rem;--text-md:1rem;--text-lg:1.05rem;--text-section-heading:clamp(1.25rem, 2.5vw, 1.5rem);--text-page-heading:clamp(1.5rem, 4vw, 2.25rem);--text-display:clamp(1.75rem, 5vw, 3rem);--ease:cubic-bezier(.4, 0, .2, 1);--duration-fast:.12s;--duration-base:.2s;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;font:16px/1.5 var(--font-sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-reduced-motion:reduce){:root{--duration-fast:0s;--duration-base:0s}*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);min-width:320px;margin:0;padding:0}#root{min-height:100vh}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}button{font:inherit;cursor:pointer}h1,h2,h3{letter-spacing:-.02em;font-weight:600}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-main{flex-direction:column;flex:1;display:flex}.container{width:100%;max-width:640px;padding-inline:var(--space-4);margin:0 auto}.container--wide{max-width:960px}.section{padding-block:var(--space-8)}.section--compact{padding-block:var(--space-6)}.section-heading{font-size:var(--text-section-heading);letter-spacing:-.01em;margin:0 0 var(--space-5);text-align:center}.logo{align-items:center;gap:var(--space-2);color:var(--fg);text-decoration:none;display:inline-flex}.logo__mark{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.logo__mark-img{aspect-ratio:48/46;object-fit:contain;width:22px;height:auto;display:block}.logo__word{font-weight:600;font-size:var(--text-lg);letter-spacing:-.02em;color:var(--fg)}.site-header{border-bottom:1px solid var(--border);background:var(--bg);z-index:10;position:sticky;top:0}.site-header__inner{max-width:1200px;padding:var(--space-4) clamp(var(--space-4), 4vw, var(--space-7));justify-content:space-between;align-items:center;gap:var(--space-4);margin:0 auto;display:flex}.site-header__logo-link{padding:var(--space-2) 0;margin:calc(var(--space-2) * -1) 0;border-radius:var(--radius-sm);align-items:center;text-decoration:none;display:inline-flex}.site-nav{align-items:center;gap:var(--space-6);display:none}.site-nav__link{color:var(--muted);font-size:var(--text-sm);padding:var(--space-3) 0;text-decoration:none;position:relative}.site-nav__link:hover{color:var(--fg)}.site-nav__link:after{content:"";background:var(--accent);width:5px;height:5px;transition:transform var(--duration-fast) var(--ease);position:absolute;bottom:0;left:50%;transform:translate(-50%)rotate(45deg)scale(0)}.site-nav__link:hover:after,.site-nav__link:focus-visible:after{transform:translate(-50%)rotate(45deg)scale(1)}@media (width>=640px){.site-nav{display:flex}}.hero{padding-top:var(--space-7)}.hero__intro{text-align:center;max-width:640px;margin:0 auto var(--space-6)}.hero__heading{font-size:var(--text-display);letter-spacing:-.04em;margin:0 0 var(--space-4);text-wrap:balance;font-weight:600;line-height:1.1}.hero__subheading{color:var(--muted);margin:0;font-size:clamp(1rem,2vw,1.125rem);line-height:1.5}.showcase{margin-top:var(--space-7)}.showcase__track{padding:0 var(--space-4);justify-content:flex-start;align-items:center;gap:var(--space-3);scroll-snap-type:x proximity;scroll-padding-inline:var(--space-4);-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0;list-style:none;display:flex;overflow:auto visible}.showcase__track::-webkit-scrollbar{display:none}.showcase__card{aspect-ratio:4/5;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);scroll-snap-align:center;width:132px;transition:transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);flex:none;overflow:hidden}.showcase__image{object-fit:cover;width:100%;height:100%;display:block}@media (width>=640px){.showcase{overflow-x:clip}.showcase__track{padding:0 var(--space-5);justify-content:center;gap:0;overflow:visible}.showcase__card{width:148px;z-index:var(--z);transform:rotate(calc(var(--r) * .55)) translateY(calc(var(--ty) * .55));margin-left:-28px}.showcase__card:first-child{margin-left:0}.showcase__card:hover{z-index:10;transform:rotate(0)translateY(-6px)scale(1.04);box-shadow:0 12px 24px #2525221a}}@media (width>=1024px){.showcase__card{width:190px;transform:rotate(var(--r)) translateY(var(--ty));margin-left:-44px}}@media (prefers-reduced-motion:reduce){.showcase__card:hover{transform:none}}.upload-zone{border:1.5px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-elevated);box-shadow:var(--shadow-elevated);transition:background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);padding:0}.upload-zone__button{justify-content:center;align-items:center;gap:var(--space-2);width:100%;min-height:220px;padding:clamp(var(--space-7), 10vw, var(--space-9)) var(--space-5);border-radius:var(--radius-lg);color:inherit;text-align:center;background:0 0;border:none;flex-direction:column;display:flex}.upload-zone:hover{box-shadow:0 10px 28px #25252214, 0 0 0 1px var(--border-firm)}.upload-zone--active{background:var(--surface);border-color:var(--accent);outline:2px dashed var(--accent);outline-offset:-12px;border-width:2px;box-shadow:0 0 0 4px #f2805d24}.upload-zone--invalid{border-style:solid;border-color:var(--error);background:var(--surface)}.upload-zone__input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.upload-zone__icon{color:var(--fg);margin-bottom:var(--space-2)}.upload-zone--invalid .upload-zone__icon{color:var(--error)}.upload-zone__label{letter-spacing:-.01em;font-size:clamp(1.05rem,2.5vw,1.25rem);font-weight:600}.upload-zone--invalid .upload-zone__label{color:var(--error)}.upload-zone__sub{color:var(--muted);font-size:var(--text-base);align-items:baseline;gap:var(--space-1);display:inline-flex}.upload-zone__browse{text-underline-offset:2px;color:var(--fg);transition:color var(--duration-fast) var(--ease);font-weight:500;text-decoration:underline}.upload-zone__button:hover .upload-zone__browse{color:var(--coral-pressed)}.upload-zone__hint{margin-top:var(--space-3)}.file-type-hint{color:var(--muted);font-size:var(--text-2xs);letter-spacing:.03em;text-transform:uppercase}.file-type-hint__dot{margin:0 var(--space-2)}.how-it-works{border:1px solid var(--border);border-radius:var(--radius-lg);max-width:560px;box-shadow:var(--shadow-elevated);margin:0 auto;overflow:hidden}.how-it-works__heading{margin:0}.how-it-works__trigger{justify-content:space-between;align-items:center;gap:var(--space-4);width:100%;padding:18px var(--space-5);background:var(--fg);color:var(--on-primary);text-align:left;transition:opacity var(--duration-fast) var(--ease);border:none;display:flex}.how-it-works__trigger:hover{opacity:.9}.how-it-works__trigger:focus-visible{outline-color:var(--on-primary);outline-offset:-3px}.how-it-works__trigger-title{letter-spacing:-.01em;font-size:clamp(1.05rem,2.5vw,1.2rem);font-weight:600}.how-it-works__trigger-icon{width:9px;height:9px;transition:transform var(--duration-base) var(--ease);border-bottom:1.5px solid;border-right:1.5px solid;flex-shrink:0;transform:rotate(45deg)}.how-it-works--open .how-it-works__trigger-icon{transform:rotate(-135deg)}.how-it-works__panel-track{transition:grid-template-rows var(--duration-base) var(--ease);grid-template-rows:0fr;display:grid}.how-it-works--open .how-it-works__panel-track{grid-template-rows:1fr}.how-it-works__panel{background:var(--surface);min-height:0;overflow:hidden}.how-it-works__panel-inner{padding:var(--space-5) var(--space-5) var(--space-6)}.how-it-works__feature{align-items:flex-start;gap:var(--space-4);padding-bottom:var(--space-5);margin-bottom:var(--space-5);border-bottom:1px solid var(--border);display:flex}.how-it-works__feature-n{letter-spacing:-.02em;color:var(--border);flex-shrink:0;font-size:clamp(2.25rem,9vw,3rem);font-weight:700;line-height:1}.how-it-works__feature-content{min-width:0}.how-it-works__feature-icon{color:var(--accent);margin-bottom:var(--space-2);display:inline-flex}.how-it-works__feature-title{letter-spacing:-.01em;margin:0 0 var(--space-2);font-size:clamp(1.2rem,3vw,1.4rem);font-weight:600}.how-it-works__feature-body{color:var(--muted);font-size:var(--text-sm);max-width:42ch;margin:0;line-height:1.6}.how-it-works__rest{gap:var(--space-5);grid-template-columns:1fr;margin:0;padding:0;list-style:none;display:grid}@media (width>=560px){.how-it-works__rest{grid-template-columns:repeat(3,1fr)}}.how-it-works__step{min-width:0}.how-it-works__step-head{align-items:center;gap:var(--space-2);color:var(--muted);margin-bottom:var(--space-2);display:flex}.how-it-works__step-icon{display:inline-flex}.how-it-works__step-n{font-size:var(--text-2xs);letter-spacing:.05em;font-weight:600}.how-it-works__step-title{font-size:var(--text-lg);letter-spacing:-.01em;margin:0 0 6px}.how-it-works__step-body{color:var(--muted);font-size:var(--text-sm);margin:0;line-height:1.6}#converter .section-heading{margin-bottom:var(--space-5)}#about .section-heading{margin-bottom:var(--space-2)}.about-text{color:var(--muted);text-align:center;max-width:640px;font-size:var(--text-md);margin:0 auto;line-height:1.7}.workspace{gap:var(--space-5);flex-direction:column;display:flex}@media (width>=768px){.workspace--split{align-items:start;gap:var(--space-6);grid-template-columns:minmax(0,380px) minmax(0,1fr);display:grid}}.workspace__media,.workspace__panel{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.file-preview{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.file-preview__frame{border:1px solid var(--border);border-radius:var(--radius-md);width:100%;max-width:360px;max-height:320px;padding:var(--space-3);background:var(--surface);justify-content:center;align-items:center;display:flex;overflow:hidden}.file-preview__image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:296px}.file-metadata{text-align:center;flex-direction:column;align-items:center;gap:2px;width:100%;min-width:0;display:flex}.file-metadata__name{max-width:100%;font-size:var(--text-sm);white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:600;overflow:hidden}.file-metadata__details{font-size:var(--text-xs);color:var(--muted);margin:0}.file-metadata__flag{margin:var(--space-2) 0 0;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--fg);display:inline-flex}.file-metadata__flag:before{content:"";border:1px solid var(--border-firm);background-color:#fff;background-image:var(--checker-image);background-size:8px 8px;border-radius:2px;width:12px;height:12px}.conversion-settings{gap:var(--space-5);background:var(--surface);border-radius:var(--radius-lg);padding:clamp(var(--space-5), 3vw, var(--space-6));flex-direction:column;margin:0;display:flex}.conversion-settings:disabled{opacity:.6}.conversion-settings__title{font-size:var(--text-xs);color:var(--muted);padding:0;font-weight:600}.conversion-settings__group{gap:var(--space-2);flex-direction:column;display:flex}.conversion-settings__group-label{font-size:var(--text-xs);color:var(--muted)}.conversion-settings__hint{font-size:var(--text-xs);color:var(--muted);margin:0;line-height:1.5}.segmented{border:1px solid var(--border-strong);border-radius:var(--radius-sm);display:flex;overflow:hidden}.segmented button{justify-content:center;align-items:center;gap:var(--space-2);background:var(--bg);color:var(--fg);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);border:none;flex:1;min-height:44px;display:inline-flex}.segmented button:disabled{color:var(--muted);cursor:not-allowed}.segmented button+button{border-left:1px solid var(--border-strong)}.segmented button.is-active{background:var(--fg);color:var(--on-primary);font-weight:600}.advanced-disclosure{border-top:1px solid var(--border);padding-top:var(--space-4)}.advanced-disclosure summary{cursor:pointer;font-size:var(--text-xs);color:var(--muted);align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);min-height:44px;list-style:none;display:flex}.advanced-disclosure summary::-webkit-details-marker{display:none}.advanced-disclosure summary:before{content:"";width:7px;height:7px;transition:transform var(--duration-fast) var(--ease);border-bottom:1.5px solid;border-right:1.5px solid;transform:rotate(-45deg)}.advanced-disclosure[open] summary:before{transform:rotate(45deg)}.advanced-disclosure .conversion-settings__group--advanced{padding-top:var(--space-4)}.conversion-settings input[type=range]{width:100%;accent-color:var(--fg);height:28px}.conversion-settings input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.conversion-settings input[type=range]::-moz-range-thumb{border:none;width:24px;height:24px}.conversion-status{align-items:center;gap:var(--space-3);text-align:center;flex-direction:column;display:flex}.conversion-status__text{flex-direction:column;align-items:center;gap:4px;min-height:1.2em;margin:0;display:flex}.conversion-status__headline{align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-base);display:flex}.conversion-status__subtext{color:var(--muted);font-size:var(--text-xs)}.conversion-settings__cta{width:100%}.spinner{border:2px solid var(--border);border-top-color:var(--fg);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.conversion-loader{align-items:center;gap:var(--space-5);max-width:460px;padding-block:var(--space-4);text-align:center;flex-direction:column;margin:0 auto;display:flex}.conversion-loader__preview{aspect-ratio:1;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);width:clamp(84px,20vw,112px);overflow:hidden}.conversion-loader__preview-image{object-fit:contain;width:100%;height:100%;display:block}.conversion-loader__status{gap:var(--space-2);flex-direction:column;display:flex}.conversion-loader__headline{letter-spacing:-.01em;margin:0;font-size:clamp(1.125rem,3vw,1.375rem);font-weight:600}.conversion-loader__subtext{color:var(--muted);font-size:var(--text-sm);margin:0}.conversion-loader__stages{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted);display:flex}.conversion-loader__stage{align-items:center;gap:6px;display:inline-flex}.conversion-loader__stage--active{color:var(--fg);font-weight:600}.conversion-loader__stage-arrow{color:var(--border-strong)}.conversion-loader__stage-dot{border:1.5px solid;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:inline-flex}.conversion-loader__stage--done .conversion-loader__stage-dot{color:var(--fg)}.conversion-loader__stage--active .conversion-loader__stage-dot{border-color:var(--fg);background:var(--fg);animation:stage-pulse 1.6s var(--ease) infinite}@keyframes stage-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}.conversion-loader__track{border:1.5px solid var(--fg);background:var(--surface);border-radius:999px;width:100%;max-width:380px;height:14px;position:relative;overflow:hidden}.conversion-loader__fill{border-radius:inherit;background:var(--fg);width:30%;animation:1.5s cubic-bezier(.4,0,.2,1) infinite loader-sweep;position:absolute;top:0;bottom:0;left:-30%}@keyframes loader-sweep{0%{left:-30%}to{left:100%}}@media (prefers-reduced-motion:reduce){.conversion-loader__fill{width:42%;animation:none;left:0}}.conversion-loader__fact{gap:var(--space-2);flex-direction:column;max-width:380px;min-height:4.5em;display:flex}.conversion-loader__fact-eyebrow{font-size:var(--text-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}.conversion-loader__fact-text{font-size:var(--text-sm);color:var(--fg);animation:fact-fade-in var(--duration-base) var(--ease);margin:0;line-height:1.6}@keyframes fact-fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@media (width>=640px){.conversion-loader{gap:var(--space-6);padding-block:var(--space-6)}.conversion-loader__track{height:16px}}.result-screen{gap:var(--space-6);flex-direction:column;display:flex}.result-screen__intro{text-align:center}.result-screen__heading{font-size:var(--text-page-heading);letter-spacing:-.02em;margin:0 0 var(--space-2)}.result-screen__subheading{color:var(--muted);font-size:var(--text-base);margin:0}.result-screen__body{gap:var(--space-6);flex-direction:column;display:flex}.result-screen__comparison{min-width:0}.result-screen__sidebar{gap:var(--space-5);flex-direction:column;display:flex}.result-screen__actions{gap:var(--space-3);flex-direction:column;order:20;display:flex}.result-screen__download{width:100%;min-height:52px;font-size:var(--text-md)}.result-screen__copy{justify-content:center;align-items:center;gap:var(--space-2);width:100%;font-size:var(--text-sm);display:inline-flex}.result-screen__raster-export{gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border);flex-direction:column;display:flex}.result-screen__raster-export-label{font-size:var(--text-xs);color:var(--muted)}.result-screen__raster-export-buttons{gap:var(--space-2);display:flex}.result-screen__raster-export-buttons .btn{min-height:40px;font-size:var(--text-sm);flex:1}@media (width>=1024px){.result-screen__body{align-items:start;gap:var(--space-7);grid-template-columns:minmax(0,1fr) minmax(260px,320px);display:grid}}.result-screen__preview-error{border:1px solid var(--error);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;gap:var(--space-2);flex-direction:column;display:flex}.result-screen__preview-error-message{color:var(--error);margin:0;font-weight:600}.result-screen__preview-error-hint{color:var(--muted);font-size:var(--text-sm);margin:0}.batch-workspace{gap:var(--space-6);flex-direction:column;display:flex}.batch-workspace__intro{text-align:center}.batch-workspace__heading{font-size:var(--text-page-heading);letter-spacing:-.02em;margin:0 0 var(--space-2)}.batch-workspace__subheading{color:var(--muted);font-size:var(--text-base);margin:0}.batch-workspace__body{gap:var(--space-6);flex-direction:column;display:flex}.batch-workspace__list-column{gap:var(--space-4);flex-direction:column;min-width:0;display:flex}.batch-workspace__panel{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.batch-workspace__actions{gap:var(--space-3);flex-direction:column;display:flex}.batch-workspace__add{align-items:flex-start;gap:var(--space-2);flex-direction:column;display:flex}@media (width>=1024px){.batch-workspace__body{align-items:start;gap:var(--space-7);grid-template-columns:minmax(0,1fr) minmax(260px,320px);display:grid}}.batch-list{border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;margin:0;padding:0;list-style:none;display:flex;overflow:hidden}.batch-list__item{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);display:flex}.batch-list__item:last-child{border-bottom:none}.batch-list__info{flex-direction:column;gap:2px;min-width:0;display:flex}.batch-list__filename{font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.batch-list__meta{font-size:var(--text-xs);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.batch-list__status{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.batch-list__status-text{font-size:var(--text-xs);color:var(--muted)}.batch-list__status-text--converting{color:var(--accent);font-weight:500}.batch-list__status-text--done{color:var(--fg)}.batch-list__status-text--error{color:var(--error)}.batch-list__item--converting{background:var(--surface)}.batch-list__item--error{background:color-mix(in srgb, var(--error) 6%, transparent)}.batch-list__download,.batch-list__remove{padding:var(--space-2);margin:calc(var(--space-2) * -1);font-size:var(--text-xs);color:var(--fg);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;align-items:center;min-height:44px;text-decoration:underline;display:inline-flex}.batch-list__remove{color:var(--muted)}.compare-slider{gap:var(--space-4);flex-direction:column;display:flex}.compare-slider__frame{width:100%;max-height:var(--compare-max-h,min(70vh, 640px));border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);touch-action:pan-x pan-y;cursor:ew-resize;margin-inline:auto;position:relative;overflow:hidden}.compare-slider__frame--fill{max-height:none;margin-inline:0}.compare-slider__layer{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.compare-slider__layer--vector svg{width:100%;height:100%;display:block}.compare-slider__image{object-fit:contain;width:100%;height:100%}.compare-slider__tag{top:var(--space-3);color:var(--on-primary);letter-spacing:.05em;text-transform:uppercase;border-radius:var(--radius-sm);pointer-events:none;background:#252522b8;padding:4px 10px;font-size:.7rem;position:absolute}.compare-slider__tag--left{left:var(--space-3)}.compare-slider__tag--right{right:var(--space-3)}.compare-slider__divider{background:var(--surface-elevated);pointer-events:none;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px);box-shadow:0 0 0 1px #25252280}.compare-slider__handle{background:var(--surface-elevated);width:44px;height:44px;color:var(--fg);border:1.5px solid var(--fg);cursor:ew-resize;touch-action:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.compare-slider__toggle{align-self:center;width:100%;max-width:320px}.result-metadata{gap:var(--space-4) var(--space-5);padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-md);grid-template-columns:repeat(2,1fr);margin:0;display:grid}.result-metadata__row{flex-direction:column;gap:2px;display:flex}.result-metadata__row dt{font-size:var(--text-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.result-metadata__row dd{font-size:var(--text-md);margin:0;font-weight:500}.error-state{align-items:center;gap:var(--space-4);text-align:center;border:1px solid var(--error);border-radius:var(--radius-md);padding:clamp(var(--space-5), 4vw, var(--space-6));flex-direction:column;display:flex}.error-state__icon{color:var(--error);display:inline-flex}.error-state__message{color:var(--error);font-size:var(--text-base);margin:0;font-weight:600}.error-state__hint{margin:calc(var(--space-1) * -1) 0 0;color:var(--muted);font-size:var(--text-xs)}.error-state__actions{gap:var(--space-3);flex-wrap:wrap;justify-content:center;width:100%;display:flex}.btn{min-height:48px;padding-inline:var(--space-5);border-radius:var(--radius-pill);font-size:var(--text-base);transition-property:background-color,color,border-color,transform,opacity;transition-duration:var(--duration-fast);transition-timing-function:var(--ease);font-weight:500}.error-state__actions .btn{flex:1;min-width:140px}.btn:active{transform:scale(.98)}.btn-primary{background:var(--fg);color:var(--on-primary);border:1px solid var(--fg)}.btn-primary:hover:not(:disabled){opacity:.9}.btn-primary:active:not(:disabled){opacity:.82}.btn-primary:disabled{background:var(--border);border-color:var(--border);color:var(--muted);cursor:not-allowed;transform:none}.btn-secondary{background:var(--surface);color:var(--fg);border:1px solid var(--border-strong)}.btn-secondary:hover:not(:disabled){background:var(--surface-elevated)}.btn-secondary:disabled{color:var(--muted);border-color:var(--border);cursor:not-allowed;transform:none}.btn-ghost{color:var(--fg);background:0 0;border:1px solid #0000}.btn-ghost:hover:not(:disabled){background:var(--surface)}.site-header__cta{min-width:0;min-height:44px;padding-inline:var(--space-4);font-size:var(--text-xs);flex:none}.app-notice{color:var(--muted);font-size:var(--text-xs);text-align:center;margin:0}.app-error{color:var(--error);font-size:var(--text-sm);margin:0}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--fg);outline-offset:2px}.segmented button:focus-visible{outline-offset:-3px}.compare-slider__handle:focus-visible{outline:3px solid var(--fg);outline-offset:3px;box-shadow:0 0 0 6px var(--surface-elevated)}[tabindex="-1"]:focus{outline:none}.site-footer{border-top:1px solid var(--border);margin-top:auto}.site-footer__inner{max-width:1200px;padding:var(--space-6) clamp(var(--space-4), 4vw, var(--space-7));align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;margin:0 auto;display:flex}.site-footer__nav{gap:var(--space-5);display:flex}.site-footer__nav-link{color:var(--muted);font-size:var(--text-sm);text-decoration:none}.site-footer__nav-link:hover{color:var(--fg)}.site-footer__note,.site-footer__copyright{color:var(--muted);font-size:var(--text-xs);margin:0}@media (width>=640px){.site-footer__nav{display:none}.site-footer__inner{text-align:left;flex-direction:row;justify-content:space-between}}@media (height<=500px){.site-header__inner{padding-block:var(--space-2)}.section--compact{padding-block:var(--space-4)}.result-screen{gap:var(--space-4)}.result-screen__heading{margin-bottom:4px;font-size:1.375rem}.result-screen__subheading{font-size:.85rem}:root{--compare-max-h:50vh}.hero{padding-top:var(--space-4)}.hero__intro{margin-bottom:var(--space-4)}}.root-error-boundary{justify-content:center;align-items:center;gap:var(--space-4);text-align:center;min-height:100vh;padding:var(--space-6);flex-direction:column;display:flex}.root-error-boundary__message{font-size:var(--text-base);color:var(--fg);font-weight:600}.root-error-boundary__reload{border:1px solid var(--border-firm);border-radius:var(--radius-md);background:var(--accent);color:var(--on-primary);font-size:var(--text-sm);padding:var(--space-3) var(--space-5);cursor:pointer;font-weight:600}.preview-bg--checker{background-color:#fff;background-image:var(--checker-image);background-size:16px 16px}.preview-bg--white{background:#fff}.preview-bg--black{background:#000}.bg-toggle{gap:var(--space-2);flex-direction:column;width:100%;max-width:360px;margin-inline:auto;display:flex}.result-screen__sidebar .bg-toggle{max-width:none}.bg-toggle__label,.bg-toggle__note{font-size:var(--text-xs);color:var(--muted)}.bg-toggle__note{text-align:center}.upload-zone__guidance{align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);text-align:center;flex-direction:column;display:flex}.upload-zone__how,.upload-zone__best,.upload-zone__notice{font-size:var(--text-xs);color:var(--muted);margin:0;line-height:1.5}.upload-zone__best{color:var(--fg)}.upload-zone__notice{margin-top:var(--space-2);color:var(--fg);font-weight:500}.upload-zone__kbd{margin-left:var(--space-1);border:1px solid var(--border-firm);background:var(--surface);color:var(--fg);font:inherit;font-size:var(--text-2xs);border-radius:4px;padding:1px 6px;font-weight:600;display:inline-block}.upload-zone__label--touch,.upload-zone__browse-btn,.upload-zone__how-touch{display:none}@media (hover:none) and (pointer:coarse){.upload-zone__label--pointer,.upload-zone__sub--pointer,.upload-zone__how-pointer{display:none}.upload-zone__label--touch{display:block}.upload-zone__how-touch{display:inline}.upload-zone__browse-btn{min-width:180px;min-height:52px;margin-top:var(--space-2);padding:0 var(--space-6);border-radius:var(--radius-pill);background:var(--fg);color:var(--on-primary);font-size:var(--text-base);justify-content:center;align-items:center;font-weight:600;display:inline-flex}.upload-zone__button{min-height:0;padding-block:var(--space-6)}}.preset-picker{gap:var(--space-3);flex-direction:column;display:flex}.preset-picker__grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));display:grid}.preset-card{align-items:flex-start;gap:var(--space-3);min-height:68px;padding:var(--space-3) var(--space-4);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);display:flex;position:relative}.preset-card:hover{border-color:var(--fg)}.preset-card.is-selected{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}.preset-card__input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.preset-card:has(.preset-card__input:focus-visible){outline:3px solid var(--fg);outline-offset:2px}.preset-card__icon{color:var(--fg);flex-shrink:0;padding-top:1px;display:inline-flex}.preset-card__body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.preset-card__name{font-size:var(--text-base);font-weight:500}.preset-card.is-selected .preset-card__name{font-weight:700}.preset-card__desc{font-size:var(--text-xs);color:var(--muted);line-height:1.4}.preset-card__check{border:1px solid var(--border-strong);width:20px;height:20px;color:var(--on-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.preset-card.is-selected .preset-card__check{background:var(--fg);border-color:var(--fg)}.conversion-settings__reset{min-height:44px;color:var(--fg);font-size:var(--text-xs);text-underline-offset:2px;background:0 0;border:none;align-self:flex-start;padding:0;text-decoration:underline}.result-tabs{align-self:center;width:100%;max-width:320px}.result-screen__main,.result-screen__sidebar{display:contents}.result-screen__comparison,.result-code{order:10;min-width:0}.result-screen__zoombar{order:30;min-width:0}.result-screen__zoombar:empty{display:none}.result-screen__body>.app-error,.result-screen__sidebar>.app-error{order:65}.result-screen__bg{order:31;min-width:0}.result-screen__bg:empty{display:none}.result-screen__bg .bg-toggle{margin-inline:auto}.zoom-controls{gap:var(--space-2);flex-direction:column;width:80%;margin-inline:auto;display:flex}.zoom-controls__slider-row{align-items:center;gap:var(--space-3);width:100%;display:flex}.zoom-controls__slider{min-width:0;accent-color:var(--fg);flex:1;height:28px}.zoom-controls__slider::-webkit-slider-thumb{width:24px;height:24px}.zoom-controls__slider::-moz-range-thumb{border:none;width:24px;height:24px}.zoom-controls__level{text-align:right;min-width:56px;font-weight:600;font-size:var(--text-sm);font-variant-numeric:tabular-nums}.zoom-controls__note{font-size:var(--text-xs);color:var(--muted);text-align:center;margin:0}.result-viewport{max-width:100%;max-height:var(--compare-max-h,min(70vh, 640px));border-radius:var(--radius-md);overscroll-behavior:contain;overflow:auto}.result-viewport__stage{width:100%;margin-inline:auto}.result-details{border:1px solid var(--border);border-radius:var(--radius-md);padding-inline:var(--space-5);order:40}.result-details__summary{cursor:pointer;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:48px;font-size:var(--text-sm);border-radius:var(--radius-sm);font-weight:600;list-style:none;display:flex}.result-details__summary::-webkit-details-marker{display:none}.result-details__summary:after{content:"";width:7px;height:7px;transition:transform var(--duration-fast) var(--ease);border-bottom:1.75px solid;border-right:1.75px solid;flex-shrink:0;margin-right:4px;transform:translateY(-2px)rotate(45deg)}.result-details[open] .result-details__summary:after{transform:translateY(2px)rotate(-135deg)}.result-details .result-metadata{padding:var(--space-2) 0 var(--space-4);border:none}.result-palette{gap:var(--space-3);flex-direction:column;order:50;display:flex}.result-palette__heading{font-size:var(--text-sm);margin:0;font-weight:600}.result-palette__count{color:var(--muted);font-weight:400}.result-palette__list{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.result-palette__item{align-items:center;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--text-xs);padding:4px 12px 4px 4px;display:inline-flex}.result-palette__swatch{border:1px solid var(--border-firm);border-radius:50%;flex-shrink:0;width:24px;height:24px}.result-palette__hex{font-variant-numeric:tabular-nums;letter-spacing:.01em}.result-palette__copy{align-self:flex-start;min-height:44px}.result-screen__secondary{gap:var(--space-3);flex-direction:column;display:flex}.result-screen__open{width:100%}.figma-handoff{gap:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);flex-direction:column;display:flex}.figma-handoff__toggle{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;color:inherit;text-align:left;border-radius:var(--radius-sm);background:0 0;border:none;min-height:44px;padding:0;display:flex}.figma-handoff__heading{font-size:var(--text-sm);margin:0;font-weight:600}.figma-handoff__chevron{transition:transform var(--duration-fast) var(--ease);flex-shrink:0}.figma-handoff__chevron--open{transform:rotate(180deg)}.figma-handoff__steps{padding-left:var(--space-5);gap:var(--space-1);font-size:var(--text-xs);color:var(--muted);flex-direction:column;margin:0;line-height:1.6;display:flex}.figma-handoff__copy{justify-content:center;align-items:center;gap:var(--space-2);width:100%;font-size:var(--text-sm);display:inline-flex}.code-viewer{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.code-viewer__meta{justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted);flex-wrap:wrap;display:flex}.code-viewer__meta .result-screen__copy{width:auto}.quality-notice{gap:var(--space-2);flex-direction:column;width:100%;display:flex}.quality-notice__item{align-items:flex-start;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted);margin:0;line-height:1.6;display:flex}.quality-notice__icon{color:var(--muted);flex-shrink:0;margin-top:2px}.error-state__actions .btn-ghost{min-height:44px;font-size:var(--text-sm);text-underline-offset:2px;text-decoration:underline}.code-viewer__pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);max-height:480px;padding:var(--space-4);white-space:pre;overflow-wrap:normal;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;line-height:1.6;overflow:auto}.code-viewer__pre:focus-visible{outline:3px solid var(--fg);outline-offset:2px}@media (width>=1024px){.result-screen__main,.result-screen__sidebar{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.result-screen__main>*,.result-screen__sidebar>*{order:initial}.result-screen__bg .bg-toggle{max-width:360px;margin-inline:0}}