.packer-page{--color-surface-raised: color-mix(in srgb, var(--color-surface) 88%, var(--color-text));--color-muted-dim: color-mix(in srgb, var(--color-muted) 75%, var(--color-text));--color-success: #0d9f6e;--color-warning: #c98a00;--color-danger: #c53030;--color-packer-viewport-bg: #0a0b10;--color-packer-error-bg: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));--color-packer-error-border: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));--font-mono: ui-monospace, "Cascadia Code", "Courier New", monospace;--packer-radius: 4px;display:flex;flex-direction:column;min-height:calc(100dvh - 9rem);font-family:var(--font-mono);font-size:.875rem}html[data-theme=light] .packer-page{--color-packer-viewport-bg: color-mix(in srgb, var(--color-bg) 70%, var(--color-border))}.packer-page-header{padding:1rem 1.25rem .875rem;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.packer-breadcrumb{margin:0 0 .5rem;font-size:.72rem;font-family:var(--font-sans);letter-spacing:normal;text-transform:none;color:var(--color-muted)}.packer-breadcrumb a{color:var(--color-muted);text-decoration:none}.packer-breadcrumb a:hover{color:var(--color-accent)}.packer-page-header h1{margin:0 0 .35rem;font-size:1.125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.packer-page-header p{margin:0;font-size:.78rem;color:var(--color-muted);max-width:52rem;line-height:1.5}.packer-layout{display:flex;flex:1;min-height:0}.packer-panel{width:320px;min-width:280px;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:1.125rem 1rem;gap:1rem;overflow-y:auto}.packer-section-label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted-dim);margin-bottom:.5rem}.packer-box-list{display:flex;flex-direction:column;gap:.5rem}.packer-box-row{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--packer-radius);padding:.5rem .625rem}.packer-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}.packer-box-label{font-size:.72rem;color:var(--color-muted);min-width:1.25rem}.packer-box-row input[type=number],.packer-container-row input[type=number]{width:3rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;color:var(--color-text);font:inherit;font-size:.78rem;padding:.1875rem .3125rem;text-align:center}.packer-box-row input:focus,.packer-container-row input:focus{outline:none;border-color:var(--color-accent)}.packer-dim-sep{color:var(--color-muted-dim);font-size:.7rem}.packer-btn-remove{margin-left:auto;background:none;border:none;color:var(--color-muted-dim);cursor:pointer;font-size:.9rem;line-height:1;padding:.125rem .25rem}.packer-btn-remove:hover{color:var(--color-danger)}.packer-btn-add,.packer-btn-pack{width:100%;text-align:center}.packer-mode-toggle{display:flex;gap:.35rem}.packer-mode-toggle button{flex:1;padding:.4375rem .5rem;border-radius:var(--packer-radius);border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-muted);font:inherit;font-size:.68rem;letter-spacing:.04em;cursor:pointer}.packer-mode-toggle button.active{border-color:var(--color-accent);color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}.packer-container-row{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}.packer-check-label{display:flex;align-items:center;gap:.4375rem;font-size:.74rem;color:var(--color-muted);cursor:pointer;user-select:none}.packer-check-label input[type=checkbox]{accent-color:var(--color-accent)}.packer-result-box{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--packer-radius);padding:.875rem;font-size:.78rem;line-height:1.9;color:var(--color-muted)}.packer-stat-dims{color:var(--color-success);font-weight:700;font-size:.92rem;margin-bottom:.35rem}.packer-stat-key{color:var(--color-accent)}.packer-stat-value{font-weight:700}.packer-eff-bar-wrap{margin-top:.5rem;background:var(--color-bg);border-radius:3px;height:6px;overflow:hidden}.packer-eff-bar{height:100%;border-radius:3px;transition:width .4s ease}.packer-meta{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;font-size:.72rem;color:var(--color-muted-dim)}.packer-muted-note{margin:.5rem 0 0;font-size:.72rem;color:var(--color-muted-dim)}.packer-error{color:var(--color-danger);font-size:.75rem;padding:.5rem .625rem;background:var(--color-packer-error-bg);border-radius:var(--packer-radius);border:1px solid var(--color-packer-error-border)}.packer-viewport{flex:1;position:relative;background:var(--color-packer-viewport-bg);min-height:20rem;touch-action:none;user-select:none;-webkit-user-select:none}.packer-viewport canvas{width:100%;height:100%;display:block;touch-action:none}.packer-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--color-muted-dim);pointer-events:none;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.packer-viewport-hint{position:absolute;bottom:.875rem;right:1rem;font-size:.65rem;color:var(--color-muted-dim);letter-spacing:.05em;pointer-events:none}.packer-hint-mobile{display:none}@media(max-width:48rem){.packer-hint-desktop{display:none}.packer-hint-mobile{display:inline}.packer-page{min-height:auto}.packer-page-header{padding:.875rem 1rem .75rem}.packer-page-header p{font-size:.8125rem}.packer-layout{flex-direction:column;flex:none}.packer-panel{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--color-border);max-height:none;flex:0 0 auto;padding:1rem .875rem;-webkit-overflow-scrolling:touch}.packer-box-row input[type=number],.packer-container-row input[type=number]{width:3.5rem;min-height:2.75rem;font-size:16px;padding:.375rem .5rem}.packer-mode-toggle button,.packer-btn-add,.packer-btn-pack{min-height:2.75rem;font-size:.8125rem}.packer-btn-remove{min-width:2.75rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center}.packer-check-label{min-height:2.75rem;font-size:.8125rem}.packer-viewport{flex:none;width:100%;height:min(52vh,24rem);min-height:min(52vh,24rem)}.packer-viewport-hint{left:.75rem;right:.75rem;text-align:center;font-size:.7rem}}@media(max-width:48rem)and (orientation:landscape){.packer-layout{flex-direction:row;min-height:calc(100dvh - 8rem)}.packer-panel{width:min(42vw,20rem);max-height:none;border-bottom:none;border-right:1px solid var(--color-border);overflow-y:auto}.packer-viewport{flex:1;height:auto;min-height:0}}