.orn-scene{position:relative;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(circle at 18% 14%,rgba(255,224,170,.55) 0 3%,transparent 9%),radial-gradient(circle at 84% 22%,rgba(255,214,160,.45) 0 2.5%,transparent 8%),radial-gradient(circle at 76% 84%,rgba(255,230,190,.5) 0 3%,transparent 10%),radial-gradient(circle at 50% 35%,#f6ede2,#e3d2bf 62%,#cdb59b);padding:clamp(14px,4%,36px)}.orn-stage{position:relative;width:100%;aspect-ratio:1;max-height:calc(100vh - var(--header-h) - 120px);margin-inline:auto}.orn-stage__canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;transform-origin:50% 0}.anim-on .orn-stage__canvas{animation:ornSwing 6s var(--ease-in-out) infinite}@keyframes ornSwing{0%,to{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}.orn-stage__loading,.orn-stage__error{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:var(--s-3);text-align:center;padding:var(--s-6)}.orn-stage__skeleton{width:72%;aspect-ratio:1;border-radius:50%}.orn-stage__error{background:#ffffffdb;border-radius:50%}.orn-note{display:flex;gap:6px;align-items:flex-start;margin-top:var(--s-3)}.orn-note svg{flex:none;margin-top:2px}.orn-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 var(--s-6);padding:0;list-style:none}.orn-steps__btn{width:100%;display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--r-sm);border:1px solid var(--c-line);background:var(--c-surface);font-size:var(--fs-xs);font-weight:600;color:var(--c-text-2);text-align:left;transition:border-color var(--t-fast),color var(--t-fast)}.orn-steps__btn span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--c-muted);color:var(--c-ink);transition:background-color var(--t-fast),color var(--t-fast)}.orn-steps__btn.is-done span{background:var(--c-ink);color:var(--c-bg)}.orn-steps__btn.is-current{border-color:var(--c-ink);color:var(--c-ink)}.orn-steps__btn.is-current span{background:var(--c-accent);color:#111}.orn-panel{display:grid;gap:var(--s-4)}.anim-on .orn-panel:not([hidden]){animation:ornPanel .45s var(--ease-out)}@keyframes ornPanel{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.orn-panel__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}.orn-panel__title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;outline:none}.orn-panel__text{color:var(--c-text-2);max-width:54ch}.orn-count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--c-text-2)}.orn-nav{display:flex;gap:var(--s-3);margin-top:var(--s-2)}.orn-nav .btn{flex:1;gap:8px}.orn-nav .btn--secondary{flex:0 0 auto}.orn-back{justify-self:center;display:inline-flex;gap:6px;align-items:center}.orn-row{display:grid;grid-template-columns:120px 1fr;gap:var(--s-4);align-items:start}.orn-row .field__input{width:100%;min-width:0}.orn-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.orn-item{display:grid;grid-template-columns:52px 1fr auto;gap:var(--s-3);align-items:center;padding:10px;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface)}.anim-on .orn-item:last-child{animation:ornIn .35s var(--ease-out)}@keyframes ornIn{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}.orn-item__body{display:grid;gap:8px;min-width:0}.orn-item__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.orn-item__name{flex:1 1 140px;min-width:0;height:40px}.orn-item__label{min-width:64px}.orn-item__tools{display:flex;flex-direction:column;gap:2px}.orn-tool{width:34px;height:30px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:none;color:var(--c-text-2)}.orn-tool:hover:not(:disabled){background:var(--c-muted);color:var(--c-ink)}.orn-tool:disabled{opacity:.3}.orn-tool--del:hover:not(:disabled){color:var(--c-error);background:var(--c-error-bg)}.orn-empty{padding:var(--s-4);border:1px dashed var(--c-line);border-radius:var(--r-md);text-align:center}.orn-thumb{display:block;width:48px;height:48px;border-radius:50%;background-color:var(--c-muted);background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(var(--c-ink-rgb),.06)}.orn-thumb--sm{width:48px;height:48px}.orn-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:var(--r-pill);background:var(--c-muted)}.orn-seg label{position:relative;cursor:pointer}.orn-seg input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;cursor:pointer}.orn-seg span{display:block;padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;color:var(--c-text-2);transition:background-color var(--t-fast),color var(--t-fast)}.orn-seg input:checked+span{background:var(--c-ink);color:var(--c-bg)}.orn-seg input:focus-visible+span{outline:2px solid var(--c-accent);outline-offset:1px}.orn-hair{display:inline-flex;gap:6px}.orn-hair__opt{position:relative;cursor:pointer}.orn-hair__opt input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;cursor:pointer}.orn-hair__dot{display:block;width:30px;height:30px;border-radius:50%;background:var(--dot);box-shadow:inset 0 0 0 2px #fff9,0 0 0 1px rgba(var(--c-ink-rgb),.15);transition:transform var(--t-fast),box-shadow var(--t-fast)}.orn-hair__opt input:checked+.orn-hair__dot{box-shadow:inset 0 0 0 2px #fffc,0 0 0 2px var(--c-bg),0 0 0 4px var(--c-ink);transform:scale(1.05)}.orn-hair__opt input:focus-visible+.orn-hair__dot{outline:2px solid var(--c-accent);outline-offset:3px}.orn-hair__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.orn-add{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}.orn-add__btn{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px dashed rgba(var(--c-ink-rgb),.3);border-radius:var(--r-pill);background:var(--c-surface);font-weight:600;font-size:var(--fs-sm);color:var(--c-ink);transition:border-color var(--t-fast),transform var(--t-fast),background-color var(--t-fast)}.orn-add__btn .orn-thumb{width:36px;height:36px}.orn-add__btn:hover:not(:disabled){border-color:var(--c-ink);border-style:solid;transform:translateY(-1px)}.orn-add__btn:disabled{opacity:.45;cursor:not-allowed}.orn-add__label{display:inline-flex;align-items:center;gap:4px}.orn-examples{margin-top:8px}.orn-examples .chip-opt{font-size:var(--fs-xs);padding:6px 12px}.orn-colors{display:flex;flex-wrap:wrap;gap:8px}.orn-color{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border:1px solid var(--c-line);border-radius:var(--r-pill);cursor:pointer;font-size:var(--fs-xs);font-weight:600;background:var(--c-surface)}.orn-color input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;cursor:pointer}.orn-color__dot{width:22px;height:22px;border-radius:50%;background:var(--dot);box-shadow:inset 0 0 0 1px rgba(var(--c-ink-rgb),.25)}.orn-color:has(input:checked){border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink)}.orn-color:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:2px}.orn-switch{margin-top:2px}.orn-summary{display:grid;gap:6px;margin:0;padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);font-size:var(--fs-sm)}.orn-summary div{display:grid;grid-template-columns:84px 1fr;gap:8px}.orn-summary dt{color:var(--c-text-2)}.orn-summary dd{margin:0;font-weight:600;overflow-wrap:anywhere}[data-orn] [data-add-btn].is-blocked{opacity:.65}@media(max-width:989px){.orn-grid .orn-visual{position:sticky;top:calc(var(--header-h) + 6px);z-index:5;margin:0 calc(var(--gutter, 16px) * -1);padding:0;background:none;box-shadow:none!important;height:auto}.orn-scene{border-radius:0 0 var(--r-lg) var(--r-lg);padding:10px;box-shadow:0 10px 24px -14px #00000059}.orn-stage{width:min(100%,36vh);max-height:none}.orn-note{display:none}.orn-steps__btn{flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;text-align:center;font-size:10.5px}.orn-item{grid-template-columns:40px 1fr auto;padding:8px}.orn-item .orn-thumb--sm{width:40px;height:40px}.orn-row{grid-template-columns:110px 1fr}.orn-panel[data-orn-panel] .orn-nav{position:sticky;bottom:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--c-bg);z-index:4}}.orn-scene.is-arranging .orn-stage__canvas{animation:none;transform:none}.orn-arrange{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s-3)}.orn-arrange__move{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface);font-weight:600;font-size:var(--fs-xs);color:var(--c-ink)}.orn-arrange__move[aria-pressed=true]{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}.orn-arrange__tools{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 12px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface)}.anim-on .orn-arrange__tools:not([hidden]){animation:ornIn .25s var(--ease-out)}.orn-arrange__sel{font-weight:700;margin-right:6px;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.orn-tool--txt{width:auto;padding:0 10px;font-size:var(--fs-xs);font-weight:600}.orn-arrange__auto{margin-left:auto}.orn-arrange__hint{margin-top:6px}[data-orn].is-manual .orn-item [data-act=up],[data-orn].is-manual .orn-item [data-act=down]{display:none}@media(max-width:989px){.orn-arrange{margin:8px 0 0;padding:0 10px}.orn-arrange__hint{display:none}}@media(prefers-reduced-motion:reduce){.orn-stage__canvas{animation:none!important}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/ornament-composer.css.map */