@font-face{font-family:Archivo;src:url(/portfolio/studio-type-lab/app/fonts/ArchivoBlack-Regular.ttf) format("truetype");font-display:swap;font-weight:400}@font-face{font-family:Space;src:url(/portfolio/studio-type-lab/app/fonts/SpaceGrotesk.ttf) format("truetype");font-display:swap;font-weight:300 700}:root{font-family:Space,Arial,sans-serif;color:#1c241c;background:#fffdeb;font-synthesis:none;font-size:18px;--cream: #fffdeb;--ink: #1c241c;--yellow: #f4f66a;--mint: #b9decf;--line: #a6af95}*{box-sizing:border-box}body{margin:0}button,input,textarea,summary{font:inherit;color:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit}button,input,textarea{border-radius:3px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #365f38;outline-offset:4px}button{border:1.5px solid var(--ink);background:transparent}button:hover:not(:disabled){background-color:var(--yellow)}button{transition:background-color .14s,box-shadow .14s}p{line-height:1.5}h1,h2,p{margin:0}.topbar{height:88px;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 4.4%;gap:24px}.wordmark{text-decoration:none;display:flex;align-items:center;gap:12px;font-family:Archivo,sans-serif;font-size:22px;letter-spacing:-.7px}.monogram{width:40px;height:40px;border:1.5px solid var(--ink);border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:26px}.wordmark-divider{font-family:Space,sans-serif;font-weight:400;margin:0 3px}.lab-label{font-family:Space,sans-serif;font-size:18px;letter-spacing:.5px;font-weight:500}.edition{font-size:16px;display:flex;align-items:center;gap:10px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none}main{max-width:1536px;margin:auto;padding:0 4.4%}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:44px 0 36px}.eyebrow{font-size:16px;font-weight:600;letter-spacing:1.6px;margin-bottom:14px}h1{font-family:Archivo,sans-serif;font-size:clamp(44px,4.3vw,68px);font-weight:400;line-height:1.05;letter-spacing:-3px}h1 span{position:relative;z-index:0;white-space:nowrap}h1 span:after{content:"";position:absolute;left:-3px;right:-6px;height:19px;background:var(--yellow);bottom:1px;z-index:-1;transform:rotate(-3deg)}.intro-copy{font-size:18px;max-width:320px;padding-bottom:4px}.editor{display:grid;grid-template-columns:360px minmax(0,1fr);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:4px;overflow:hidden}.controls{padding:26px;border-right:2px solid var(--ink)}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.panel-title h2{font-size:24px;letter-spacing:-.8px;font-weight:700}.panel-title>span{font-size:30px}fieldset{border:0;padding:0;margin:0 0 25px;min-width:0}legend{padding:0;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;margin-bottom:16px}.step{font-size:16px;border:1px solid var(--ink);background:var(--mint);width:31px;height:29px;display:inline-grid;place-items:center;font-weight:500}.preset-grid,.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.preset{padding:10px 8px 8px;display:flex;align-items:center;gap:10px;flex-direction:column;font-size:16px;background:var(--cream)}.preset.selected,.palette.selected{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}.mini-layout{width:48px;height:56px;display:block;position:relative;border:1px solid var(--ink);background:var(--cream);padding:6px}.mini-layout i{position:absolute;left:6px;top:8px;width:34px;height:5px;background:var(--ink)}.mini-layout i:nth-child(2){top:18px;width:23px}.mini-layout i:nth-child(3){top:28px;width:18px}.mini-layout b{position:absolute;right:5px;bottom:5px;width:20px;height:20px;background:#ff8254;border:1px solid var(--ink);border-radius:50%}.mini-stack i:nth-child(2){width:34px}.mini-stack i:nth-child(3){top:44px;width:34px;height:3px}.mini-stack b{width:15px;height:15px;bottom:11px;right:16px}.mini-split i{width:16px!important}.mini-split b{width:16px;height:29px;bottom:9px;right:4px}.help{font-size:16px;color:#475344;line-height:1.45;margin-top:12px}.controls label{font-size:16px;display:block;margin-bottom:8px;font-weight:500}textarea{display:block;width:100%;resize:vertical;min-height:90px;padding:13px 12px;line-height:1.4;border:1px solid #56624d;background:#fffef5;font-size:18px}#headline{font-weight:600}#supporting{min-height:82px}.field-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 17px;font-size:16px;color:#475344}.field-meta span:first-child{max-width:195px}.palette{padding:8px;display:flex;flex-direction:column;gap:9px;font-size:16px;text-align:left;min-width:0}.palette>span:last-child{display:flex;justify-content:space-between;align-items:center}.swatches{height:30px;width:100%;display:flex;border:1px solid var(--ink);overflow:hidden}.swatches i{flex:1}.palette b{font-weight:500}.range-label{display:flex;align-items:center;justify-content:space-between}.range-label output{font-size:16px}.range-label label{margin:0}input[type=range]{display:block;width:100%;height:32px;margin:10px 0 12px;accent-color:var(--ink);cursor:ew-resize}details{border-top:1px solid var(--line);padding-top:12px}summary{font-size:16px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;min-height:32px;align-items:center}summary::-webkit-details-marker{display:none}details[open] summary>span{transform:rotate(45deg)}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.number-wrap{display:flex;align-items:center;border:1px solid var(--ink);background:#fffef5;margin-top:7px;padding-right:9px;font-size:16px}.number-wrap input{width:100%;min-width:0;border:0;background:transparent;padding:9px;font-size:16px}.reset{border:0;border-top:1px solid var(--line);border-radius:0;display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;padding:15px 0 0;font-size:16px}.reset>span{font-size:26px}.preview-panel{min-width:0;background:#edeee0;display:flex;flex-direction:column;padding:22px 36px 16px}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;font-size:16px}.preview-title{display:flex;align-items:center;gap:9px;letter-spacing:1px;font-weight:600}.clean-toggle{font-size:16px;border:0;padding:7px 0;display:flex;gap:12px;align-items:center}.stage{display:grid;place-items:center;min-width:0;flex:1;background-image:radial-gradient(#88937866 .75px,transparent .75px);background-size:16px 16px;padding:6px 12px 10px}.artboard{width:100%;max-width:520px;aspect-ratio:4/5;position:relative;outline:1px solid var(--ink);box-shadow:5px 5px #1c241c20;isolation:isolate;container-type:inline-size}.artboard canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.mascot-handle{position:absolute;border:1px dashed #1c241c70;border-radius:0;padding:0;cursor:grab;touch-action:none;background:transparent!important;-webkit-user-select:none;user-select:none;min-width:44px;min-height:44px}.mascot-handle:hover,.mascot-handle:focus-visible,.mascot-handle.dragging{border-color:var(--ink)}.mascot-handle.dragging{cursor:grabbing}.handle-corner{position:absolute;width:7px;height:7px;border:1px solid var(--ink);background:var(--cream)}.handle-corner.a{left:-4px;top:-4px}.handle-corner.b{right:-4px;top:-4px}.handle-corner.c{left:-4px;bottom:-4px}.handle-corner.d{right:-4px;bottom:-4px}.drag-chip{font-size:16px;font-weight:500;background:var(--yellow);border:1px solid var(--ink);padding:5px 9px;white-space:nowrap;position:absolute;bottom:-21px;left:50%;transform:translate(-50%) rotate(-5deg);pointer-events:none}.artboard-caption{display:flex;justify-content:space-between;width:100%;max-width:520px;margin:15px auto 0;font-size:16px;color:#475344}.drag-help{text-align:center;font-size:16px;margin:20px 0 24px;line-height:1.4}.drag-help>span{margin-right:6px;font-size:22px;vertical-align:middle}.export-area{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:22px}.export-area h2{font-size:20px;font-weight:600;letter-spacing:-.5px}.export-area p{font-size:16px;color:#475344;margin-top:5px}.download{font-size:18px;font-weight:600;white-space:nowrap;padding:16px 21px;background:var(--yellow);box-shadow:3px 3px 0 var(--ink);display:flex;gap:20px;align-items:center;min-height:56px}.download:hover:not(:disabled){background:var(--mint);box-shadow:1px 1px 0 var(--ink)}.download>span{font-size:25px;line-height:1}.feedback{font-size:16px;min-height:28px;margin-top:16px;color:#475344;visibility:hidden}.feedback.visible{visibility:visible}.warning{padding:14px 16px;background:#f4f66a;border:1px solid var(--ink);font-size:16px;margin-top:18px;line-height:1.5}.canvas-message{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:14px;background:var(--cream);font-size:18px}.canvas-message strong{font-size:22px}.canvas-message button{padding:12px}.loading-flower{font-size:54px;color:#ff8254;animation:turn 5s linear infinite}footer{display:flex;justify-content:space-between;gap:20px;padding:32px 0 36px;font-size:16px;line-height:1.5}footer>span{font-size:16px;letter-spacing:.6px}footer a{text-underline-offset:4px;white-space:nowrap}@keyframes turn{to{transform:rotate(360deg)}}@media(min-width:1450px){.editor{grid-template-columns:400px minmax(0,1fr)}.controls{padding:30px}.preview-panel{padding-inline:52px}.artboard,.artboard-caption{max-width:555px}}@media(max-width:1100px){.editor{grid-template-columns:330px minmax(0,1fr)}.controls,.preview-panel{padding:22px}.intro-copy{max-width:245px}.export-area{flex-direction:column;align-items:stretch}.download{justify-content:center}.stage{padding:4px 0}.wordmark{font-size:20px}}@media(max-width:780px){.topbar{height:76px;padding-inline:20px}.edition{display:none}main{padding:0 20px}.intro{padding:30px 0;display:block}.intro-copy{max-width:none;margin-top:18px;font-size:18px}.intro-copy br{display:none}.eyebrow{font-size:16px;letter-spacing:.5px}h1{font-size:clamp(39px,7.5vw,58px);letter-spacing:-2px}.editor{display:flex;flex-direction:column;box-shadow:4px 4px 0 var(--ink)}.preview-panel{order:-1;padding:18px 16px 8px;border-bottom:2px solid var(--ink)}.controls{border-right:0;padding:24px}.preview-toolbar{margin-bottom:17px;flex-wrap:wrap}.preview-title{letter-spacing:0}.artboard,.artboard-caption{max-width:480px}.stage{flex:none}.export-area{gap:16px}.drag-help{margin:18px 0}.export-area h2{font-size:20px}.panel-title{margin-bottom:24px}.preset{padding-block:14px}.mini-layout{width:48px}.field-meta span:first-child{max-width:none}fieldset{margin-bottom:27px}footer{flex-direction:column;gap:12px;font-size:16px;padding-block:26px}.feedback{margin-top:12px}.drag-chip{padding:3px 7px;bottom:-17px}}@media(max-width:370px){main{padding:0 12px}.topbar{padding:0 12px}.wordmark{gap:7px;font-size:18px}.lab-label{font-size:16px}.monogram{width:34px;height:34px;font-size:23px}.preview-panel{padding-inline:10px}.controls{padding:20px 16px}h1{font-size:38px}.preview-toolbar{gap:4px}.preview-title,.clean-toggle{font-size:16px}.clean-toggle{gap:5px}.artboard-caption{flex-wrap:wrap;gap:6px}.drag-chip{left:40%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}select{font:inherit;color:inherit;min-width:0;max-width:100%;background:var(--cream);border:1px solid var(--ink);border-radius:3px;padding:9px 12px;font-size:16px}select:focus-visible{outline:3px solid #365f38;outline-offset:3px}.object-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}.object-toolbar label{display:flex;align-items:center;gap:12px;font-size:16px}.add-shape{background:var(--yellow);padding:10px 16px;font-size:16px;white-space:nowrap}.shape-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px;border:1px solid var(--ink);background:var(--cream);margin-bottom:18px}.shape-tray button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 5px;font-size:16px;text-transform:capitalize}.shape-tray p{grid-column:1/-1;font-size:16px;color:#475344}.shape-tray img{width:44px;height:44px}.element-inspector{background:#e7efdf;border:1px solid var(--ink);padding:16px;margin:0 0 26px;scroll-margin-top:20px}.inspector-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.inspector-title h3{font-size:20px;line-height:1.2;text-transform:capitalize;margin:0}.inspector-title>span{font-size:16px}.inspector-range{margin-top:12px}.align-buttons{display:flex;gap:8px;margin:12px 0 17px}.align-buttons button{flex:1;font-size:16px;padding:9px 4px}.align-buttons [aria-pressed=true]{background:var(--yellow);box-shadow:2px 2px var(--ink)}.colour-field{margin:16px 0}.colour-inputs{display:flex;gap:10px;align-items:center;margin-top:7px}.colour-inputs input[type=color]{width:46px;height:44px;flex:none;padding:3px;background:var(--cream);border:1px solid var(--ink);cursor:pointer}.colour-inputs input[type=text]{width:100%;min-width:0;max-width:170px;padding:11px 10px;border:1px solid var(--ink);background:var(--cream);font-size:16px}.colour-error{font-size:16px;color:#8c251b}.custom-colours{margin-top:17px}.text-edit-link{border:0;font-size:16px;text-align:left;text-decoration:underline;text-underline-offset:3px;padding:0 0 11px}.preset-note{font-size:16px;margin-top:8px;color:#475344}.wrap-option{display:flex!important;align-items:flex-start;gap:10px;margin-top:18px}.wrap-option input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--ink)}.shape-actions{display:flex;gap:10px;margin-top:15px}.shape-actions button{font-size:16px;flex:1;padding:10px 4px}.element-handle{position:absolute;border:1px dashed transparent;background:transparent!important;cursor:grab;touch-action:none;border-radius:0;padding:0;min-width:0;min-height:0;-webkit-user-select:none;user-select:none}.element-handle:hover{border-color:#1c241c80}.element-handle.is-selected{border-color:var(--ink)}.element-handle.dragging{cursor:grabbing}.element-handle .drag-chip{max-width:200px;font-size:16px;line-height:1.25}.text-frame{position:absolute;border:1px dashed #365f3880;pointer-events:none;z-index:1}.contrast-advice{font-size:16px;padding:14px 16px;border:1px solid var(--ink);margin-top:18px;background:var(--cream)}.selected-controls-link{font-size:16px;margin:0 0 16px;text-align:center;text-underline-offset:4px}.preview-panel{position:sticky;top:0;align-self:start;width:100%}.editor{overflow:visible;background:#edeee0}.controls{background:var(--cream)}.stage{flex:none}.artboard,.artboard-caption{max-width:480px}@media(min-width:1101px){.artboard{max-width:min(520px,calc((100vh - 320px)*.8));min-width:340px}.artboard-caption{max-width:520px}.preview-panel{padding-top:18px}.preview-toolbar{margin-bottom:10px}.drag-help{margin:13px 0 18px}.export-area{padding-top:18px}}@media(max-width:1100px){.object-toolbar,.object-toolbar label{flex-wrap:wrap}.preview-panel{top:0}.stage{padding-top:5px}}@media(max-width:780px){.preview-panel{position:static}.object-toolbar{gap:10px;align-items:end}.object-toolbar label{display:grid;gap:5px;flex:1}.object-toolbar select{width:100%}.add-shape{padding:10px 12px}.shape-tray{padding:10px;gap:7px;grid-template-columns:repeat(4,minmax(0,1fr))}.artboard,.artboard-caption{max-width:480px}.element-handle .drag-chip{padding:3px 6px}.element-inspector{padding:14px}}@media(max-width:370px){.shape-tray{grid-template-columns:repeat(2,minmax(0,1fr))}.object-toolbar label{max-width:155px}.object-toolbar{gap:7px}.add-shape{padding:10px}.shape-tray p{line-height:1.4}}