@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}html{min-block-size:100%;height:100%;interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased;height:100%}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer style.guide{html{--space-1: 4px;--space-2: 8px;--space-3: 10px;--space-4: 12px;--space-5: 16px;--space-6: 20px;--space-7: 24px;--space-8: 32px;--space-9: 40px;--space-10: 44px;--radius-1: 0;--radius-2: 4px;--border-1: 1px;--border-2: 2px;--cell-width: 0;--cell-height: 0;--white: #ffffff;--black: #000000;--gray-000: #efefef;--gray-100: #dfdfdf;--gray-200: #cbcbcb;--gray-300: #b7b7b7;--gray-400: #969696;--gray-500: #747474;--gray-600: #616161;--gray-700: #3a3a3a;--gray-800: #1d1d1d;--gray-900: #121212;--umber-025: #fdfdfb;--umber-050: #f9f8f1;--umber-100: #f1efe4;--umber-200: #e2dfd1;--umber-300: #c9c6b8;--umber-400: #989588;--umber-500: #6a675b;--umber-600: #545246;--umber-700: #3e3c33;--umber-800: #292822;--umber-900: #1f1b1a;--umber-1000: #161313;--red-050: #ffefee;--red-100: #ffdedc;--red-200: #fdb2ae;--red-300: #f16d65;--red-400: #eb3d32;--red-500: #cd2424;--red-600: #af1f2a;--red-700: #9e1c32;--red-800: #861832;--red-900: #561b31;--orange-400: #ff4d00;--orange-500: #da5025;--yellow-400: #f3c348}:root{color-scheme:light dark;--spectrum-100: var(--yellow-400);--spectrum-200: var(--orange-500);--spectrum-300: var(--red-500);--spectrum-400: var(--red-700);--spectrum-500: var(--red-900);--surface-025: light-dark(var(--umber-025), var(--umber-1000));--surface-050: light-dark(var(--umber-050), var(--umber-900));--surface-100: light-dark(var(--umber-100), var(--umber-800));--surface-200: light-dark(var(--umber-200), var(--umber-700));--surface-300: light-dark(var(--umber-300), var(--umber-600));--surface-400: light-dark(var(--umber-400), var(--umber-500));--surface-500: light-dark(var(--umber-500), var(--umber-400));--surface-600: light-dark(var(--umber-600), var(--umber-300));--surface-700: light-dark(var(--umber-700), var(--umber-200));--surface-800: light-dark(var(--umber-800), var(--umber-100));--surface-900: light-dark(var(--umber-900), var(--umber-050));--border-050: light-dark(var(--umber-300), var(--umber-900));--border-100: light-dark(var(--umber-400), var(--umber-700));--border-200: light-dark(var(--umber-700), var(--umber-400));--border-300: light-dark(var(--umber-900), var(--umber-300));--text-primary-light: var(--umber-900);--text-primary-dark: var(--umber-050);--text-primary: light-dark(var(--text-primary-light), var(--text-primary-dark));--text-secondary: light-dark(var(--umber-600), var(--umber-300));--text-muted: light-dark(var(--umber-400), var(--umber-200));--text-accent: light-dark(var(--orange-500), var(--red-300));--accent-primary: light-dark(var(--orange-500), var(--red-400));--accent-secondary: hsl(from var(--accent-primary) h s l / .3);accent-color:var(--accent-primary);--surface-000: light-dark(var(--gray-000), var(--black));--border-000: light-dark(var(--gray-100), var(--gray-900));--focus: var(--orange-400);--hover: var(--orange-400);--active: var(--orange-400);--text: light-dark(var(--black), var(--gray-000));--text-hover: var(--orange-400);--text-light: var(--gray-500);--font-display-script: "Nanum Pen Script Regular", "Bradley Hand", cursive;--font-base: "DINish Expanded Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-caption: "DINish Heavy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-table: "DINish Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "PP Supply Mono Regular", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--font-symbol: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--quick-spring: cubic-bezier(.31,1.53,.38,.99)}}@layer style.fonts{@font-face{font-family:DINish Expanded Medium;src:url(/fonts/DINishExpanded-Medium.woff2) format("woff2");font-display:swap}@font-face{font-family:DINish Heavy;src:url(/fonts/DINish-Heavy.woff2) format("woff2");font-display:swap}@font-face{font-family:DINish Medium;src:url(/fonts/DINish-Medium.woff2) format("woff2");font-display:swap}@font-face{font-family:PP Supply Mono Regular;src:url(/fonts/PPSupplyMono-Regular.woff2) format("woff2");font-display:swap}@font-face{font-family:Nanum Pen Script Regular;src:url(/fonts/NanumPenScript-Regular.woff2) format("woff2");font-display:swap}}@layer style.global{*[tabindex="0"],input,textarea,select,button,a{outline-width:var(--border-2);outline-style:solid;outline-color:transparent;box-shadow:0 0 0 3px transparent;transition:outline-color .3s ease,outline-offset .1s ease,box-shadow .1s var(--quick-spring)}input:focus,textarea:focus,*[tabindex="0"]:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline-color:var(--accent-primary);outline-offset:-1px;box-shadow:0 0 0 3px var(--accent-secondary);z-index:1}::selection{background-color:var(--accent-primary);color:var(--white)}*{scrollbar-width:thin;scrollbar-color:var(--accent-primary) var(--surface-025)}body{padding:0;font-family:var(--font-base),sans-serif;background-color:var(--surface-100);color:var(--text-primary)}.interface-1{font-size:clamp(.875rem,2.439vw + .387rem,1rem);font-family:var(--font-mono),monospace}.interface-2{font-size:clamp(.8125rem,.014vw + .754rem,.875rem);font-family:var(--font-mono),monospace}h1,h2,h3,h4,h5,h6{font-weight:500;font-family:var(--font-base),sans-serif;line-height:1em;margin-top:0;margin-bottom:.5lh}h1,.h1{font-size:clamp(1.75rem,1.556vw + 1.439rem,2.25rem)}h2,.h2{font-size:clamp(1.5625rem,1.362vw + 1.29rem,2rem)}h3,.h3{font-size:clamp(1.375rem,.085vw + 1.103rem,1.8125rem)}h4,.h4{font-size:clamp(1.25rem,.073vw + 1.017rem,1.625rem)}h5,.h5{font-size:clamp(1.125rem,.073vw + .892rem,1.5rem)}h6,.h6{font-size:clamp(1rem,.049vw + .844rem,1.25rem)}p{max-inline-size:80ch;margin-bottom:1lh;&:last-child{margin-bottom:0}}p,span,li,a{font-size:clamp(.875rem,.778vw + .719rem,1.125rem)}.lead{font-size:clamp(1.125rem,.563vw + .825rem,1.5rem)}:not(:defined){opacity:0;transition:opacity .2s ease-in-out}:defined{opacity:1}}@layer style.cursors{:root{--cursor-default: image-set(url(/cursors/default@1x.svg) 1x, url(/cursors/default@2x.svg) 2x, url(/cursors/default@3x.svg) 3x, url(/cursors/default@4x.svg) 4x) 8 2, auto;--cursor-menu: image-set(url(/cursors/menu@1x.svg) 1x, url(/cursors/menu@2x.svg) 2x, url(/cursors/menu@3x.svg) 3x, url(/cursors/menu@4x.svg) 4x) 4 2, context-menu;--cursor-help: image-set(url(/cursors/help@1x.svg) 1x, url(/cursors/help@2x.svg) 2x, url(/cursors/help@3x.svg) 3x, url(/cursors/help@4x.svg) 4x) 12 12, help;--cursor-pointer: image-set(url(/cursors/pointer@1x.svg) 1x, url(/cursors/pointer@2x.svg) 2x, url(/cursors/pointer@3x.svg) 3x, url(/cursors/pointer@4x.svg) 4x) 8 6, pointer;--cursor-progress: image-set(url(/cursors/progress@1x.svg) 1x, url(/cursors/progress@2x.svg) 2x, url(/cursors/progress@3x.svg) 3x, url(/cursors/progress@4x.svg) 4x) 4 2, progress;--cursor-wait: image-set(url(/cursors/wait@1x.svg) 1x, url(/cursors/wait@2x.svg) 2x, url(/cursors/wait@3x.svg) 3x, url(/cursors/wait@4x.svg) 4x) 12 12, wait;--cursor-cell: image-set(url(/cursors/cell@1x.svg) 1x, url(/cursors/cell@2x.svg) 2x, url(/cursors/cell@3x.svg) 3x, url(/cursors/cell@4x.svg) 4x) 12 12, cell;--cursor-crosshair: image-set(url(/cursors/crosshair@1x.svg) 1x, url(/cursors/crosshair@2x.svg) 2x, url(/cursors/crosshair@3x.svg) 3x, url(/cursors/crosshair@4x.svg) 4x) 12 12, crosshair;--cursor-text: image-set(url(/cursors/text@1x.svg) 1x, url(/cursors/text@2x.svg) 2x, url(/cursors/text@3x.svg) 3x, url(/cursors/text@4x.svg) 4x) 12 12, text;--cursor-vertical-text: image-set(url(/cursors/vertical-text@1x.svg) 1x, url(/cursors/vertical-text@2x.svg) 2x, url(/cursors/vertical-text@3x.svg) 3x, url(/cursors/vertical-text@4x.svg) 4x) 12 12, vertical-text;--cursor-alias: image-set(url(/cursors/alias@1x.svg) 1x, url(/cursors/alias@2x.svg) 2x, url(/cursors/alias@3x.svg) 3x, url(/cursors/alias@4x.svg) 4x) 12 12, alias;--cursor-copy: image-set(url(/cursors/copy@1x.svg) 1x, url(/cursors/copy@2x.svg) 2x, url(/cursors/copy@3x.svg) 3x, url(/cursors/copy@4x.svg) 4x) 4 2, copy;--cursor-move: image-set(url(/cursors/move@1x.svg) 1x, url(/cursors/move@2x.svg) 2x, url(/cursors/move@3x.svg) 3x, url(/cursors/move@4x.svg) 4x) 12 12, move;--cursor-not-allowed: image-set(url(/cursors/not-allowed@1x.svg) 1x, url(/cursors/not-allowed@2x.svg) 2x, url(/cursors/not-allowed@3x.svg) 3x, url(/cursors/not-allowed@4x.svg) 4x) 4 2, not-allowed;--cursor-grab: image-set(url(/cursors/grab@1x.svg) 1x, url(/cursors/grab@2x.svg) 2x, url(/cursors/grab@3x.svg) 3x, url(/cursors/grab@4x.svg) 4x) 6 6, grab;--cursor-grabbing: image-set(url(/cursors/grabbing@1x.svg) 1x, url(/cursors/grabbing@2x.svg) 2x, url(/cursors/grabbing@3x.svg) 3x, url(/cursors/grabbing@4x.svg) 4x) 6 9, grabbing;--cursor-col-resize: image-set(url(/cursors/col-resize@1x.svg) 1x, url(/cursors/col-resize@2x.svg) 2x, url(/cursors/col-resize@3x.svg) 3x, url(/cursors/col-resize@4x.svg) 4x) 12 12, col-resize;--cursor-row-resize: image-set(url(/cursors/row-resize@1x.svg) 1x, url(/cursors/row-resize@2x.svg) 2x, url(/cursors/row-resize@3x.svg) 3x, url(/cursors/row-resize@4x.svg) 4x) 12 12, row-resize;--cursor-n-resize: image-set(url(/cursors/n-resize@1x.svg) 1x, url(/cursors/n-resize@2x.svg) 2x, url(/cursors/n-resize@3x.svg) 3x, url(/cursors/n-resize@4x.svg) 4x) 12 2, n-resize;--cursor-e-resize: image-set(url(/cursors/e-resize@1x.svg) 1x, url(/cursors/e-resize@2x.svg) 2x, url(/cursors/e-resize@3x.svg) 3x, url(/cursors/e-resize@4x.svg) 4x) 22 12, e-resize;--cursor-s-resize: image-set(url(/cursors/s-resize@1x.svg) 1x, url(/cursors/s-resize@2x.svg) 2x, url(/cursors/s-resize@3x.svg) 3x, url(/cursors/s-resize@4x.svg) 4x) 12 22, s-resize;--cursor-w-resize: image-set(url(/cursors/w-resize@1x.svg) 1x, url(/cursors/w-resize@2x.svg) 2x, url(/cursors/w-resize@3x.svg) 3x, url(/cursors/w-resize@4x.svg) 4x) 2 12, w-resize;--cursor-ne-resize: image-set(url(/cursors/ne-resize@1x.svg) 1x, url(/cursors/ne-resize@2x.svg) 2x, url(/cursors/ne-resize@3x.svg) 3x, url(/cursors/ne-resize@4x.svg) 4x) 20 5, ne-resize;--cursor-nw-resize: image-set(url(/cursors/nw-resize@1x.svg) 1x, url(/cursors/nw-resize@2x.svg) 2x, url(/cursors/nw-resize@3x.svg) 3x, url(/cursors/nw-resize@4x.svg) 4x) 5 5, nw-resize;--cursor-se-resize: image-set(url(/cursors/se-resize@1x.svg) 1x, url(/cursors/se-resize@2x.svg) 2x, url(/cursors/se-resize@3x.svg) 3x, url(/cursors/se-resize@4x.svg) 4x) 19 19, se-resize;--cursor-sw-resize: image-set(url(/cursors/sw-resize@1x.svg) 1x, url(/cursors/sw-resize@2x.svg) 2x, url(/cursors/sw-resize@3x.svg) 3x, url(/cursors/sw-resize@4x.svg) 4x) 5 19, sw-resize;--cursor-ew-resize: image-set(url(/cursors/ew-resize@1x.svg) 1x, url(/cursors/ew-resize@2x.svg) 2x, url(/cursors/ew-resize@3x.svg) 3x, url(/cursors/ew-resize@4x.svg) 4x) 12 12, ew-resize;--cursor-ns-resize: image-set(url(/cursors/ns-resize@1x.svg) 1x, url(/cursors/ns-resize@2x.svg) 2x, url(/cursors/ns-resize@3x.svg) 3x, url(/cursors/ns-resize@4x.svg) 4x) 12 12, ns-resize;--cursor-nesw-resize: image-set(url(/cursors/nesw-resize@1x.svg) 1x, url(/cursors/nesw-resize@2x.svg) 2x, url(/cursors/nesw-resize@3x.svg) 3x, url(/cursors/nesw-resize@4x.svg) 4x) 12 12, nesw-resize;--cursor-nwse-resize: image-set(url(/cursors/nwse-resize@1x.svg) 1x, url(/cursors/nwse-resize@2x.svg) 2x, url(/cursors/nwse-resize@3x.svg) 3x, url(/cursors/nwse-resize@4x.svg) 4x) 12 12, nwse-resize;--cursor-zoom-in: image-set(url(/cursors/zoom-in@1x.svg) 1x, url(/cursors/zoom-in@2x.svg) 2x, url(/cursors/zoom-in@3x.svg) 3x, url(/cursors/zoom-in@4x.svg) 4x) 10 10, zoom-in;--cursor-zoom-out: image-set(url(/cursors/zoom-out@1x.svg) 1x, url(/cursors/zoom-out@2x.svg) 2x, url(/cursors/zoom-out@3x.svg) 3x, url(/cursors/zoom-out@4x.svg) 4x) 10 10, zoom-out;--cursor-tl-rotate: image-set(url(/cursors/tl-rotate@1x.svg) 1x, url(/cursors/tl-rotate@2x.svg) 2x, url(/cursors/tl-rotate@3x.svg) 3x, url(/cursors/tl-rotate@4x.svg) 4x) 12 12, auto;--cursor-tr-rotate: image-set(url(/cursors/tr-rotate@1x.svg) 1x, url(/cursors/tr-rotate@2x.svg) 2x, url(/cursors/tr-rotate@3x.svg) 3x, url(/cursors/tr-rotate@4x.svg) 4x) 12 12, auto;--cursor-bl-rotate: image-set(url(/cursors/bl-rotate@1x.svg) 1x, url(/cursors/bl-rotate@2x.svg) 2x, url(/cursors/bl-rotate@3x.svg) 3x, url(/cursors/bl-rotate@4x.svg) 4x) 12 12, auto;--cursor-br-rotate: image-set(url(/cursors/br-rotate@1x.svg) 1x, url(/cursors/br-rotate@2x.svg) 2x, url(/cursors/br-rotate@3x.svg) 3x, url(/cursors/br-rotate@4x.svg) 4x) 12 12, auto}@supports (-moz-appearance: none){:root{--cursor-default: url(/cursors/default@1x.svg) 8 2, auto;--cursor-menu: url(/cursors/menu@1x.svg) 4 2, context-menu;--cursor-help: url(/cursors/help@1x.svg) 4 2, help;--cursor-pointer: url(/cursors/pointer@1x.svg) 8 6, pointer;--cursor-progress: url(/cursors/progress@1x.svg) 4 2, progress;--cursor-wait: url(/cursors/wait@1x.svg) 12 12, wait;--cursor-cell: url(/cursors/cell@1x.svg) 12 12, cell;--cursor-crosshair: url(/cursors/crosshair@1x.svg) 12 12, crosshair;--cursor-text: url(/cursors/text@1x.svg) 12 12, text;--cursor-vertical-text: url(/cursors/vertical-text@1x.svg) 12 12, vertical-text;--cursor-alias: url(/cursors/alias@1x.svg) 12 12, alias;--cursor-copy: url(/cursors/copy@1x.svg) 4 2, copy;--cursor-move: url(/cursors/move@1x.svg) 12 12, move;--cursor-not-allowed: url(/cursors/not-allowed@1x.svg) 4 2, not-allowed;--cursor-grab: url(/cursors/grab@1x.svg) 5 6, grab;--cursor-grabbing: url(/cursors/grabbing@1x.svg) 6 9, grabbing;--cursor-col-resize: url(/cursors/col-resize@1x.svg) 12 12, col-resize;--cursor-row-resize: url(/cursors/row-resize@1x.svg) 12 12, row-resize;--cursor-n-resize: url(/cursors/n-resize@1x.svg) 12 2, n-resize;--cursor-e-resize: url(/cursors/e-resize@1x.svg) 22 12, e-resize;--cursor-s-resize: url(/cursors/s-resize@1x.svg) 12 22, s-resize;--cursor-w-resize: url(/cursors/w-resize@1x.svg) 2 12, w-resize;--cursor-ne-resize: url(/cursors/ne-resize@1x.svg) 20 5, ne-resize;--cursor-nw-resize: url(/cursors/nw-resize@1x.svg) 5 5, nw-resize;--cursor-se-resize: url(/cursors/se-resize@1x.svg) 19 19, se-resize;--cursor-sw-resize: url(/cursors/sw-resize@1x.svg) 5 25, sw-resize;--cursor-ew-resize: url(/cursors/ew-resize@1x.svg) 10 10, ew-resize;--cursor-ns-resize: url(/cursors/ns-resize@1x.svg) 10 10, ns-resize;--cursor-nesw-resize: url(/cursors/nesw-resize@1x.svg) 10 10, nesw-resize;--cursor-nwse-resize: url(/cursors/nwse-resize@1x.svg) 10 10, nwse-resize;--cursor-zoom-in: url(/cursors/zoom-in@1x.svg) 10 10, zoom-in;--cursor-zoom-out: url(/cursors/zoom-out@1x.svg) 10 10, zoom-out;--cursor-tl-rotate: url(/cursors/tl-rotate@1x.svg) 12 12, auto;--cursor-tr-rotate: url(/cursors/tr-rotate@1x.svg) 12 12, auto;--cursor-bl-rotate: url(/cursors/bl-rotate@1x.svg) 12 12, auto;--cursor-br-rotate: url(/cursors/br-rotate@1x.svg) 12 12, auto}}body,html{cursor:var(--cursor-default)}button,.btn,a,.link,select,input[type=file],label,input[type=radio],input[type=checkbox],input[type=range],input[type=color],input[type=image],input[type=reset],input[type=submit]{cursor:var(--cursor-pointer)}input[type=text],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],input[type=time],input[type=email],input[type=month],input[type=password],input[type=search],input[type=url],input[type=week],textarea,[contenteditable]{cursor:var(--cursor-text)}[disabled]{cursor:var(--cursor-not-allowed)}}@layer style.util{.v-fill{height:100%}.h-fill{width:100%}.v-stack{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;&._1{gap:var(--space-1)}&._2{gap:var(--space-2)}&._3{gap:var(--space-3)}&._4{gap:var(--space-4)}&._5{gap:var(--space-5)}&._6{gap:var(--space-6)}&._7{gap:var(--space-7)}&._8{gap:var(--space-8)}&._9{gap:var(--space-9)}&._10{gap:var(--space-10)}}.h-stack{padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;&._1{gap:var(--space-1)}&._2{gap:var(--space-2)}&._3{gap:var(--space-3)}&._4{gap:var(--space-4)}&._5{gap:var(--space-5)}&._6{gap:var(--space-6)}&._7{gap:var(--space-7)}&._8{gap:var(--space-8)}&._9{gap:var(--space-9)}&._10{gap:var(--space-10)}}.box{display:flex;align-items:center;gap:0;padding:0;margin:0;&._1{padding:var(--space-1)}&._2{padding:var(--space-2)}&._3{padding:var(--space-3)}&._4{padding:var(--space-4)}&._5{padding:var(--space-5)}&._6{padding:var(--space-6)}&._7{padding:var(--space-7)}&._8{padding:var(--space-8)}&._9{padding:var(--space-9)}&._10{padding:var(--space-10)}}.dashed-border{--color: var(--border-300);--size: var(--border-1);--left: repeating-linear-gradient(0deg, var(--color), var(--color) 10px, transparent 10px, transparent 15px, var(--color) 15px );--top: repeating-linear-gradient(90deg, var(--color), var(--color) 10px, transparent 10px, transparent 15px, var(--color) 15px );--right: repeating-linear-gradient(180deg, var(--color), var(--color) 10px, transparent 10px, transparent 15px, var(--color) 15px );--bottom: repeating-linear-gradient(270deg, var(--color), var(--color) 10px, transparent 10px, transparent 15px, var(--color) 15px );position:relative;&:after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat}&._trbl:after{background-image:var(--left),var(--top),var(--right),var(--bottom);background-size:var(--size) 100%,100% var(--size),var(--size) 100%,100% var(--size);background-position:0 0,0 0,100% 0,0 100%}&._b:after{background-image:var(--bottom);background-size:100% var(--size);background-position:0 100%}&._r:after{background-image:var(--right);background-size:var(--size) 100%;background-position:100% 0}&._rb:after{background-image:var(--right),var(--bottom);background-size:var(--size) 100%,100% var(--size);background-position:100% 0,0 100%}}}@layer app.home{.sm-sz-only,.md-sz-only{display:none}home-page{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr;grid-template-areas:"header" "main";height:100dvh;overflow:hidden;outline:none;--target-size: round(clamp(44px, 4.63vw + 25.389px, 64px), 4px);--h-padding: round(clamp(16px, 9.756vw - 15.22px, 24px), 4px);--v-padding: round(clamp(16px, 19.512vw - 46.439px, 32px), 4px);&[hidden]{display:none}& header{grid-area:header;display:flex;gap:var(--v-padding);margin:auto;flex-direction:column;max-width:800px;padding:var(--v-padding) var(--h-padding)}.main,main{grid-area:main;display:flex}#features{grid-area:features;padding:var(--v-padding) var(--h-padding);border-top:var(--border-1) solid var(--border-300)}#tech-and-repo{grid-area:tech;padding:0;border-top:var(--border-1) solid var(--border-300)}}.frame{position:absolute;inset:0 384px 0 0;border-right:var(--border-1) solid var(--border-300);pointer-events:none;display:none}@media (780px <= height){home-page{grid-template-rows:auto 1fr auto;grid-template-areas:"header" "main" "tech"}.sm-sz-only{display:revert-layer}}@media (720px <= width) and (height <= 568px){home-page{grid-template-rows:1fr;grid-template-columns:1fr 1fr;grid-template-areas:"header main";.main,main{border-left:var(--border-1) solid var(--border-300)}}}@media (720px <= width) and (960px <= height){home-page{#tech-and-repo{padding:var(--v-padding) var(--h-padding)}}.icon-item{&.link{padding:0}}}@media (720px <= width <= 1200px) and (min-height: 960px){home-page{grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;grid-template-areas:"header header" "main main" "features tech"}.md-sz-only{display:revert-layer}.icon-item{justify-content:start}}@media (min-width: 1200px) and (min-height: 960px){home-page{grid-template-rows:auto 1fr auto;grid-template-columns:1fr 384px;grid-template-areas:"header features" "main ." ". tech";#features,#tech-and-repo{border:none}}.md-sz-only{display:revert-layer}.icon-item{justify-content:start}.frame{display:block}}@media (min-width: 1512px) and (min-height: 960px){home-page{grid-template-rows:auto 1fr auto;grid-template-columns:384px 1fr 384px;grid-template-areas:". header features" "main main main" ". . tech"}.frame{inset:0 384px;border-left:var(--border-1) solid var(--border-300)}}}@layer app.demos{demo-page{display:grid;grid-template-areas:"main" "nav";grid-template-rows:1fr auto;height:100dvh;overflow:hidden;background-color:var(--surface-050);outline:none;--nav-link-size: round(clamp(44px, 4.63vw + 25.389px, 64px), 4px);--nav-text-size: 0px;--h-padding: round(clamp(16px, 9.756vw - 15.22px, 24px), 4px);--v-padding: round(clamp(16px, 19.512vw - 46.439px, 32px), 4px);&[hidden]{display:none}&:focus-visible{outline:none}.main,main{grid-area:main;display:grid;grid-template-areas:"stage";grid-template-columns:1fr;position:relative;overflow:hidden;container:main / size}& nav{grid-area:nav;display:flex;flex-direction:row;align-items:center;justify-content:center;border-top:var(--border-1) solid var(--border-200);container:nav / inline-size;padding:0 var(--h-padding);& *{flex-shrink:0}}}.lhs-panel{--nav-height: calc(var(--nav-link-size) + var(--nav-text-size) + var(--space-2) + 1px);width:80%;max-width:512px;height:100cqh;padding:0;background-color:var(--surface-050);border:none;border-right:var(--border-1) solid var(--border-200);>.content{display:flex;flex-direction:column;gap:64px;background-color:var(--surface-050);padding:var(--v-padding) var(--h-padding);height:100cqh;overflow-y:auto;overscroll-behavior:contain;&[hidden]{display:none}}}.lhs-panel[popover]{position:absolute;inset:0 auto 0 0;width:100%;border:none;border-top:var(--border-1) solid var(--border-200);height:calc(100dvh - var(--nav-height) - 34px);transform:translateY(100%);transition:transform .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}.lhs-panel[popover]:popover-open{transform:translateY(34px);@starting-style{transform:translateY(100%)}}.section-label{text-transform:uppercase;color:var(--accent-primary);font-family:var(--font-mono),monospace;font-size:clamp(.875rem,2.439vw + .387rem,1rem);line-height:1em;&:before{content:"";width:.8em;height:.8em;background-color:var(--accent-primary);display:inline-block;margin-right:.5em}}.spectrum{& li{&:nth-of-type(1){--spectrum: var(--spectrum-100)}&:nth-of-type(2){--spectrum: var(--spectrum-200)}&:nth-of-type(3){--spectrum: var(--spectrum-300)}&:nth-of-type(4){--spectrum: var(--spectrum-400)}&:nth-of-type(5){--spectrum: var(--spectrum-500)}}}.stage{--padding: var(--h-padding);padding:var(--padding);position:relative;width:100%;height:100%;grid-area:stage;container:stage / size}.demo-carousel{display:flex;flex-flow:row nowrap;align-items:center;justify-content:start;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-color:transparent transparent;border:var(--border-1) solid transparent}.demo-box{width:100cqw;height:100cqh;display:flex;flex:0 0 auto;flex-flow:row nowrap;align-items:center;justify-content:center;scroll-snap-align:center}@media (512px <= width) and (512px <= height){demo-page{--nav-text-size: 1.5rem}}@media (512px <= width){demo-page{& nav{justify-content:space-between}}.lhs-panel[popover]{inset:0 auto 0 0;width:80%;max-width:512px;border:none;border-right:var(--border-1) solid var(--border-200);height:calc(100dvh - var(--nav-height));transform:translate(-100%);transition:transform .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}.lhs-panel[popover]:popover-open{transform:translate(0);@starting-style{transform:translate(-100%)}}}@media (1512px <= width){demo-page{.main,main{grid-template-areas:"aside stage";grid-template-columns:auto 1fr}}.lhs-panel{grid-area:aside;width:448px}}}@layer components.heroLogo{.hero-logo{filter:blur(.5px);transition:filter .3s ease;user-select:none;&:hover{filter:blur(0)}& img{height:round(clamp(48px,14vw + 3.2px,104px),4px)}}}@layer components.iconListItem{.icon-item{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-3);& *{flex-shrink:0}>.container,>picture{width:var(--target-size);height:var(--target-size);container:icon-box / size;position:relative;& img,svg{position:absolute;inset:0;margin:auto;width:100cqw;height:100cqh;&._8{width:calc(100cqw - 8px);height:calc(100cqh - 8px)}&._12{width:calc(100cqw - 12px);height:calc(100cqh - 12px)}}}&.link{text-decoration:none;color:var(--text-primary);padding:var(--space-2) 0;&:hover,&:active{background-color:var(--surface-900);color:var(--surface-050)}}}@media (720px <= width) and (960px <= height){.icon-item{justify-content:start}}}@layer components.topLight{.top-light{background-image:linear-gradient(to bottom,white,transparent);opacity:.8;mix-blend-mode:overlay;position:absolute;inset:0;pointer-events:none}@media (prefers-color-scheme: dark){.top-light{background-image:linear-gradient(to bottom,#FFD13A,transparent);opacity:.03;mix-blend-mode:lighten}}}@layer components.tint{.tint{--tint-shade: color-mix(in hsl, var(--surface-100), var(--surface-200));position:absolute;inset:0;opacity:.24;mix-blend-mode:multiply;pointer-events:none;background-image:linear-gradient(to top,var(--tint-shade) 30%,transparent)}}@layer components.grid{rwd-grid{position:absolute;inset:var(--padding) var(--padding);pointer-events:none;container:grid / size;.grid{width:100cqw;height:100cqh;border:var(--border-1) solid var(--border-200);--cell-size-estimate: clamp(48px, 7.06cqw + 42px, 108px);--columns: ;--rows: ;--cell-width: calc(100cqw / var(--columns));--cell-height: calc(100cqh / var(--rows));background-image:linear-gradient(var(--border-200) 1px,transparent 1px),linear-gradient(to right,var(--border-200) 1px,transparent 1px);background-size:var(--cell-width) var(--cell-height);background-position:-1px -1px;background-repeat:repeat;opacity:.4}}.temp{position:absolute;left:-9999px;top:-9999px;pointer-events:none;visibility:hidden}}@layer components.kbd{kbd{font-family:var(--font-mono),monospace;font-size:clamp(.75rem,.231vw + .692rem,.8125rem);line-height:1;color:var(--text-primary);background-color:var(--surface-050);display:inline-flex;align-items:center;justify-content:center;padding:2px 5px 1px;border-radius:var(--radius-2);border:var(--border-1) solid var(--text-primary);box-shadow:0 3px var(--text-primary);user-select:none;-webkit-user-select:none;flex:0 0;white-space:nowrap;&.modifier{font-family:var(--font-symbol),sans-serif}}.key-combo{display:flex;flex-direction:row;flex-wrap:wrap;gap:2px}.keys{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-2)}}@layer components.table{table{font-family:var(--font-table),sans-serif;border:var(--border-1) solid var(--border-300);border-collapse:collapse;width:100%;margin-bottom:2rem;table-layout:fixed;&:last-child{margin-bottom:0}}colgroup col:nth-child(1){width:45%}.mac colgroup col:nth-child(1){width:60%}tr{border-bottom:var(--border-1) solid var(--border-300);height:auto;&:hover{background-color:var(--surface-200)}}caption{font-family:var(--font-caption),sans-serif;font-size:clamp(.875rem,.463vw + .759rem,1rem);text-transform:uppercase;border:var(--border-1) solid var(--border-300);border-bottom-width:0;height:2rem;line-height:2rem;text-align:center}td{padding:var(--space-2) var(--space-3);height:2.75rem;white-space:nowrap;font-size:.8125rem;font-family:var(--font-mono),monospace}td.item{font-family:var(--font-table),sans-serif;font-size:clamp(1rem,.463vw + .884rem,1.125rem);text-align:center;text-transform:uppercase;border:var(--border-1) solid var(--border-300)}}@layer components.input{.grid-4{display:grid;grid-template-columns:minmax(80px,1fr) minmax(80px,1fr);gap:var(--space-5);align-items:center}.demo-form{overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-auto-flow:row;width:min(100cqw - var(--space-8),400px);height:fit-content;max-height:calc(100cqh - var(--space-8));container-type:inline-size;>*{padding:var(--space-5)}.vh-stack{display:flex;flex-flow:column nowrap;gap:var(--space-5)}}@container stage (min-width: 724px) and (min-height: 560px){.demo-form{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"a c" "a d" "a e" "b f";width:min(100cqw - var(--space-8),724px);.area-a{grid-area:a;grid-template-rows:auto 1fr;&:after{background-image:var(--right),var(--bottom);background-size:var(--size) 100%,100% var(--size);background-position:100% 0,0 100%}>rw-textarea{height:100%}}.area-b{grid-area:b;&:after{background-image:var(--right);background-size:var(--size) 100%;background-position:100% 0}}.area-c{grid-area:c}.area-d{grid-area:d}.area-e{grid-area:e}.area-f{grid-area:f}.vh-stack{flex-flow:row nowrap}}}::placeholder{color:var(--text-muted);opacity:1}label{user-select:none;--webkit-user-select: none}textarea{resize:none;padding:var(--space-1);min-height:4.5rem}input,textarea{border-color:var(--border-300);background-color:var(--surface-025)}select,button,input[type=color]{border-color:var(--border-300);background-color:var(--surface-100)}input:not([type=radio],[type=checkbox]),select{height:1.5rem;padding:0 var(--space-1)}input,select,button,textarea{border-style:solid;border-width:var(--border-1);border-radius:var(--radius-1);margin:0;&:focus,&:focus-visible{outline-width:var(--border-1)}&:hover{border-color:var(--accent-primary)}&:disabled{opacity:.3;cursor:var(--cursor-not-allowed)}}input[type=radio]{border-radius:50%}input:not([type=radio],[type=checkbox],[type=color]),textarea,select{width:100%}fieldset{border-width:0;margin:0;padding:0}legend{margin:0 0 var(--space-2);padding:0 0 var(--space-2) 0;position:relative;user-select:none;--webkit-user-select: none}label,legend{color:var(--text-secondary);line-height:1.5rem;min-height:1lh;display:inline-block}input[type=checkbox],input[type=radio]{appearance:none;height:.875rem;width:.875rem;&:disabled:checked{background-color:var(--text-primary)}}input[type=checkbox]{&:not(:disabled):checked{background-color:var(--accent-primary);border-color:var(--accent-primary)}&:checked{background-repeat:no-repeat;background-position:center center;background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5041 3.55116L4.48848 8.56678C4.37128 8.6839 4.21237 8.7497 4.04668 8.7497C3.88099 8.7497 3.72208 8.6839 3.60489 8.56678L0.80723 5.75428C0.690228 5.6371 0.624512 5.47827 0.624512 5.31268C0.624512 5.14709 0.690228 4.98826 0.80723 4.87108L1.58848 4.08983C1.70561 3.97318 1.86419 3.9077 2.0295 3.9077C2.1948 3.9077 2.35338 3.97318 2.47051 4.08983L4.06231 5.63358L7.84199 1.90038C7.95915 1.78361 8.1178 1.71805 8.28321 1.71805C8.44861 1.71805 8.60727 1.78361 8.72442 1.90038L9.50371 2.66366C9.56232 2.72173 9.60885 2.79084 9.64061 2.86699C9.67237 2.94314 9.68875 3.02482 9.68878 3.10733C9.68882 3.18983 9.67252 3.27153 9.64082 3.34771C9.60912 3.42388 9.56266 3.49303 9.5041 3.55116Z' fill='%23FDFDFB'/%3E%3C/svg%3E")}&:indeterminate{background-repeat:no-repeat;background-position:center center;background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='3.5' width='10' height='3' rx='0.5' fill='%23FDFDFB'/%3E%3C/svg%3E")}}input[type=radio]{position:relative;&:after{content:"";position:absolute;inset:0;margin:auto;display:block;width:.5rem;height:.5rem;border-radius:50%;background-color:var(--accent-primary);opacity:0;transform:scale(.8);transition:opacity 60ms ease,transform .1s var(--quick-spring)}&:not(:disabled):checked{border-color:var(--accent-primary)}&:checked:after{transform:scale(1);opacity:1}&:disabled:checked:after{background-color:var(--text-primary)}}.input{display:inline-flex;gap:var(--space-2);align-items:center;&.fixed-label{display:flex;flex-flow:column nowrap;align-items:start;>:first-child{width:100%;flex-grow:1;flex-shrink:0}>:nth-child(2){flex-grow:1;align-self:stretch}}}@container (min-width: 360px){.input{&.fixed-label{display:inline-flex;flex-flow:row nowrap;align-items:center;>:first-child{width:6rem;flex-shrink:0}>:nth-child(2){flex-grow:1;width:100%;align-self:stretch;height:100%}}}}input,select,textarea,button,label,legend{font-size:clamp(.8125rem,.014vw + .754rem,.875rem);font-family:var(--font-mono),monospace;padding-top:.2em;padding-bottom:.1em;line-height:1}rw-checkbox,rw-number-box,rw-text-box,rw-textarea,rw-url-box,rw-date-box,rw-time-box,rw-month-box,rw-week-box,rw-tel-box,rw-password-box,rw-datetime-local-box,rw-color-box,rw-radio-group,rw-range{line-height:1;height:min-content}}@layer components.input{.nav-link{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-decoration:none;color:var(--text-primary);position:relative;padding:0 0 var(--space-2);border:none;background-color:transparent;line-height:unset;user-select:none;-webkit-user-select:none;&:hover,&:active{background-color:var(--surface-900);color:var(--surface-050);.swatch{border-color:var(--surface-050)}}&[aria-current=page]{color:var(--accent-primary);.swatch{border-color:var(--accent-primary)}}>*:first-child{width:var(--nav-link-size);height:var(--nav-link-size);container:icon-box / size}>*:nth-child(2){height:1.5rem}.container,picture{position:relative;& img,svg{position:absolute;inset:0;margin:auto}}.nav-icon{width:calc(100cqw - 20px);height:calc(100cqw - 20px)}.home-icon{width:calc(100cqw - 8px);height:calc(100cqw - 8px)}}.swatch{align-self:stretch;width:100%;aspect-ratio:1 / 1;background-color:var(--spectrum);border:var(--border-1) solid transparent}}@layer components.input{.demo-list{display:flex;flex-direction:column;align-self:center;padding:0;list-style:none;margin:0;width:100%;overflow:hidden;height:round(clamp(220px,21.93dvh + 95.439px,320px),20px);filter:blur(1px);counter-reset:item;&:hover>li:not(:hover,:focus-within){color:transparent}}.demo-list>li{height:100%;flex:1;min-height:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--spectrum);position:relative;transition:flex-grow .6s var(--quick-spring),color .2s ease;will-change:flex-grow;counter-increment:item;&:nth-of-type(1){color:var(--text-primary-light)}&:nth-of-type(2){color:var(--text-primary-light)}&:nth-of-type(3){color:var(--text-primary-dark)}&:nth-of-type(4){color:var(--text-primary-dark)}&:nth-of-type(5){color:var(--text-primary-dark)}&:hover{flex-grow:3}.bleed{position:absolute;left:0;right:0;height:12px;mix-blend-mode:overlay;opacity:.4;pointer-events:none;&.top{top:0;background-image:linear-gradient(to bottom,black,transparent)}&.bottom{bottom:0;background-image:linear-gradient(to top,white,transparent)}}}.demo-list>li:before{content:"[" counter(item) "]";font-family:var(--font-mono),monospace;font-size:clamp(.875rem,2.439vw + .387rem,1rem);margin-left:var(--h-padding);position:absolute;inset:auto 0;display:none}.demo-list>li a{text-decoration:none;color:inherit;flex-grow:1;height:100%;display:flex;align-items:center;justify-content:center;container:link-item / size;outline:none;box-shadow:none;&:focus-visible{background-color:var(--surface-900);color:var(--surface-050);outline:none;box-shadow:none}& span{font-family:var(--font-display-script),cursive;font-size:90cqh}}@media (min-width: 1200px) and (min-height: 860px){.demo-list{& li:before{display:revert-layer}}}}@layer components.input{rwd-tile,rwd-rw-tile{container:tile / size;width:80px;height:80px;position:absolute;top:0;left:0;font-family:var(--font-display-script),cursive;font-size:clamp(2.625rem,87.5cqw - .875rem,3.5rem);background-color:var(--surface-100);cursor:var(--cursor-pointer);outline-offset:0;border:var(--border-1) solid var(--border-300);border-radius:var(--radius-1);display:flex;align-items:center;justify-content:center;color:var(--text-primary);user-select:none;--webkit-user-select: none;overflow:hidden;transition:outline .1s ease;&:hover{outline:var(--accent-primary) solid var(--border-1);outline-offset:calc(-1*(var(--border-1)))}&:focus{z-index:1;outline:var(--accent-primary) solid var(--border-2);outline-offset:calc(-1*(var(--border-1)));color:var(--accent-primary)}}}@layer components.input{rwd-text-node{font-size:1rem;font-family:var(--font-mono),monospace;min-width:30px;width:max-content;padding:4px;position:absolute;top:0;left:0;cursor:var(--cursor-grab);outline-offset:0;border:1px dashed var(--border-100);display:flex;align-items:center;justify-content:center;color:var(--text);user-select:none;--webkit-user-select: none;transition:outline .1s ease,box-shadow .1s ease;touch-action:none;&:hover{outline:var(--active) solid 1px;outline-offset:-1px}&:focus,&:focus-visible,&.drag{z-index:1;outline:var(--active) solid 1px;outline-offset:-1px;box-shadow:none;.handle{visibility:visible}}&.drag{cursor:var(--cursor-grabbing);[contenteditable]{cursor:var(--cursor-grabbing)}}.handle{position:absolute;width:8px;height:8px;border:1px solid var(--active);background-color:var(--surface-025);z-index:1;visibility:hidden;&.tl{top:-4px;left:-4px}&.tr{top:-4px;right:-4px}&.bl{bottom:-4px;left:-4px}&.br{bottom:-4px;right:-4px}}[contenteditable]{cursor:text;flex-grow:1;&:focus{outline:none;box-shadow:none}}&:has([contenteditable]:focus){outline:var(--active) solid 2px;outline-offset:-1px;box-shadow:0 0 0 6px color-mix(in hsl,var(--active),transparent 80%);.handle{visibility:hidden}}}:has(.drag){cursor:var(--cursor-grabbing)}}@layer components.board{.grid-bg{--padding: round(clamp(10px, 7.317cqw - 8.732px, 22px), 2px);width:calc(100cqw - var(--padding) * 2);height:calc(100cqh - var(--padding) * 2);position:relative;background-color:var(--surface-200);background-image:repeating-linear-gradient(0deg,var(--surface-050) 0px 8px,transparent 8px 10px),repeating-linear-gradient(90deg,var(--surface-050) 0px 8px,transparent 8px 10px);background-size:10px 10px;background-position:-5px -5px;overflow:hidden;outline:none;box-shadow:none;&:focus,&:focus-within,&:focus-visible{outline:none;box-shadow:none}}}@layer components.shell{rwd-shell{--width: clamp(256px, 100cqw - var(--space-8), 420px);--height: clamp(256px, 100cqh - var(--space-8), 420px);--size: min(var(--width), var(--height));width:var(--size);aspect-ratio:1 / 1;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background-color:var(--surface-050);border:var(--border-2) solid var(--border-100);overflow:hidden;outline:none;box-shadow:none;container:shell / size;&.unset-size{aspect-ratio:unset;width:unset;height:unset;container-type:unset}&[hidden]{display:none}>header{position:absolute;inset:0 0 auto;width:100%;display:flex;justify-content:center;align-items:center;padding:var(--space-1);>h2{font-size:.75rem;margin:0;color:var(--text-light);user-select:none;-webkit-user-select:none}}&:focus,&:focus-within,&:focus-visible{border-color:var(--border-200);outline:none;box-shadow:none;z-index:1}}}@layer components.noiseCanvas{rwd-static-noise{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.6}@media (prefers-color-scheme: dark){rwd-static-noise{mix-blend-mode:overlay;opacity:.4}}}@layer components.pageNavigator{rwd-page-navigator{border:none;outline:none;box-shadow:none;background-color:var(--surface-050);&:focus,&:focus-within,&:focus-visible{outline:none;border:none;box-shadow:none}.page{min-height:100dvh}}@keyframes move-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes move-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes move-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes move-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@supports (view-transition-name: root){:root{view-transition-name:root;--old-animation: move-out-up;--new-animation: move-in-from-bottom}::view-transition-old(root){animation:.6s ease-out forwards var(--old-animation)}::view-transition-new(root){animation:.6s ease-out forwards var(--new-animation)}::view-transition-group(root){animation-duration:.6s}}}@layer util.layout{.sm-only{display:revert-layer}.md-width-only,.md-height-only,.md-only,.lg-only{display:none}@media (512px <= width){.md-width-only{display:revert-layer}}@media (512px <= height){.md-height-only{display:revert-layer}}@media (512px <= width) and (512px <= height){.md-only{display:revert-layer}}@media (1512px <= width){.sm-only{display:none}.lg-only{display:revert-layer}}}