.crosshair-creator{width:100%;min-height:calc(100dvh - var(--header-height) - 2*var(--page-pad-y));flex-direction:column;padding:0;display:flex}.crosshair-creator__header{margin-bottom:16px}.crosshair-creator__subtitle{color:var(--font-color-weak);font-size:var(--type-body-size);margin:0}.crosshair-creator__editor{flex:1 1 0;grid-template-columns:minmax(0,1fr) 360px;gap:12px;min-height:560px;display:grid}.crosshair-creator__rail{border-bottom:1px solid var(--stroke-weak);flex-wrap:wrap;align-items:center;gap:8px;padding:12px;display:flex}.crosshair-creator__rail-title{width:100%;color:var(--text-strong);font-size:var(--type-body-size);margin:0;font-weight:500}.crosshair-creator__rail-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.crosshair-creator__rail-item{aspect-ratio:1;background:var(--surface-nested);width:44px;color:var(--font-color-weak);cursor:pointer;transition:background-color var(--dur-hover) var(--ease-micro),border-color var(--dur-hover) var(--ease-micro);border:1px solid #0000;border-radius:8px;flex-shrink:0;place-items:center;padding:0;display:grid;position:relative}.crosshair-creator__rail-item:hover{box-shadow:inset 0 0 0 9999px #ffffff0f}.crosshair-creator__rail-item:active{transform:scale(var(--press-scale));box-shadow:inset 0 0 0 9999px #ffffff1f}.crosshair-creator__rail-item:focus-visible{outline:2px solid var(--stroke-brand);outline-offset:2px}.crosshair-creator__rail-item.is-selected{background:var(--brand-1000)}.crosshair-creator__rail-item.is-muted{opacity:.4}.crosshair-creator__rail-index{color:var(--text-strong);font-size:var(--type-small-size);font-weight:600;line-height:1;position:absolute;bottom:1px;right:3px}.crosshair-creator__rail-overlay{border-left:1px solid var(--stroke-weak);margin-left:8px;padding-left:8px}.crosshair-creator__rail-add{gap:8px;margin-left:auto;display:flex}.crosshair-creator__rail-add .neo-button.icon-only.small{width:44px;height:44px}.crosshair-creator__add-menu{flex-direction:column;gap:4px;display:flex}.crosshair-creator__add-option{color:var(--text-strong);font:inherit;font-size:var(--type-body-size);text-align:left;cursor:pointer;transition:box-shadow var(--dur-hover) var(--ease-micro);background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;padding:8px;display:flex}.crosshair-creator__add-option:hover{box-shadow:inset 0 0 0 9999px #ffffff0f}.crosshair-creator__add-option:active{box-shadow:inset 0 0 0 9999px #ffffff1f}.crosshair-creator__add-option .crosshair-creator__style-preview{background:var(--surface-nested);box-sizing:content-box;border-radius:4px;flex-shrink:0;padding:6px}.crosshair-creator__stage{border:1px solid var(--stroke-weak);cursor:none;background-color:var(--surface);background-position:50%;background-size:cover;border-radius:16px;position:relative;overflow:hidden}.crosshair-creator__stage--dark{background-image:url(../media/dark_preview.3d84vr6po7-e6.avif)}.crosshair-creator__stage--light{background-image:url(../media/light_preview.3qfu1hsqbulv0.avif)}.crosshair-creator__stage--marble{background-image:url(../media/marble_preview.41xdh3uhoi5r2.avif)}.crosshair-creator__stage canvas{transform:translate(-50%, -50%) translate(var(--crosshair-dx,0px), var(--crosshair-dy,0px));pointer-events:none;image-rendering:pixelated;position:absolute;top:50%;left:50%}.crosshair-creator__stage-bar,.crosshair-creator__stage-foot{z-index:1;cursor:auto;position:absolute}.crosshair-creator__stage-bar{display:flex;top:16px;left:16px}.crosshair-creator__stage-foot{flex-direction:column;gap:8px;display:flex;bottom:16px;left:16px;right:16px}.crosshair-creator__stage-actions{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000073;border-radius:16px;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:center;gap:8px;width:fit-content;margin-left:auto;padding:8px;display:flex}.crosshair-creator__inspector{background:var(--surface);border:1px solid var(--stroke-weak);border-radius:16px;flex-direction:column;grid-column:2;min-height:0;display:flex}.crosshair-creator__inspector-head{border-bottom:1px solid var(--stroke-weak);align-items:center;gap:8px;padding:12px;display:flex}.crosshair-creator__inspector-glyph{width:28px;height:28px;color:var(--font-color-weak);flex-shrink:0;place-items:center;display:grid}.crosshair-creator__inspector-name{flex:1;min-width:0}.crosshair-creator__inspector-title{color:var(--text-strong);font-size:var(--type-body-size);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:500;overflow:hidden}.crosshair-creator__inspector-sub{color:var(--font-color-weak);font-size:var(--type-small-size);margin:2px 0 0}.crosshair-creator__inspector-tools{flex-shrink:0;align-items:center;gap:4px;display:flex}.crosshair-creator__inspector-body{flex:1;min-height:0;padding:12px;overflow-y:auto}.crosshair-creator__group{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.crosshair-creator__group:last-child{margin-bottom:0}.crosshair-creator__group-title{color:var(--font-color-weak);font-size:var(--type-small-size);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;font-weight:600}.crosshair-creator__style-grid{grid-template-columns:repeat(auto-fill,44px);gap:8px;max-width:408px;margin-bottom:12px;display:grid}.crosshair-creator__style-tile{aspect-ratio:1;background:var(--surface-nested);color:var(--font-color-weak);cursor:pointer;transition:background-color var(--dur-hover) var(--ease-micro),border-color var(--dur-hover) var(--ease-micro);border:1px solid #0000;border-radius:8px;place-items:center;padding:0;display:grid}.crosshair-creator__style-tile:hover{box-shadow:inset 0 0 0 9999px #ffffff0f}.crosshair-creator__style-tile:active{transform:scale(var(--press-scale));box-shadow:inset 0 0 0 9999px #ffffff1f}.crosshair-creator__style-tile.is-selected{background:var(--brand-1000)}.crosshair-creator__style-preview{flex-shrink:0;display:block}.crosshair-creator__library{flex-direction:column;gap:16px;display:flex}.crosshair-creator__library-import{flex-direction:column;gap:8px;display:flex}.crosshair-creator__library-title{color:var(--font-color-weak);font-size:var(--type-small-size);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;font-weight:600}.crosshair-creator__library-saved{border-top:1px solid var(--stroke-weak);padding-top:16px}.crosshair-creator__bookmarks{flex-direction:column;gap:4px;max-height:240px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.crosshair-creator__bookmark{border-radius:8px;align-items:center;gap:8px;display:flex}.crosshair-creator__bookmark:hover{background:var(--fill-hover)}.crosshair-creator__bookmark-preview{background:var(--surface-nested);object-fit:contain;outline:1px solid var(--ring-content);outline-offset:-1px;border-radius:4px;flex-shrink:0;width:32px;height:32px}.crosshair-creator__bookmark-apply{color:var(--text-strong);font:inherit;font-size:var(--type-body-size);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:0 0;border:0;flex:1;padding:8px 0;overflow:hidden}.crosshair-creator__empty{color:var(--font-color-weak);font-size:var(--type-body-size);text-align:center;margin:0;padding:16px 0}.crosshair-creator__control label{color:var(--font-color-weak);font-size:var(--type-body-size);justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:400;display:flex}.crosshair-creator__control--color{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.crosshair-creator__control--color label{cursor:pointer;transition:color var(--dur-hover) var(--ease-micro);flex:0 auto;margin-bottom:0}.crosshair-creator__control--color label:hover{color:var(--text-strong)}.crosshair-creator__feedback.neo-callout{isolation:isolate;box-shadow:var(--shadow-raised);margin:0;position:relative}.crosshair-creator__feedback.neo-callout:before{content:"";z-index:-1;background:var(--background-raised);border-radius:inherit;position:absolute;inset:0}.crosshair-creator__feedback-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.crosshair-creator__feedback-action{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0 4px;font-weight:600;text-decoration:underline}.crosshair-creator__feedback-dismiss{color:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex}.crosshair-creator__feedback-dismiss .neo-icon{--neo-icon-box:14px}.crosshair-creator__share-fallback{width:100%}.crosshair-creator__color-field{align-items:center;gap:8px;display:flex}.crosshair-creator__color-swatch{border:1px solid var(--stroke-weak);cursor:pointer;width:40px;height:32px;transition:border-color var(--dur-hover) var(--ease-micro);background:0 0;border-radius:8px;flex-shrink:0;padding:0}.crosshair-creator__color-swatch:hover{border-color:var(--brand-1000)}.crosshair-creator__color-swatch::-webkit-color-swatch-wrapper{padding:2px}.crosshair-creator__color-swatch::-webkit-color-swatch{border:none;border-radius:4px}.crosshair-creator__color-swatch::-moz-color-swatch{border:none;border-radius:4px}.crosshair-creator__color-hex{border-radius:8px;width:96px}.crosshair-creator__color-hex input{font-family:var(--font-mono);text-transform:lowercase}.crosshair-creator__image-field{align-items:center;gap:8px;min-width:0;display:flex}.crosshair-creator__image-field:has(.crosshair-creator__image-input:focus-visible) .neo-button{outline:2px solid var(--stroke-brand);outline-offset:2px}.crosshair-creator__image-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.crosshair-creator__image-name{color:var(--font-color-weak);font-size:var(--type-small-size);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width:1199px){.crosshair-creator{min-height:0}.crosshair-creator__editor{flex:none;grid-template-rows:minmax(280px,46vh) auto;grid-template-columns:minmax(0,1fr);min-height:0}.crosshair-creator__inspector{grid-column:auto}.crosshair-creator__inspector-body{overflow-y:visible}.crosshair-creator__group{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;gap:0 24px;display:grid}.crosshair-creator__group-title,.crosshair-creator__style-host{grid-column:1/-1}}@media (max-width:899px){.crosshair-creator__editor{background:var(--surface);border:1px solid var(--stroke-weak);border-radius:16px;grid-template-rows:none;grid-template-columns:minmax(0,1fr);gap:0}.crosshair-creator__stage{top:var(--header-height);z-index:2;aspect-ratio:16/10;border:0;border-bottom:1px solid var(--stroke-weak);border-radius:16px 16px 0 0;order:-1;position:sticky}.crosshair-creator__stage-bar{top:8px;left:8px}.crosshair-creator__stage-foot{bottom:8px;left:8px;right:8px}.crosshair-creator__rail-title{display:none}}@media (max-width:899px) and (max-width:599px){.crosshair-creator__stage{aspect-ratio:1}.crosshair-creator__stage-actions>:first-child{flex:1 0 100%}}@media (max-width:899px){.crosshair-creator__inspector{background:0 0;border:0;border-radius:0 0 16px 16px}}.crosshair-creator__modal-content{background:var(--background-raised);border:1px solid var(--stroke-weak);border-radius:16px;width:90vw;max-width:500px;max-height:90vh;overflow:hidden}.crosshair-creator__modal-header{border-bottom:1px solid var(--stroke-weak);justify-content:space-between;align-items:center;gap:12px;padding:24px;display:flex}.crosshair-creator__modal-header h3{font-size:var(--type-h4-size);font-weight:var(--type-h4-weight);color:var(--text-brand);margin:0}.crosshair-creator__modal-body{flex-direction:column;align-items:center;gap:24px;padding:24px;display:flex}.crosshair-creator__modal-body canvas{aspect-ratio:1;border:2px solid var(--stroke-weak);cursor:crosshair;background:var(--surface);width:min(320px,70vh,100%);height:auto;image-rendering:pixelated;touch-action:none;border-radius:8px}.crosshair-creator__pixel-tools{gap:12px;width:100%;display:flex}
