:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-serif:"Noto Serif TC", "Songti TC", "PMingLiU", serif;--font-sans:"PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;--c-bg:#f5efe6;--c-surface:#fffcf7;--c-surface-2:#f7f0e6;--c-ink:#2a221c;--c-ink-soft:#66574a;--c-ink-faint:#766757;--c-line:#e7ddcf;--c-line-strong:#d5c6b2;--c-accent:#7a4e26;--c-accent-hover:#633e1d;--c-accent-ink:#fffaf2;--c-sel:#c07628;--c-sel-soft:#f5e4cc;--c-focus:#b0661a;--c-danger:#a33c2c;--c-ok:#3b7447;--c-warn:#9a5f14;--el-wood:#3b744b;--el-fire:#b0432d;--el-earth:#86621f;--el-metal:#6a6f77;--el-water:#2d5a88;--radius:16px;--radius-sm:10px;--shadow:0 1px 2px #3c28140f, 0 6px 20px #3c28140f;--touch:44px;--strip-scale:3.4px;--gutter:16px;--gutter-left:max(var(--gutter), env(safe-area-inset-left,0px));--gutter-right:max(var(--gutter), env(safe-area-inset-right,0px))}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html.has-modal{overflow:hidden}body{background:var(--c-bg);min-width:320px;color:var(--c-ink);font-family:var(--font-sans);-webkit-tap-highlight-color:transparent;margin:0;font-size:16px;line-height:1.6}h1,h2,h3{font-family:var(--font-serif);margin:0;font-weight:600;line-height:1.3}p{margin:0}button,input,select{font:inherit;color:inherit}img{max-width:100%}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}.skip-link{left:var(--gutter);z-index:100;border-radius:var(--radius-sm);background:var(--c-accent);color:var(--c-accent-ink);padding:10px 16px;text-decoration:none;position:absolute;top:-100px}.skip-link:focus{top:8px}.btn{min-height:var(--touch);border:1px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-ink);white-space:nowrap;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-size:15px;line-height:1.2;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.btn:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--c-accent);background:#fff}.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed;opacity:.45}.btn--primary{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-accent-ink)}.btn--primary:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--c-accent-hover);background:var(--c-accent-hover)}.btn--danger{border-color:var(--c-danger);background:var(--c-danger);color:#fff}.btn--danger:hover:not(:disabled):not([aria-disabled=true]){background:#862f22;border-color:#862f22}.btn--danger-text{color:var(--c-danger)}.btn--small{padding:6px 14px;font-size:14px}.btn__icon{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}.app-header{background:var(--c-surface);border-bottom:1px solid var(--c-line)}.app-header__inner{max-width:1200px;padding:10px var(--gutter-right) 10px var(--gutter-left);padding-top:max(10px, env(safe-area-inset-top));grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand mode""actions actions";align-items:center;gap:10px 12px;margin:0 auto;display:grid}.brand{letter-spacing:.06em;grid-area:brand;min-width:0;font-size:21px}.mode-toggle{border:1px solid var(--c-line-strong);background:var(--c-surface-2);border-radius:999px;grid-area:mode;padding:2px;display:inline-flex}.mode-toggle__btn{min-width:56px;min-height:var(--touch);color:var(--c-ink-soft);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:4px 14px;font-size:15px}.mode-toggle__btn[aria-pressed=true]{background:var(--c-ink);color:var(--c-surface)}.header-actions{grid-area:actions;grid-template-columns:1fr 1fr;gap:8px;display:grid}@media (width>=640px){.app-header__inner{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand mode actions";gap:12px 16px}.brand{font-size:23px}.header-actions{display:flex}}.layout{max-width:1200px;padding:16px var(--gutter-right) 24px var(--gutter-left);grid-template-columns:minmax(0,1fr);gap:16px;margin:0 auto;display:grid}.layout__main,.layout__side{align-content:start;gap:16px;min-width:0;display:grid}@media (width<=899px){.layout{flex-direction:column;display:flex}.layout__main,.layout__side{display:contents}#stage{order:1}#picker{order:2}#sequence{order:3}#sizing{order:4}#info{order:5}}@media (width>=900px){.layout{padding:24px var(--gutter-right) 32px var(--gutter-left);grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px}:root{--strip-scale:4px}}.panel{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-surface);min-width:0;box-shadow:var(--shadow);padding:16px}.panel:focus{outline:none}.panel__head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.panel__title{letter-spacing:.08em;font-size:18px}.panel__hint{color:var(--c-ink-faint);font-size:13px}.stage{border-radius:var(--radius);box-shadow:inset 0 0 0 1px #7850281f, var(--shadow);background:radial-gradient(110% 85% at 50% 42%,#fffaf2bf 0%,#fffaf200 65%),url(../bg/wood.webp) 50%/512px 512px,#d5af86;padding:8px;position:relative}.stage__frame{aspect-ratio:1;width:min(100%,60svh,560px);min-width:min(100%,260px);margin:0 auto;position:relative}@media (width<=899px) and (height>=640px){html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + max(38vh, 260px) + 24px);scroll-padding-top:calc(env(safe-area-inset-top,0px) + max(38svh, 260px) + 24px)}.stage{top:env(safe-area-inset-top,0px);z-index:3;position:sticky}.stage__frame{width:min(100%,38svh)}}.ring{-webkit-user-select:none;user-select:none;touch-action:manipulation;width:100%;height:100%;display:block;overflow:visible}.ring__target{fill:none;stroke:#965f23d9;stroke-width:.4px;stroke-dasharray:1.6 1.2;pointer-events:none}.ring__cord{fill:none;stroke:#46322380;stroke-width:.7px}.ring__beads{filter:drop-shadow(0 1.5px 1.5px #28190a59)}.ring__bead{cursor:pointer}.ring__hit{fill:#0000}.ring__sel{fill:none;stroke:#0000;stroke-width:.7px;pointer-events:none}.ring__bead.is-selected .ring__sel{stroke:var(--c-sel)}.ring__fallback{fill:#3a332e}.ring__fallback-text{fill:#e9d9b8;font-family:var(--font-serif);pointer-events:none}.ring-center{text-align:center;pointer-events:none;justify-items:center;gap:2px;max-width:60%;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stage__frame.is-low .ring-center{max-width:90%;top:auto;bottom:2%;transform:translate(-50%)}.ring-center__count{font-family:var(--font-serif);color:var(--c-ink-soft);font-size:17px}.ring-center__num{color:var(--c-ink);font-size:34px;line-height:1.1}.ring-center__inner{color:var(--c-ink);font-size:13px}.ring-center__status{background:#fffcf7d9;border-radius:999px;margin-top:2px;padding:1px 10px;font-size:13px}.ring-center__status:empty{display:none}.ring-center__status[data-tone=short]{color:var(--c-warn)}.ring-center__status[data-tone=long]{color:var(--c-danger)}.ring-center__status[data-tone=ok]{color:var(--c-ok)}.ring-center__hint{color:var(--c-ink);font-size:15px;display:none}.stage__frame.is-empty .ring-center__count,.stage__frame.is-empty .ring-center__inner,.stage__frame.is-empty .ring-center__status{display:none}.stage__frame.is-empty .ring-center{max-width:82%}.stage__frame.is-empty .ring-center__hint{text-wrap:balance;display:block}@media (width>=480px){.ring-center__num{font-size:40px}.ring-center__inner,.ring-center__status{font-size:14px}}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 16px;margin-bottom:12px;display:flex}.toolbar__main{gap:8px;display:flex}.toolbar__between{gap:4px;min-width:0;display:grid}.toolbar__label{color:var(--c-ink-soft);font-size:13px}.toolbar__between-row{gap:8px;min-width:0;display:flex}.select{min-width:0;max-width:100%;min-height:var(--touch);border:1px solid var(--c-line-strong);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2366574a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px, var(--c-surface);appearance:none;cursor:pointer;border-radius:999px;padding:6px 34px 6px 14px;font-size:16px}.strip__scroller{overscroll-behavior-x:contain;border-radius:var(--radius-sm);background:var(--c-surface-2);box-shadow:inset 0 0 0 1px var(--c-line);scrollbar-width:thin;scrollbar-color:var(--c-line-strong) transparent;padding:8px 6px;position:relative;overflow:auto hidden}.strip__list{width:max-content;min-width:100%;margin:0;padding:0;list-style:none;display:flex}.strip__item{flex:none}.strip__btn{min-width:var(--touch);border-radius:var(--radius-sm);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:0 0;border:0;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:6px 5px 4px;display:flex}.strip__btn[aria-pressed=true]{background:var(--c-sel-soft);box-shadow:inset 0 0 0 2px var(--c-sel)}.strip__bead{width:100%;height:calc(10 * var(--strip-scale));justify-content:center;align-items:center;display:flex;position:relative}.strip__bead:before{content:"";background:#5a463666;height:2px;margin-top:-1px;position:absolute;top:50%;left:-5px;right:-5px}.strip__img{width:calc(var(--l) * var(--strip-scale));height:calc(var(--t) * var(--strip-scale));display:block;position:relative}.strip__img img{pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.strip__label{color:var(--c-ink-soft);white-space:nowrap;font-size:12px;line-height:1.2}.strip__item.is-ghost .strip__btn{opacity:.35}.strip__item.is-chosen .strip__btn{background:var(--c-sel-soft)}.strip__item.is-dragging .strip__btn{cursor:grabbing}.strip__empty{border-radius:var(--radius-sm);background:var(--c-surface-2);min-height:80px;box-shadow:inset 0 0 0 1px var(--c-line);color:var(--c-ink-faint);place-items:center;font-size:14px;display:grid}.strip-actions{min-height:var(--touch);flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;display:flex}.strip-actions__label{color:var(--c-ink-soft);font-size:14px}.strip-actions__buttons{flex-wrap:wrap;gap:8px;display:flex}.strip-actions__hint{color:var(--c-ink-faint);font-size:13px}.is-missing{background:#3a332e;border-radius:4px;position:relative}.is-missing img{visibility:hidden}.is-missing:after{content:attr(data-fallback);color:#e9d9b8;font-family:var(--font-serif);place-items:center;font-size:12px;line-height:1;display:grid;position:absolute;inset:0;overflow:hidden}.sizing{gap:14px;display:grid}.sizing__fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 16px;display:grid}.field{gap:4px;min-width:0;display:grid}.field__label{font-size:15px;font-weight:600}.field__help{color:var(--c-ink-faint);font-size:12px}.stepper{align-items:center;gap:6px;display:flex}.stepper__btn{width:var(--touch);height:var(--touch);border:1px solid var(--c-line-strong);background:var(--c-surface);cursor:pointer;border-radius:50%;flex:none;font-size:20px;line-height:1}.stepper__btn:hover{border-color:var(--c-accent)}.stepper__box{flex:1;min-width:0;position:relative}.stepper__input{width:100%;min-height:var(--touch);border:1px solid var(--c-line-strong);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;background:#fff;padding:6px 40px 6px 12px;font-size:17px}.stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper__input:invalid{border-color:var(--c-danger)}.stepper__unit{color:var(--c-ink-faint);pointer-events:none;font-size:14px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.sizing__message{border-radius:var(--radius-sm);background:var(--c-surface-2);padding:10px 14px;font-weight:600}.sizing__message[data-tone=short]{color:var(--c-warn);background:#fbf0df}.sizing__message[data-tone=ok]{color:var(--c-ok);background:#e9f2e8}.sizing__message[data-tone=long]{color:var(--c-danger);background:#f8e6e1}.sizing__message[data-tone=empty]{color:var(--c-ink-soft);font-weight:400}.stats{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin:0;display:grid}.stats__row{border:1px solid var(--c-line);border-radius:var(--radius-sm);padding:8px 10px}.stats__label{color:var(--c-ink-faint);font-size:12px}.stats__value{font-variant-numeric:tabular-nums;margin:0;font-size:16px;font-weight:600}.stats__value[data-tone=short]{color:var(--c-warn)}.stats__value[data-tone=long]{color:var(--c-danger)}.stats__value[data-tone=ok]{color:var(--c-ok)}.sizing__details{color:var(--c-ink-soft);font-size:14px}.sizing__details summary{min-height:var(--touch);cursor:pointer;color:var(--c-accent);align-items:center;display:inline-flex}.sizing__details ul{margin:0 0 6px;padding-left:1.3em}.tabs{background:var(--c-surface-2);box-shadow:inset 0 0 0 1px var(--c-line);border-radius:999px;gap:4px;margin-bottom:12px;padding:4px;display:flex}.tabs__tab{min-height:var(--touch);color:var(--c-ink-soft);font-family:var(--font-serif);cursor:pointer;background:0 0;border:0;border-radius:999px;flex:1;font-size:16px}.tabs__tab[aria-selected=true]{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 3px #3c281426}.picker__grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;display:grid}.tile{min-width:0;min-height:var(--touch);border:1px solid var(--c-line);border-radius:var(--radius-sm);cursor:pointer;-webkit-touch-callout:none;background:#fff;align-content:start;justify-items:center;gap:4px;padding:10px 6px 8px;transition:border-color .15s,box-shadow .15s,transform .1s;display:grid}.tile:hover{border-color:var(--c-accent);box-shadow:0 2px 8px #3c28141a}.tile:active{transform:scale(.97)}.tile__thumb{justify-content:center;align-items:center;width:100%;height:48px;display:flex}.tile__thumb img{object-fit:contain;pointer-events:none;max-width:100%;max-height:100%;display:block}.tile__thumb.is-missing{width:72px}.tile__main{align-items:center;gap:6px;display:flex}.tile__char{font-family:var(--font-serif);font-size:22px;line-height:1.1}.tile__name{text-align:center;font-size:14px;font-weight:600;line-height:1.3}.tile__sub{color:var(--c-ink-faint);text-align:center;font-size:12px;line-height:1.3}.tag{background:var(--el,var(--c-ink-soft));color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:1.7em;height:1.55em;padding:0 .4em;font-size:12px;line-height:1;display:inline-flex}.tag--wood{--el:var(--el-wood)}.tag--fire{--el:var(--el-fire)}.tag--earth{--el:var(--el-earth)}.tag--metal{--el:var(--el-metal)}.tag--water{--el:var(--el-water)}.info{gap:12px;display:grid}.info__empty{color:var(--c-ink-faint);font-size:14px}.info__images{border-radius:var(--radius-sm);background:linear-gradient(#f3e8d8,#e9dac4);grid-template-columns:minmax(0,1fr);gap:10px;padding:12px;display:grid}.info__images--pair{grid-template-columns:repeat(2,minmax(0,1fr))}.info__figure{justify-items:center;gap:4px;margin:0;display:grid}.info__figure figcaption{color:var(--c-ink-soft);font-size:12px}.info__img{aspect-ratio:18/10;justify-content:center;align-items:center;width:100%;max-width:220px;display:flex}.info__img img{object-fit:contain;max-width:100%;max-height:100%;display:block}.info__img--round,.info__img--metal,.info__img--spacer{aspect-ratio:1;max-width:140px}.info__name{align-items:baseline;gap:10px;font-size:20px;display:flex}.info__char{font-size:30px}.info__group{font-family:var(--font-sans);color:var(--c-ink-soft);font-size:14px;font-weight:400}.info__list{gap:0;margin:0;display:grid}.info__row{border-top:1px solid var(--c-line);grid-template-columns:5em minmax(0,1fr);align-items:center;gap:8px;padding:8px 0;display:grid}.info__row:first-child{border-top:0}.info__row dt{color:var(--c-ink-faint);font-size:14px}.info__row dd{margin:0}.info__note{color:var(--c-ink-faint);font-size:12px}.app-footer{max-width:1200px;padding:8px var(--gutter-right) max(32px, env(safe-area-inset-bottom)) var(--gutter-left);color:var(--c-ink-faint);margin:0 auto;font-size:12px;line-height:1.7}.noscript{max-width:600px;padding:0 var(--gutter);margin:24px auto}.toast-region{left:0;right:0;bottom:max(20px, env(safe-area-inset-bottom));z-index:50;padding:0 var(--gutter);pointer-events:none;justify-content:center;display:flex;position:fixed}.toast{color:#fffaf2;text-align:center;opacity:0;background:#2a221ceb;border-radius:999px;max-width:480px;padding:10px 18px;font-size:14px;transition:opacity .2s,transform .2s;transform:translateY(8px);box-shadow:0 6px 20px #0003}.toast.is-visible{opacity:1;transform:none}.modal{width:min(100% - 2 * var(--gutter), 440px);border-radius:var(--radius);background:var(--c-surface);max-height:calc(100% - 32px);color:var(--c-ink);border:0;margin:auto;padding:0;box-shadow:0 20px 60px #28190a4d}.modal--wide{width:min(100% - 2 * var(--gutter), 560px)}.modal::backdrop{background:#2a221c73}.modal--fallback{z-index:60;position:fixed;inset:0;overflow:auto;box-shadow:0 0 0 100vmax #2a221c73}.modal__box{padding:18px var(--gutter) var(--gutter);gap:14px;display:grid}.modal__head{justify-content:space-between;align-items:center;gap:12px;display:flex}.modal__title{font-size:19px}.modal__close{width:var(--touch);height:var(--touch);color:var(--c-ink-soft);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;margin:-8px -8px -8px 0;font-size:26px;line-height:1}.modal__close:hover{background:var(--c-surface-2)}.modal__body{gap:10px;min-width:0;display:grid}.modal__text{color:var(--c-ink-soft)}.modal__actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.share__input{width:100%;min-height:var(--touch);border:1px solid var(--c-line-strong);border-radius:var(--radius-sm);background:#fff;padding:8px 12px;font-size:16px}.share__status{color:var(--c-warn);font-size:14px}.share__status:not(:empty){margin-top:6px}.export__preview{object-fit:contain;border-radius:var(--radius-sm);background:var(--c-surface-2);width:100%;height:auto;max-height:60vh;display:block}.export__hint{color:var(--c-ink-soft);text-align:center;font-size:14px}.export__warn{color:var(--c-warn);text-align:center;font-size:13px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}.tile:active{transform:none}}