:root{font-family:system-ui,Segoe UI,Roboto,sans-serif;line-height:1.5;color:#e8e8ec}*{box-sizing:border-box}html{height:100%;background-color:#0a0a0d}body{margin:0;min-height:100%;min-height:100dvh;background-color:#0a0a0d;background-image:url(/examples/background.png);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:#08080cc7}#root{position:relative;z-index:1;min-height:100%;min-height:100dvh}code{font-size:.92em}.parallax-root{position:relative;min-height:100%;min-height:100dvh;overflow:hidden}.parallax-layer{position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-size:cover;background-position:center;will-change:transform;transition:transform .12s ease-out;pointer-events:none}.parallax-back{z-index:0}.parallax-mid{z-index:1;opacity:.35;background-image:radial-gradient(circle at 30% 20%,rgba(120,90,200,.25),transparent 45%),radial-gradient(circle at 70% 60%,rgba(60,140,200,.2),transparent 40%);mix-blend-mode:screen}.parallax-veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:radial-gradient(ellipse at center,#0a0a0f33,#050508d9);pointer-events:none}.parallax-children{position:relative;z-index:3;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}.background-text-overlay--corner{position:fixed;top:max(.5rem,env(safe-area-inset-top,0px));right:max(.5rem,env(safe-area-inset-right,0px));left:auto;width:clamp(10rem,46vmin,28rem);max-width:min(92vw,32rem);max-height:min(38vmin,48vh);pointer-events:none;z-index:4;display:flex;align-items:flex-start;justify-content:flex-end}.background-text-overlay--corner img{display:block;width:100%;height:auto;max-height:min(38vmin,48vh);object-fit:contain;object-position:top right}.panel{width:min(100%,520px);padding:1.75rem;border-radius:12px;background:#121218d1;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px #00000073;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel.narrow{max-width:480px;margin:2rem auto}.landing-panel .title,.hub-panel .title{margin:0 0 .35rem;font-size:1.5rem;font-weight:650}.subtitle{margin:0 0 1.25rem;color:#a4a4b8;font-size:.95rem}.stack{display:flex;flex-direction:column;gap:.75rem}.landing-auth-form{width:100%;max-width:22rem;align-self:center}.landing-auth-actions{display:flex;flex-wrap:wrap;gap:.5rem}.character-anim-panel{width:min(100%,640px)}.character-anim-preview{margin:1rem 0}.character-anim-canvas{display:block;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#111}[data-pixel-canvas-theme=light] .character-anim-canvas{border-color:#00000024;background:#e4e4e8}.character-anim-toolbar{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}.character-anim-field-inline{flex-direction:row;align-items:center;gap:.4rem;margin:0}.character-anim-field-inline .field-label{margin:0;min-width:2.5rem}.character-sheet-anim{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}.character-sheet-anim-title{margin:0 0 .35rem;font-size:1rem;font-weight:600}.character-sheet-anim-desc{margin:0 0 .75rem}.character-sheet-anim-toolbar{margin-top:.65rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:inherit;font:inherit;cursor:pointer;text-decoration:none;text-align:center}.btn.primary{background:linear-gradient(180deg,#5b8cff,#3d6ae0);border-color:#fff3;color:#fff}.btn.ghost{background:transparent}.btn:disabled{opacity:.55;cursor:not-allowed}.field{display:flex;flex-direction:column;gap:.35rem;text-align:left}.field-label{font-size:.8rem;color:#9898a8}.field input{padding:.55rem .65rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#00000059;color:inherit;font:inherit}.hub-actions{display:flex;flex-wrap:wrap;gap:.75rem}.hub-panel .hub-actions{margin-top:.5rem}.badge{display:inline-block;margin:0 0 .75rem;padding:.25rem .6rem;border-radius:999px;font-size:.78rem;color:#c8c8d8;background:#ffffff0f;border:1px solid rgba(255,255,255,.08)}.link-back{display:inline-block;margin-top:1.25rem;color:#9ab6ff;text-decoration:none}.link-back:hover{text-decoration:underline}.link-inline{color:#9ab6ff;text-decoration:none;white-space:nowrap}.link-inline:hover{text-decoration:underline}.muted{color:#9898a8}.error{margin:0;color:#ff8b8b;font-size:.9rem}.ok{margin:0;color:#8fd9a8}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:1rem}.modal{width:min(100%,420px);padding:1.25rem;border-radius:12px;background:#14141c;border:1px solid rgba(255,255,255,.1)}.modal h2{margin:0 0 .5rem;font-size:1.15rem}.modal-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.save-modal{max-width:420px}.save-id-code{display:block;padding:.5rem .65rem;border-radius:6px;background:#00000059;font-size:.85rem;word-break:break-all}.editor-home-panel{width:min(100%,560px)}.editor-home-panel--browse{width:min(100%,920px);max-width:920px}.share-panel--wide{width:min(100%,560px);max-width:560px}.share-preview{margin:1rem 0;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#111;display:flex;align-items:center;justify-content:center;min-height:120px;max-height:400px;overflow:hidden}.share-preview img{max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;display:block}.share-meta-line{font-size:.9rem;color:#a4a4b8;margin:.35rem 0}.share-meta-line code{font-size:.82em}.share-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}.share-tag{font-size:.75rem;padding:.15rem .45rem;border-radius:4px;background:#ffffff14}.sprite-browse-filters{display:flex;flex-wrap:wrap;gap:.5rem}.sprite-browse-filters .filter-pill{border-radius:999px;padding:.35rem .85rem;font-size:.88rem;border:1px solid rgba(255,255,255,.14);background:#0003;color:inherit;cursor:pointer;font:inherit}.sprite-browse-filters .filter-pill:hover{border-color:#ffffff38}.sprite-browse-filters .filter-pill.is-active{border-color:#788cff73;background:#505ab433}.sprite-browse-grid{display:grid;gap:.75rem;max-height:min(58vh,520px);overflow-y:auto;padding:.15rem .25rem;margin:0 -.25rem}.sprite-browse-grid--editor-load{display:flex;flex-wrap:wrap;align-content:flex-start}.sprite-browse-card{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;padding:.5rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#00000040;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .08s ease,background .08s ease}.sprite-browse-card:hover{border-color:#788cff59;background:#00000059}.sprite-browse-card.is-character{opacity:.65}.sprite-browse-thumb-wrap{aspect-ratio:1;width:100%;border-radius:4px;border:1px solid rgba(255,255,255,.08);background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}.sprite-browse-thumb{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.sprite-browse-meta{font-size:.8rem;line-height:1.25;min-height:2.5em}.sprite-browse-meta strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sprite-browse-meta span{color:#9898a8;font-size:.76rem}.category-grid{display:flex;flex-direction:column;gap:.65rem}.category-btn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.25rem;padding:.85rem 1rem}.category-title{font-weight:600}.category-desc{font-size:.85rem;color:#a4a4b8;font-weight:400;line-height:1.35}.editor-shell{min-height:100vh;padding:1rem 1.25rem 2rem;max-width:1100px;margin:0 auto}.editor-shell--page{display:flex;flex-direction:column;box-sizing:border-box}.gallery-page-body{flex:1;min-height:0;overflow-y:auto;padding:.15rem 0 .5rem}.sprite-gallery-stack--full{min-height:0}.sprite-browse-grid--full{max-height:none}.sprite-gallery-zoom{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:.35rem 0 .15rem;width:100%}.sprite-gallery-zoom-label{font-size:.82rem;color:#9898a8;margin-right:.15rem}.sprite-gallery-zoom-value{font-size:.85rem;font-variant-numeric:tabular-nums;min-width:3.25rem;text-align:center}.sprite-gallery-zoom-btn{min-width:2.25rem;padding-left:.5rem;padding-right:.5rem}.sprite-gallery-zoom-reset{font-size:.85rem}.gallery-zoom-slider{flex:1 1 140px;max-width:min(100%,18rem);min-width:6rem;height:.45rem;accent-color:rgba(120,140,255,.85);cursor:pointer}.page-block-pad{padding:0 0 1rem}.examples-page{max-width:920px;margin:0 auto}.examples-page-body{max-width:52rem}.examples-lead{margin:0 0 1.5rem;line-height:1.5}.examples-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.08)}.examples-section:last-of-type{border-bottom:none}.examples-section--files{padding-bottom:0}.examples-section p{margin:0 0 .75rem;line-height:1.55;color:#c8c8d8}.examples-h2{margin:0 0 .65rem;font-size:1.1rem;font-weight:600}.examples-h3{margin:1.25rem 0 .5rem;font-size:.95rem;font-weight:600;color:#b8b8c8}.examples-media-row--single{grid-template-columns:1fr;max-width:min(100%,36rem)}.examples-char-gif-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.5rem}@media(min-width:520px){.examples-char-gif-grid{grid-template-columns:1fr 1fr}}.examples-code{font-size:.88em;padding:.1em .35em;border-radius:4px;background:#00000059;border:1px solid rgba(255,255,255,.08)}.examples-media-row{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}@media(min-width:720px){.examples-media-row{grid-template-columns:1fr 1fr;align-items:start}}.examples-media-row--character{grid-template-columns:1fr}@media(min-width:900px){.examples-media-row--character{grid-template-columns:1fr 1fr}}.examples-figure{margin:0}.examples-figure-frame{border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#111;padding:.2rem;display:flex;align-items:center;justify-content:center;min-height:140px}.examples-asset{display:block;width:100%;max-width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}.examples-asset--gif{max-height:min(480px,62vh);width:100%;max-width:100%;height:auto;object-fit:contain}.examples-figcaption{margin-top:.45rem;font-size:.82rem;color:#9898a8}.examples-asset-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.25rem .75rem;text-align:center;min-height:120px}.examples-asset-missing-name{font-family:ui-monospace,monospace;font-size:.85rem;color:#a8a8b8}.examples-file-list{margin:.25rem 0 0;padding-left:1.25rem;line-height:1.7;color:#c8c8d8}.examples-file-list code{font-size:.88em}.examples-footer{margin-top:1.5rem;font-size:.88rem}.view-public-body{width:100%}.view-public-column{flex:1 1 100%;max-width:100%}.view-public-preview{min-height:min(52vh,480px);max-height:min(82vh,880px)}.view-public-preview.share-preview img{max-height:min(78vh,840px)}.view-public-zoom-viewport{width:100%;max-width:720px;height:min(62vh,520px);min-height:12rem;margin:1rem 0;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#111;overflow:auto;display:flex;align-items:center;justify-content:center;padding:.75rem;box-sizing:border-box}.view-public-zoom-img{display:block;flex-shrink:0;image-rendering:pixelated;image-rendering:crisp-edges}.editor-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.editor-header .title{margin:0 0 .25rem;font-size:1.35rem}.editor-header .title .title-size{font-weight:500;color:#a4a4b8;font-size:.92em}.editor-header-actions{display:flex;flex-wrap:wrap;gap:.5rem}.editor-body{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start}.editor-column{flex:1 1 280px;display:flex;flex-direction:column;gap:1rem}.editor-pixel-stack{display:flex;flex-direction:column;gap:1rem}.pixel-canvas-wrap{display:flex;flex-direction:column;gap:.35rem}.pixel-canvas-stage{position:relative;display:inline-block;line-height:0;vertical-align:top;border-radius:6px;overflow:hidden}.pixel-canvas-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.52) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.52) 1px,transparent 1px),linear-gradient(to right,rgba(0,0,0,.45) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.45) 1px,transparent 1px);background-position:0 0,0 0,1px 1px,1px 1px}.pixel-canvas-stage--light .pixel-canvas-grid-overlay{background-image:linear-gradient(to right,rgba(0,0,0,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.16) 1px,transparent 1px),linear-gradient(to right,rgba(255,255,255,.75) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.75) 1px,transparent 1px)}.pixel-canvas-wrap--light .pixel-canvas-label{color:#5a5a68}.pixel-canvas-label{font-size:.8rem;color:#9898a8}.pixel-canvas{display:block;border-radius:6px;border:2px solid rgba(255,255,255,.12);background:#111;cursor:crosshair;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}.pixel-canvas-stage--light .pixel-canvas{border-color:#0000002e;background:#e4e4e8}.pixel-canvas-active{border-color:#5b8cffa6;box-shadow:0 0 0 1px #5b8cff40}.pixel-canvas-stage--light .pixel-canvas-active{border-color:#2d5fdcd9;box-shadow:0 0 0 1px #2d5fdc59}.pixel-toolbar{flex:0 0 260px;display:flex;flex-direction:column;gap:1rem;padding:1rem;border-radius:10px;background:#121218e6;border:1px solid rgba(255,255,255,.08)}.pixel-toolbar-heading{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#8888a0}.pixel-toolbar-group{display:flex;flex-direction:column;gap:.5rem}.pixel-toolbar-row{display:flex;flex-wrap:wrap;gap:.5rem}.toolbar-btn-wide{width:100%;justify-content:center}.color-wheel-wrap{width:100%;max-width:220px}.color-wheel-wrap .react-colorful{width:100%;height:168px}.pixel-canvas-eyedropper{cursor:crosshair}.pixel-canvas-eraser{cursor:cell}.toolbar-btn{flex:1;padding:.45rem .5rem;font-size:.88rem}.palette{display:flex;flex-wrap:wrap;gap:.35rem}.palette-swatch{width:1.65rem;height:1.65rem;border-radius:4px;border:2px solid rgba(255,255,255,.15);cursor:pointer;padding:0}.palette-swatch-on{outline:2px solid #5b8cff;outline-offset:1px}.recent-colors{display:flex;flex-wrap:wrap;gap:.35rem}.recent-swatch--empty{opacity:.35;cursor:default;background:#ffffff0f!important;border-style:dashed}.rgb-sliders{display:flex;flex-direction:column;gap:.35rem;width:100%}.rgb-slider-row{display:grid;grid-template-columns:2.5rem 1fr 1.75rem;align-items:center;gap:.35rem;font-size:.8rem;color:#b8b8c8}.rgb-slider-row input[type=range]{width:100%;min-width:0;accent-color:#6b8cff}.rgb-slider-label{font-variant-numeric:tabular-nums}.rgb-slider-value{text-align:right;font-variant-numeric:tabular-nums;color:#9898a8;font-size:.75rem}.color-field .color-row{display:flex;align-items:center;gap:.5rem}.color-field input[type=color]{width:2.5rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer}.color-hex-input{flex:1;min-width:0;padding:.45rem .5rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#00000059;color:inherit;font:inherit;font-size:.85rem}.toggle-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}.small{font-size:.8rem}.meta-field textarea{width:100%;padding:.6rem .65rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#00000059;color:inherit;font:inherit;font-size:.88rem;resize:vertical}.editor-home-shell{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:960px}.character-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;margin-bottom:.75rem;max-width:52rem}.character-sheet-wrap{display:flex;flex-direction:column;align-items:stretch}.character-cells-grid{display:grid;gap:.65rem .5rem;justify-content:start;margin-bottom:.5rem}.character-cell-slot{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;min-width:0}.character-cell-name{font-size:.68rem;line-height:1.25;color:#dcdce6bf;text-align:center;word-break:break-word;max-width:100%;padding:0 .15rem}.character-editor-main{min-width:0;max-width:100%}.character-frame-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .65rem;margin-bottom:.45rem}.character-frame-nav-btn{padding:.2rem .55rem;font-size:.8rem;line-height:1.3}.character-frame-nav-index{font-variant-numeric:tabular-nums;min-width:3.25rem;text-align:center}.character-main-stage-scroll{max-width:100%;max-height:min(72vh,880px);overflow:auto;overscroll-behavior:contain;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#00000038}[data-pixel-canvas-theme=light] .character-main-stage-scroll{border-color:#0000001f;background:#ffffff8c}.character-main-stage{width:fit-content;max-width:none}.character-filmstrip{margin-top:.25rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.08)}.character-filmstrip-hint{margin:0 0 .5rem}.character-editor-description{margin-top:.75rem;width:100%;max-width:100%}.character-editor-description textarea{min-height:6.5rem;resize:vertical}.character-thumbs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem .35rem;align-items:start;max-width:100%}.character-thumb{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;min-width:0;cursor:pointer;border-radius:8px;padding:.35rem;border:2px solid transparent;background:#00000026;transition:border-color .12s ease,background .12s ease}.character-thumb:hover{border-color:#ffffff1f;background:#00000038}.character-thumb:focus-visible{outline:2px solid rgba(91,140,255,.75);outline-offset:2px}.character-thumb--on{border-color:#5b8cff8c;background:#5b8cff14}[data-pixel-canvas-theme=light] .character-thumb{background:#ffffff73}[data-pixel-canvas-theme=light] .character-thumb:hover{border-color:#0000001a;background:#ffffffb8}[data-pixel-canvas-theme=light] .character-thumb--on{border-color:#2d5fdca6;background:#2d5fdc1a}.character-thumb .pixel-canvas{cursor:pointer}.character-thumb .character-cell-name{font-size:.62rem;line-height:1.2}.pixel-toolbar-row--character{margin-top:.35rem;flex-direction:column;align-items:stretch}.kbd-hint{display:inline-block;padding:.05rem .3rem;border-radius:4px;border:1px solid rgba(255,255,255,.15);background:#00000059;font-size:.75rem;font-family:inherit}.pixel-toolbar-zoom-hint{display:block;margin-top:.35rem;line-height:1.35}.pixel-toolbar-row--clip{margin-top:.35rem}.pixel-toolbar-row--theme{gap:.35rem;flex-wrap:wrap}.pixel-canvas-select{cursor:crosshair}.pixel-canvas-paste{cursor:copy}