@font-face{font-family:RG Wide;font-weight:300;font-display:swap;src:url(/fonts/RightGrotesk-WideLight-1.woff2) format("woff2")}@font-face{font-family:RG Wide;font-weight:700;font-display:swap;src:url(/fonts/RightGrotesk-WideBold.woff2) format("woff2")}@font-face{font-family:RG Tall;font-weight:700;font-display:swap;src:url(/fonts/RightGrotesk-TallBold.woff2) format("woff2")}:root{--ink: #111;--paper: #fff;--muted: #8A8A8A;--rule: #E2E2E2;--line: #D4D4D4;--line-strong: #9E9E9E;--hair: #EEEEEE;--soft: #F5F5F5;--sel: #EBEBEB;--title-grey: #808080;--wide: "RG Wide", "Helvetica Neue", Arial, sans-serif;--tall: "RG Tall", "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font:300 12.5px/1.45 var(--wide);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}button:disabled{cursor:default;opacity:.35}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}h1,h2{margin:0;font-weight:700}.muted{color:var(--muted)}.mono{font-family:var(--mono);font-size:12px}.grow{flex:1}.note{margin:10px 0 0;color:var(--muted);font-size:11.5px}.app{display:flex;flex-direction:column;height:100%}.top{display:flex;align-items:center;gap:20px;height:64px;padding:0 24px;border-bottom:1px solid var(--rule);flex:none}.brand img{height:30px;display:block}.lockup{display:flex;align-items:flex-start;gap:14px}.top h1{font:700 43.4px/30px var(--tall);height:30px;margin-top:-3.6px;text-transform:uppercase;letter-spacing:.005em;word-spacing:.06em;color:var(--title-grey);white-space:nowrap}.top-actions{margin-left:auto;display:flex;gap:8px}.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px}.main.panel-closed{grid-template-columns:minmax(0,1fr)}.panel[hidden]{display:none}.panel-btn svg{margin-right:2px}.stage{display:flex;flex-direction:column;min-height:0;padding:24px 24px 16px;gap:14px}.panel{border-left:1px solid var(--rule);overflow-y:auto;min-height:0;overscroll-behavior:contain}.preview-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}.frame{position:relative;box-shadow:0 0 0 1px #00000014;touch-action:none}.frame canvas{display:block}.p-handle{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0009,0 1px 6px #00000040;background:#ffffff26;cursor:grab;touch-action:none}.p-handle span{position:absolute;left:24px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}.p-handle:hover span,.p-handle.active span{opacity:1}.p-handle.active{cursor:grabbing}.gl-error{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#fff;padding:24px;text-align:center}.stage-info{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;flex:none}.export{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:14px;border-top:1px solid var(--rule);flex:none}.download{margin-left:auto}.dim{font-weight:300;opacity:.7;margin-left:6px;text-transform:none;letter-spacing:0}.favs{flex:none}.favs h2,.section-head h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}.fav-row{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px}.fav{position:relative;flex:none}.fav img{display:block;height:56px;width:auto;box-shadow:0 0 0 1px #0000001a}.fav>button:first-child:hover img{box-shadow:0 0 0 2px #888}.fav-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--ink);color:#fff;font-size:9px;border-radius:50%;opacity:0;transition:opacity .15s}.fav:hover .fav-x{opacity:1}.tabs{display:flex;gap:22px;padding:18px 24px 14px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper);z-index:2}.tabs button{font:700 26px/1 var(--tall);text-transform:uppercase;color:#c8c8c8;padding-top:3px}.tabs button.on,.tabs button:hover{color:var(--ink)}.section{padding:16px 24px 20px;border-bottom:1px solid var(--hair)}.section.closed{padding-bottom:16px}.section-head{display:flex;align-items:center;justify-content:space-between;min-height:18px}.section-body{margin-top:12px}.section-title{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}.section-title:hover h2{color:var(--muted)}.chev{color:var(--muted);transition:transform .15s}.closed .chev{transform:rotate(-90deg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--line);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;color:#333}.btn:hover:not(:disabled){background:var(--soft);border-color:var(--line-strong);color:var(--ink)}.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;height:40px;padding:0 18px}.btn.primary:hover:not(:disabled){background:#333;border-color:#333;color:#fff}.btn.big{width:100%;height:56px;margin-top:14px;font-size:13px}kbd{font:300 10px var(--wide);text-transform:none;letter-spacing:0;border:1px solid rgba(255,255,255,.5);padding:2px 6px;margin-left:8px}.link{font-size:10.5px;text-decoration:underline;text-underline-offset:2px;color:var(--muted)}.link:hover{color:var(--ink)}.seg{display:inline-flex;border:1px solid var(--line)}.seg button{height:30px;padding:0 12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8c8c8c}.seg button:hover{color:var(--ink)}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--sel);color:var(--ink)}.section .seg{display:flex;margin-bottom:12px}.section .seg button{flex:1}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{height:28px;padding:0 11px;border:1px solid var(--hair);font-size:11px;color:#555}.chip:hover{border-color:var(--line-strong);color:var(--ink)}.chip.on{background:var(--sel);border-color:var(--line-strong);color:var(--ink);font-weight:700}.swatch-chip{display:inline-flex;align-items:center;gap:6px;height:32px}.swatch-chip i{width:12px;height:12px;box-shadow:inset 0 0 0 1px #0003}.note.first{margin:0 0 4px}.effect{margin-left:4px;padding-left:14px;border-left:1px solid var(--hair)}.effect+.effect{margin-top:16px}.effect-head{display:flex;justify-content:space-between;align-items:center;min-height:18px;font-size:11px}.effect .seg{margin:12px 0 0}.effect .slider:first-of-type{margin-top:10px}.slider{margin:12px 0 0}.slider label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}.slider .val{font-family:var(--mono);font-size:11px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#666 var(--p, 50%),#E2E2E2 var(--p, 50%))}input[type=range]::-moz-range-track{height:2px;background:linear-gradient(to right,#666 var(--p, 50%),#E2E2E2 var(--p, 50%))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;background:#333;border:2px solid #fff;box-shadow:0 0 0 1px #888;border-radius:50%}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#333;border:2px solid #fff;box-shadow:0 0 0 1px #888;border-radius:50%}.toggle{display:inline-flex;align-items:center;gap:8px;font-size:11px}.toggle .track{width:30px;height:16px;border:1px solid var(--line-strong);position:relative;transition:background .15s;border-radius:8px}.toggle .knob{position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--line-strong);border-radius:50%;transition:transform .15s,background .15s}.toggle.on .track{background:#444;border-color:#444}.toggle.on .knob{transform:translate(14px);background:#fff}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.row.between{justify-content:space-between}.grid2,.grid3{display:grid;gap:10px;margin-top:14px}.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr 1.4fr}.field{display:flex;flex-direction:column;gap:4px;font-size:10.5px;min-width:0}.field>span{text-transform:uppercase;letter-spacing:.06em;font-weight:700}.field input,.field select{height:32px;border:1px solid var(--line);background:#fff;padding:0 8px;border-radius:0;font-size:12px;min-width:0;width:100%}.swatch-input{position:relative;display:inline-block;width:32px;height:32px;flex:none;box-shadow:inset 0 0 0 1px #00000026;cursor:pointer}.swatch-input input,.sw.picker input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;cursor:pointer}.stopbar .bar-wrap{position:relative;height:66px;touch-action:none}.stopbar .bar{position:absolute;left:0;right:0;top:8px;height:32px;box-shadow:inset 0 0 0 1px #0000001f;cursor:copy}.stopbar.readonly .bar{cursor:default}.handle{position:absolute;top:44px;width:18px;height:18px;margin-left:-9px;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px #00000080;cursor:grab;touch-action:none}.handle:before{content:"";position:absolute;left:50%;top:-8px;width:1px;height:6px;background:#999}.handle.sel{box-shadow:0 0 0 2px #444}.handle.removing{opacity:.25}.readonly .handle{cursor:default}.lock-badge{position:absolute;top:18px;left:50%;transform:translate(-50%);color:var(--ink);line-height:0}.hint{position:absolute;top:3px;width:8px;height:8px;margin-left:-4px;background:#fff;border:1px solid #888;transform:rotate(45deg);cursor:ew-resize;touch-action:none}.hint:hover{background:#555}.stop-edit{display:flex;align-items:center;gap:6px;margin-top:8px}.stop-edit .hex{width:90px;height:32px;border:1px solid var(--line);padding:0 8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;border-radius:0}.stop-edit .num{width:54px;height:32px;border:1px solid var(--line);padding:0 6px;font-family:var(--mono);font-size:12px;border-radius:0}.stop-edit .unit{color:var(--muted);margin-right:auto}.icon{width:32px;height:32px;border:1px solid var(--line);display:inline-grid;place-items:center;font-size:11px;color:#555}.icon:hover:not(:disabled){background:var(--soft);color:var(--ink)}.icon.on{background:#444;border-color:#444;color:#fff}.angle{display:flex;gap:16px;align-items:center}.dial{width:76px;height:76px;border:1px solid var(--line);border-radius:50%;position:relative;flex:none;cursor:pointer;touch-action:none}.dial:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;background:#444;border-radius:50%}.needle{position:absolute;left:50%;top:4px;width:2px;margin-left:-1px;height:calc(50% - 4px);background:#444;transform-origin:50% 100%;pointer-events:none}.angle-side{flex:1;display:flex;flex-direction:column;gap:8px}.angle-num{display:flex;align-items:center;gap:4px}.angle-num input{width:64px;height:30px;border:1px solid var(--line);padding:0 8px;font-family:var(--mono);font-size:12px;border-radius:0}.presets{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--line)}.presets button{height:28px;font-size:13px;color:#777}.presets button:hover{color:var(--ink)}.presets button+button{border-left:1px solid var(--hair)}.presets button.on{background:var(--sel);color:var(--ink)}.clock{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}.clock .big{font:700 44px/1 var(--tall);text-transform:uppercase}.clock .small{color:var(--muted);font-size:11.5px}.day-slider{position:relative;height:34px}.day-strip{position:absolute;left:0;right:0;top:0;height:34px;box-shadow:inset 0 0 0 1px #0000001f}.day-slider .tick{position:absolute;top:-4px;bottom:-4px;width:1px;background:#999;pointer-events:none}.day-slider input[type=range]{position:absolute;top:0;right:0;bottom:0;left:0;height:34px}.day-slider input[type=range]::-webkit-slider-runnable-track{height:34px;background:transparent}.day-slider input[type=range]::-moz-range-track{height:34px;background:transparent}.day-slider input[type=range]::-webkit-slider-thumb{width:4px;height:44px;margin-top:-5px;border-radius:0;background:var(--ink);border:1px solid #fff;box-shadow:0 0 0 1px var(--ink)}.day-slider input[type=range]::-moz-range-thumb{width:2px;height:42px;border-radius:0;background:var(--ink);border:1px solid #fff}.day-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:6px}.group{margin-bottom:14px}.group.off .swatches{opacity:.3}.group-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;margin-bottom:6px}.swatches{display:flex;flex-wrap:wrap;gap:4px}.sw{width:26px;height:26px;box-shadow:inset 0 0 0 1px #0000001a;position:relative}.sw:hover{box-shadow:0 0 0 2px #777;z-index:1}.sw-wrap{position:relative}.sw-x{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:var(--ink);color:#fff;font-size:7px;opacity:0;z-index:2}.sw-wrap:hover .sw-x{opacity:1}.add-row{display:flex;gap:6px;margin-top:8px}.add-row input:not([type=color]){flex:1;min-width:0;height:32px;border:1px solid var(--line);padding:0 8px;font-size:11.5px;border-radius:0}.sw.picker{width:32px;height:32px;flex:none;cursor:pointer;display:block}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:var(--ink);color:#fff;padding:10px 16px;font-size:11.5px;z-index:10}@media (max-width: 900px){.top{padding:0 16px;gap:14px}.top h1{font-size:36.1px;line-height:25px;height:25px;margin-top:-3px}.lockup{gap:11px}.brand img{height:25px}.panel-btn{display:none}.top-actions .btn{padding:0 10px}.main{display:block;overflow-y:auto}.stage{height:72vh;padding:16px}.panel{border-left:0;border-top:1px solid var(--rule);overflow:visible}.tabs{position:static;padding:16px}.section{padding:16px}.download{margin-left:0;width:100%}}@media (max-width: 520px){.brand img{height:24px}.top h1{font-size:34.7px;line-height:24px;height:24px;margin-top:-2.9px}.lockup{gap:10px}.top-actions .btn:first-child{display:none}.stage{height:64vh}}