.wrap-tool{--wrap-paper:oklch(.965 .012 88);--wrap-paper-deep:oklch(.925 .018 87);--wrap-ink:oklch(.19 .01 72);--wrap-muted:oklch(.45 .018 72);--wrap-rule:oklch(.25 .012 72);--wrap-soft-rule:oklch(.25 .012 72 / .2);--wrap-red:oklch(.59 .2 31);min-height:100dvh;background:var(--wrap-paper);color:var(--wrap-ink);font-family:Helvetica,Helvetica Neue,Arial,system-ui,sans-serif}.wrap-tool *,.wrap-tool :before,.wrap-tool :after{box-sizing:border-box}.wrap-tool button,.wrap-tool input{font:inherit}.wrap-tool button,.wrap-tool label{-webkit-tap-highlight-color:transparent}.wrap-tool button:focus-visible,.wrap-tool input:focus-visible,.wrap-tool a:focus-visible,.wrap-tool label:has(input:focus-visible){outline:2px solid var(--wrap-red);outline-offset:3px}.wrap-tool__masthead{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:58px;border-bottom:1px solid var(--wrap-rule);background:#f7f3ebf5;padding:0 clamp(18px,3vw,48px)}.wrap-tool__masthead>span,.wrap-tool__back{color:var(--wrap-ink);font-size:.72rem;font-weight:800;text-decoration:none;text-transform:uppercase}.wrap-tool__back:hover{color:var(--wrap-red)}.wrap-tool__local{display:inline-flex;align-items:center;gap:7px;justify-self:end}.wrap-tool__local svg{width:15px;height:15px;color:var(--wrap-red)}.wrap-tool__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.46fr);gap:clamp(28px,6vw,90px);align-items:end;width:min(1560px,calc(100% - 40px));margin:0 auto;border-bottom:1px solid var(--wrap-rule);padding:clamp(46px,7vw,104px)0 clamp(30px,4vw,58px)}.wrap-tool__index{display:block;margin-bottom:12px;color:var(--wrap-red);font-size:.7rem;font-weight:800;text-transform:uppercase}.wrap-tool__intro h2{max-width:none;margin:0;font-size:clamp(3.4rem,9vw,9.5rem);font-weight:700;letter-spacing:-.065em;line-height:.76}.wrap-tool__intro p{max-width:54ch;margin:0;color:var(--wrap-muted);font-size:clamp(.95rem,1.25vw,1.15rem);font-weight:500;line-height:1.48}.wrap-tool__workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:0;width:min(1560px,calc(100% - 40px));margin:0 auto;border-bottom:1px solid var(--wrap-rule)}.wrap-tool__preview-column{min-width:0;border-right:1px solid var(--wrap-rule);padding:clamp(18px,2.5vw,38px) clamp(18px,3vw,48px) 38px 0}.wrap-tool__preview-bar,.wrap-tool__media-readout{display:flex;align-items:center;justify-content:space-between;gap:18px}.wrap-tool__preview-bar{min-height:40px;margin-bottom:14px}.wrap-tool__preview-bar>div{display:flex;align-items:baseline;gap:12px}.wrap-tool__preview-bar strong,.wrap-tool__preview-bar span,.wrap-tool__media-readout{font-size:.7rem;font-weight:800;text-transform:uppercase}.wrap-tool__preview-bar span,.wrap-tool__media-readout span:last-child{color:var(--wrap-muted)}.wrap-tool__icon-button{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--wrap-rule);border-radius:2px;background:0 0;color:var(--wrap-ink);cursor:pointer}.wrap-tool__icon-button:hover{background:var(--wrap-ink);color:var(--wrap-paper)}.wrap-tool__icon-button svg{width:15px;height:15px}.wrap-tool__canvas-shell{display:grid;min-height:min(72vh,880px);place-items:center;overflow:hidden;border:1px solid var(--wrap-rule);background:linear-gradient(90deg,transparent 49.9%,oklch(.8 .018 87/.13) 50%,transparent 50.1%),linear-gradient(transparent 49.9%,oklch(.8 .018 87/.13) 50%,transparent 50.1%),#070f10;padding:clamp(12px,2vw,28px)}.wrap-tool__canvas-shell canvas{display:block;width:auto;max-width:100%;height:auto;max-height:min(68vh,820px);background:var(--wrap-paper-deep);box-shadow:0 22px 70px #00000075}.wrap-tool__media-readout{min-height:48px;border-bottom:1px solid var(--wrap-soft-rule)}.wrap-tool__media-readout span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrap-tool__controls{min-width:0;padding:clamp(18px,2.4vw,34px)0 38px clamp(18px,2.5vw,34px)}.wrap-tool__dropzone{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;min-height:84px;border:1px dashed var(--wrap-rule);border-radius:2px;background:0 0;padding:16px;cursor:pointer;transition:background .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1)}.wrap-tool__dropzone:hover,.wrap-tool__dropzone.is-dragging{border-color:var(--wrap-red);background:#f1e3c9}.wrap-tool__dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.wrap-tool__dropzone svg{grid-row:1/span 2;width:24px;height:24px;color:var(--wrap-red)}.wrap-tool__dropzone span{font-size:.83rem;font-weight:800}.wrap-tool__dropzone small{color:var(--wrap-muted);font-size:.68rem;line-height:1.3}.wrap-tool__controls fieldset{display:grid;gap:12px;margin:0;border:0;border-bottom:1px solid var(--wrap-soft-rule);padding:24px 0}.wrap-tool__controls legend{padding:0;font-size:.7rem;font-weight:900;text-transform:uppercase}.wrap-tool__choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--wrap-rule);border-radius:2px}.wrap-tool__choice-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}.wrap-tool__choice-grid button{min-height:38px;border:0;border-right:1px solid var(--wrap-rule);background:0 0;color:var(--wrap-muted);font-size:.68rem;font-weight:800;text-transform:uppercase;cursor:pointer}.wrap-tool__choice-grid button:last-child{border-right:0}.wrap-tool__choice-grid button:hover,.wrap-tool__choice-grid button.is-active{background:var(--wrap-ink);color:var(--wrap-paper)}.wrap-tool__palette-grid{display:grid;gap:1px;border:1px solid var(--wrap-rule);background:var(--wrap-rule)}.wrap-tool__palette-grid button{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;min-height:58px;border:0;background:var(--wrap-paper);color:var(--wrap-ink);padding:8px;text-align:left;cursor:pointer}.wrap-tool__palette-grid button:hover,.wrap-tool__palette-grid button.is-active{background:var(--wrap-paper-deep)}.wrap-tool__palette-grid button.is-active{outline:2px solid var(--wrap-red);outline-offset:-2px}.wrap-tool__palette-grid i{display:block;width:52px;height:40px;border:1px solid oklch(.2 .01 70/.16)}.wrap-tool__palette-grid i[data-palette=signal]{background:radial-gradient(circle at 15% 15%,oklch(.8 .17 188),transparent 50%),radial-gradient(circle at 86% 80%,oklch(.72 .22 351),transparent 58%),#fddf8a}.wrap-tool__palette-grid i[data-palette=aurora]{background:radial-gradient(circle at 18% 20%,oklch(.74 .19 214),transparent 53%),radial-gradient(circle at 82% 72%,oklch(.75 .21 28),transparent 56%),#aadf5b}.wrap-tool__palette-grid i[data-palette=ink]{background:radial-gradient(circle at 20% 18%,oklch(.62 .18 193),transparent 48%),radial-gradient(circle at 82% 78%,oklch(.58 .22 344),transparent 54%),#000406}.wrap-tool__palette-grid span{display:grid;gap:3px}.wrap-tool__palette-grid strong{font-size:.76rem}.wrap-tool__palette-grid small{color:var(--wrap-muted);font-size:.64rem}.wrap-tool__range{display:grid;gap:9px}.wrap-tool__range>span{display:flex;justify-content:space-between;color:var(--wrap-muted);font-size:.68rem;font-weight:700}.wrap-tool__range output{color:var(--wrap-ink)}.wrap-tool__range input{width:100%;accent-color:var(--wrap-red)}.wrap-tool__check{display:flex;align-items:center;gap:9px;color:var(--wrap-muted);font-size:.72rem;font-weight:700}.wrap-tool__check input{width:16px;height:16px;border-radius:0;accent-color:var(--wrap-ink)}.wrap-tool__field{display:grid;gap:6px}.wrap-tool__text-fields{display:grid;gap:12px;padding-top:4px}.wrap-tool__field-note{max-width:44ch;margin:0;color:var(--wrap-muted);font-size:.64rem;line-height:1.45}.wrap-tool__field span{color:var(--wrap-muted);font-size:.64rem;font-weight:800;text-transform:uppercase}.wrap-tool__field input{width:100%;min-height:40px;border:1px solid var(--wrap-rule);border-radius:2px;background:0 0;color:var(--wrap-ink);padding:8px 10px;font-size:.78rem}.wrap-tool__field input::placeholder{color:#5c544b94}.wrap-tool__exports{display:grid;grid-template-columns:.86fr 1.14fr;gap:8px;margin-top:24px}.wrap-tool__exports button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--wrap-rule);border-radius:2px;background:0 0;color:var(--wrap-ink);font-size:.7rem;font-weight:900;text-transform:uppercase;cursor:pointer}.wrap-tool__exports button.is-primary{background:var(--wrap-ink);color:var(--wrap-paper)}.wrap-tool__exports button:hover:not(:disabled){border-color:var(--wrap-red);background:var(--wrap-red);color:var(--wrap-paper)}.wrap-tool__exports button:disabled{cursor:not-allowed;opacity:.42}.wrap-tool__exports svg{width:16px;height:16px}.wrap-tool__status{display:grid;gap:8px;min-height:42px;margin-top:12px;border-top:1px solid var(--wrap-soft-rule);padding-top:12px;color:var(--wrap-muted);font-size:.68rem;line-height:1.4}.wrap-tool__status.is-error{color:#b32517}.wrap-tool__status.is-success{color:#195c2e}.wrap-tool__status progress{width:100%;height:4px;border:0;background:var(--wrap-paper-deep);accent-color:var(--wrap-red)}.wrap-tool__compatibility{max-width:52ch;margin:12px 0 0;color:var(--wrap-muted);font-size:.62rem;line-height:1.45}.wrap-tool__footer{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;width:min(1560px,calc(100% - 40px));min-height:84px;margin:0 auto;color:var(--wrap-muted);font-size:.68rem;font-weight:800;text-transform:uppercase}.wrap-tool__footer a{color:var(--wrap-ink);text-decoration:none}.wrap-tool__footer a:hover{color:var(--wrap-red)}.wrap-tool__footer svg{width:16px;height:16px;color:var(--wrap-red)}@media (max-width:980px){.wrap-tool__workspace{grid-template-columns:1fr}.wrap-tool__preview-column{border-right:0;border-bottom:1px solid var(--wrap-rule);padding-right:0}.wrap-tool__controls{padding-left:0}}@media (max-width:720px){.wrap-tool__masthead{grid-template-columns:1fr auto}.wrap-tool__masthead>span:nth-child(2){display:none}.wrap-tool__intro{grid-template-columns:1fr;width:min(100% - 28px,1560px)}.wrap-tool__intro h2{font-size:clamp(3.4rem,19vw,6.3rem)}.wrap-tool__workspace,.wrap-tool__footer{width:min(100% - 28px,1560px)}.wrap-tool__canvas-shell{min-height:420px;padding:10px}.wrap-tool__canvas-shell canvas{max-height:66vh}.wrap-tool__media-readout{display:grid;justify-content:stretch;padding:10px 0}.wrap-tool__footer{grid-template-columns:1fr auto}.wrap-tool__footer a{display:none}}@media (prefers-reduced-motion:reduce){.wrap-tool *,.wrap-tool :before,.wrap-tool :after{scroll-behavior:auto!important;transition-duration:.01ms!important}}