/* Studio work surface, toolbar index and end-of-page navigation. */
#work{background:#fff;border:1px solid #ded5e6;border-radius:22px;padding:clamp(20px,3vw,36px);box-shadow:0 8px 28px #38234708}
#work [hidden]{display:none!important}
.bench-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #e9e1ee}
.bench-head>div{flex:1.3}.bench-category{display:inline-flex;gap:7px;align-items:center;font:700 12px/1.2 Manrope,Arial;color:#69458a}.bench-category svg{width:17px;height:17px}
#work .bench-head h2{margin:8px 0 0;font:700 clamp(22px,2.65vw,35px)/1.13 Manrope,Arial;letter-spacing:-.045em}
#work .bench-head p{flex:1;margin:0;max-width:460px;font-size:14px;color:#5e5366;line-height:1.6}
#work .drop-zone{min-width:0;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:13px;min-height:100px;padding:16px;border:1.5px dashed #bfabd1;border-radius:12px;margin:6px 0;background:#faf6fd;transition:background .15s,border-color .15s}
#work .drop-zone:hover,#work .drop-zone:focus-within,#work .drop-zone.dragging{background:#f2e9fc;border-color:#7b48a6}
#work .drop-zone:focus-within{outline:2px solid #784a98;outline-offset:2px}
#work .drop-zone.has-file{background:#f7f3fa;border-style:solid}
#work .drop-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0;z-index:2}
.drop-emblem{width:42px;height:42px;flex:none;display:grid;place-items:center;background:#ece1f6;border:1px solid #dfcfeb;border-radius:12px;color:#68408b}
.drop-emblem svg{width:22px;height:22px}.drop-copy{display:grid;gap:3px;overflow:hidden;min-width:0}.drop-copy b{font-size:15px;color:#34243e;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.drop-copy small{font:550 12px/1.45 Manrope,Arial;color:#745685}
#work :is(input:not([type=file]):not([type=checkbox]):not([type=color]),select,textarea){padding:11px 12px;background:#fdfbfe;border-color:#d9cfdf;border-radius:9px}
#work :is(button:not(.ghost),a[download]){border-radius:10px;padding:11px 16px;font-weight:700}#work button:not(:disabled):hover,#work a[download]:hover{filter:brightness(1.14)}
#work :is(button,a,input:not([type=file]),textarea,select):focus-visible,.page-index a:focus-visible{outline:3px solid #9e72bd;outline-offset:3px}
#work table{font-variant-numeric:tabular-nums}#work th{color:#66497c;background:#f5eff9}#work td{border-bottom:1px solid #e6dfeb}
.icon-studio{display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(18px,3vw,40px);align-items:stretch}
#work .icon-input .drop-zone{min-height:125px}.icon-action{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}.icon-action span{font-size:12px;color:#605468}
.icon-preview{border:1px solid #e1d2ea;background:linear-gradient(125deg,#f7effc,#efe5f5);padding:18px 20px;border-radius:14px}
.icon-caption,.mini-browser,.icon-sizes,.mini-toolbar,.mini-tab{display:flex;align-items:center}.icon-caption{justify-content:space-between;gap:8px;font-size:12px;color:#5b4468}.icon-caption span{font-size:11px}
.mini-browser{margin:16px 0 0;background:#e2d6ec;border:1px solid #d7c8e2;border-bottom:3px solid #fff;border-radius:10px 10px 0 0;padding:8px 8px 0;gap:12px}
.mini-toolbar{gap:3px;align-self:flex-start;padding-top:5px}.mini-toolbar i{width:5px;height:5px;border:1px solid #9781a7;border-radius:50%}
.mini-tab{background:#fff;padding:7px 10px;gap:9px;border-radius:8px 8px 0 0;width:60%;font-size:11px;color:#4c3d57}.mini-tab b{margin-left:auto}.icon-sizes{justify-content:space-around;align-items:end;padding:12px 6px 0}.icon-sizes span{display:grid;justify-items:center;gap:4px;font-size:10px;color:#66506e}
#work .icon-sizes img,#work .mini-tab img{height:revert-layer;aspect-ratio:1;object-fit:fill}
#work .mini-tab img,#work .icon-sizes img[width="16"]{width:16px;height:16px}#work .icon-sizes img[width="32"]{width:32px;height:32px}#work .icon-sizes img[width="48"]{width:48px;height:48px}
.icon-files{margin-top:20px;border-top:1px solid #e4dce8;padding-top:14px}.icon-files h3{font-size:16px;margin:0 0 10px}.icon-files #out{display:flex;gap:8px;flex-wrap:wrap}#work .icon-files a{background:#f2eaf9;color:#56366d}
.guide-nav.page-index{display:flex;align-items:center;gap:12px 24px;border:0;border-radius:14px;padding:12px 16px;margin-top:16px;background:#f0eaf4}.index-caption{font:700 11px/1.4 Manrope,Arial;text-transform:uppercase;letter-spacing:.1em;color:#5d476b}
.page-index>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px}.guide-nav.page-index a{color:#4e395d;display:inline-flex;align-items:center;min-height:38px;padding:6px 12px;border-radius:8px;text-decoration:none}
.page-index a:hover,.page-index [aria-current]{background:#fff;box-shadow:0 1px 4px #51306114}
@media(max-width:700px){.bench-head{display:block}.bench-head h2{max-width:100%}#work .bench-head p{margin-top:7px}.icon-studio{grid-template-columns:1fr}.guide-nav.page-index{display:block;padding:11px 10px}.index-caption{margin-left:8px}.page-index>div{margin-top:3px;gap:1px 2px}.guide-nav.page-index a{padding:6px 8px}.icon-preview{padding:15px}#work .row>div:has(.drop-zone){flex-basis:100%}}
.palette-demo figcaption small{display:block;color:#685473;font:600 11px/1.4 Manrope,Arial;padding-bottom:6px}.icon-files a:focus-visible{outline-offset:2px}#work button.palette-swatch{border:1px solid #26132f44;font-weight:650;text-align:left}#work button.palette-swatch b,#work button.palette-swatch span{background:#fffdf6d9;color:#251a2c;padding:1px 4px;border-radius:3px}
.tool-entry{max-width:860px;margin:0 auto;text-align:center;padding:clamp(34px,5vw,66px) 0 clamp(22px,3vw,34px)}
.hub-main .tool-entry h1{margin:0;font:750 clamp(34px,5vw,64px)/1.1 Manrope,Arial;letter-spacing:-.055em;text-wrap:balance}
.tool-heading {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  gap:clamp(9px,1.3vw,17px);
  text-align:left;
}
.tool-heading-mark {
  box-sizing:border-box;
  flex:none;
  width:clamp(31px,4.5vw,56px);
  height:auto;
  aspect-ratio:1;
  padding:clamp(6px,.9vw,11px);
  object-fit:contain;
  border:1px solid #decde9;
  border-radius:28%;
  background:#e9daf5;
}
.tool-heading h1 {min-width:0;overflow-wrap:anywhere}
.tool-entry p{max-width:690px;margin:14px auto 0;color:#62576b;font:450 clamp(14px,1.45vw,17px)/1.6 Manrope,Arial;text-wrap:pretty}
#work{max-width:940px;margin-inline:auto}.page-index{max-width:940px;margin-inline:auto}
#work .try-sample{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0}
#work .try-sample button{font:650 13px Manrope,Arial;text-decoration:underline;text-underline-offset:3px;background:transparent;color:#674381;padding:5px 0;border:0;cursor:pointer}
.try-sample small,#work .try-sample #sample-status{margin:0;color:#695a72}
#work p:empty{margin:0}
#work .row>div:has(.drop-zone){flex-basis:100%}
.case-reference{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.85fr);gap:6%;align-items:center;border-top:1px solid #e7e0ea}
.case-reference .guide-label{font-weight:700;color:#75528c;margin:0 0 7px}.case-reference .guide-action{margin-top:16px}
.case-stills{display:flex;align-items:flex-start;justify-content:center;gap:12px}
.case-stills figure{margin:0;min-width:0;max-width:235px;flex:1}.case-stills img{display:block;width:100%;height:clamp(170px,22vw,258px);object-fit:contain;border-radius:9px;background:#f3eff5}
.case-stills figcaption{font:500 12px/1.5 Manrope,Arial;color:#65566d;padding-top:7px}
.cue-example{margin:0;border-radius:16px;border:1px solid #e2d9e8;background:white;padding:clamp(18px,3vw,30px)}.cue-example figcaption{font:700 18px/1.4 Manrope,Arial;margin-bottom:22px}
.cue-row{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:13px}.cue-row span{font-variant-numeric:tabular-nums;color:#625369}.cue-row+.cue-row{margin-top:16px}
.cue-track{grid-column:1/-1;height:18px;position:relative;border-radius:4px;background:#f3edf7}.cue-track i{position:absolute;height:100%;border-radius:4px;background:#b590ce}.cue-row:last-child .cue-track i{background:#674481}
@media(max-width:700px){.case-reference{grid-template-columns:1fr;gap:18px}.tool-entry{padding-top:24px}.case-stills{justify-content:flex-start}.case-stills figure{max-width:190px}#work{padding:16px}.page .tool-entry h1{font-size:clamp(30px,8vw,45px)}}
#work .palette-swatch{flex:1 1 105px;min-height:64px;border-radius:10px;padding:13px}#work .palette-swatch b,#work .palette-swatch span{background:#fffdf6e5}#work .palette-swatch span{font-size:12px}

#work .usage-notice {margin:16px 0 0;padding-top:12px;border-top:1px solid #e7dfeb;color:#64596d;font:500 13px/1.6 Manrope,Arial,sans-serif}

#work .fields > label:has(.drop-zone) { flex-basis: 100% }
#work .row > input#url { flex: 1 1 240px }
#work .row > input#url + button { flex: 0 0 auto }
#work .size-reference { width: 100%; border-collapse: collapse; text-align: left }
#work .size-reference :is(th, td) { padding: 9px clamp(4px, 1vw, 14px) }
#work .size-reference tbody th { background: transparent; color: var(--ink); border-bottom: 1px solid #e6dfeb }
#work .size-reference th small { display: block; font-weight: 400; color: var(--quiet) }
#work .size-reference td { white-space: nowrap }
@media (max-width: 520px) {
  #work .row > input#url { flex-basis: 100% }
  #work .size-reference { font-size: 12px }
}