https://pbtpocket.com/categories/undercontrol/ Recent content in UnderControl on pbtpocket Hugo -- gohugo.io en © 2026 Kaveh Shahbazian Sat, 14 Mar 2026 00:00:00 +0000 https://pbtpocket.com/undercontrol/character-sheet/ Sat, 14 Mar 2026 00:00:00 +0000 https://pbtpocket.com/undercontrol/character-sheet/ <style> [x-cloak] { display: none !important; } .cs-select:focus { outline: 2px solid rgba(var(--color-primary-500), 1); outline-offset: 2px; border-color: rgba(var(--color-primary-500), 1); } .cs-notice { opacity: 0; transition: opacity 0.3s ease; } .cs-notice.visible { opacity: 1; } .stat-toggle { display: flex; justify-content: center; gap: 0; margin-top: 1.5rem; } .stat-toggle-btn { padding: 0.5rem 1.5rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; border: 2px solid rgba(var(--color-neutral-300), 1); background: transparent; color: rgba(var(--color-neutral-600), 1); transition: all 0.15s ease; user-select: none; } .stat-toggle-btn:first-child { border-radius: 0.5rem 0 0 0.5rem; border-right: 1px solid rgba(var(--color-neutral-300), 1); } .stat-toggle-btn:last-child { border-radius: 0 0.5rem 0.5rem 0; border-left: 1px solid rgba(var(--color-neutral-300), 1); } .stat-toggle-btn.active { background: rgba(var(--color-primary-600), 1); border-color: rgba(var(--color-primary-600), 1); color: #fff; } :is(.dark) .stat-toggle-btn { border-color: rgba(var(--color-neutral-600), 1); color: rgba(var(--color-neutral-400), 1); } :is(.dark) .stat-toggle-btn.active { background: rgba(var(--color-primary-500), 1); border-color: rgba(var(--color-primary-500), 1); color: #fff; } .dice-row { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-start; margin-top: 2rem; } .dice-group { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .dice-group-label { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--color-neutral-500), 1); margin-bottom: 0.25rem; } .dice-group-row { display: flex; gap: 0.75rem; } .dice-die { width: 72px; height: 72px; position: relative; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .dice-die.disabled { opacity: 0.3; cursor: not-allowed; } .dice-die svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); transition: transform 0.15s ease; } .dice-die:not(.disabled):hover svg { transform: scale(1.08); } .dice-die:not(.disabled):active svg { transform: scale(0.95); } .dice-die .dice-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.35rem; color: rgba(var(--color-neutral-800), 1); pointer-events: none; font-variant-numeric: tabular-nums; } :is(.dark) .dice-die .dice-value { color: rgba(var(--color-neutral-100), 1); } .dice-die .dice-type { position: absolute; bottom: -1.2rem; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 600; color: rgba(var(--color-neutral-400), 1); pointer-events: none; } @keyframes dice-shake { 0% { transform: rotate(0deg) scale(1); } 15% { transform: rotate(-12deg) scale(1.1); } 30% { transform: rotate(10deg) scale(1.05); } 45% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(6deg) scale(1.05); } 75% { transform: rotate(-3deg) scale(1.08); } 90% { transform: rotate(1deg) scale(1.02); } 100% { transform: rotate(0deg) scale(1); } } .dice-die.rolling svg { animation: dice-shake 0.6s ease-in-out; } .dice-die.rolling .dice-value { animation: dice-shake 0.6s ease-in-out; } @keyframes dice-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .dice-die.landed .dice-value { animation: dice-pop 0.25s ease-out; color: rgba(var(--color-primary-600), 1); } :is(.dark) .dice-die.landed .dice-value { color: rgba(var(--color-primary-400), 1); } .dice-roll-btn { display: block; margin: 2rem auto 0; padding: 0.6rem 2rem; border: 2px solid rgba(var(--color-primary-600), 1); border-radius: 0.5rem; background: rgba(var(--color-primary-600), 1); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; user-select: none; } .dice-roll-btn:hover { background: rgba(var(--color-primary-500), 1); border-color: rgba(var(--color-primary-500), 1); } .dice-roll-btn:active { transform: scale(0.96); } .dice-roll-btn:disabled { opacity: 0.4; cursor: not-allowed; } .dice-divider { width: 2px; align-self: stretch; background: rgba(var(--color-neutral-200), 1); margin: 0 0.5rem; } :is(.dark) .dice-divider { background: rgba(var(--color-neutral-700), 1); } .outcome-box { margin-top: 1.5rem; } .outcome-card--success { background-color: #d1fae5; } .outcome-card--warn { background-color: #fef3c7; } .outcome-card--danger { background-color: #fee2e2; } .outcome-icon--success { color: #059669; } .outcome-icon--warn { color: #d97706; } .outcome-icon--danger { color: #dc2626; } .outcome-text--success { color: #065f46; } .outcome-text--warn { color: #92400e; } .outcome-text--danger { color: #991b1b; } :is(.dark) .outcome-card--success { background-color: #064e3b; } :is(.dark) .outcome-card--warn { background-color: #78350f; } :is(.dark) .outcome-card--danger { background-color: #7f1d1d; } :is(.dark) .outcome-icon--success { color: #6ee7b7; } :is(.dark) .outcome-icon--warn { color: #fbbf24; } :is(.dark) .outcome-icon--danger { color: #fca5a5; } :is(.dark) .outcome-text--success { color: #a7f3d0; } :is(.dark) .outcome-text--warn { color: #fde68a; } :is(.dark) .outcome-text--danger { color: #fecaca; } .vertical-hr { border: none; border-left: 1px solid #6ee7b7; height: 3vh; width: 2px; } .sheet-tab-bar { display: inline-flex; border: 2px solid rgba(var(--color-neutral-300), 1); border-radius: 0.75rem; overflow: hidden; margin-bottom: 1.25rem; } .sheet-tab-btn { padding: 0.6rem 1.1rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; background: transparent; color: rgba(var(--color-neutral-600), 1); transition: all 0.15s ease; } .sheet-tab-btn.active { background: rgba(var(--color-primary-600), 1); color: #fff; } :is(.dark) .sheet-tab-bar { border-color: rgba(var(--color-neutral-600), 1); } :is(.dark) .sheet-tab-btn { color: rgba(var(--color-neutral-300), 1); } :is(.dark) .sheet-tab-btn.active { background: rgba(var(--color-primary-500), 1); } .bind-row { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 0; border-bottom: 1px solid rgba(var(--color-neutral-200), 1); } :is(.dark) .bind-row { border-bottom-color: rgba(var(--color-neutral-700), 1); } .bind-header { display: flex; gap: 0.75rem; align-items: center; } .bind-title-input { flex: 1; } .bind-status { display: inline-flex; align-items: center; justify-content: center; min-width: 5.75rem; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(var(--color-primary-100), 1); color: rgba(var(--color-primary-700), 1); } :is(.dark) .bind-status { background: rgba(var(--color-primary-900), 1); color: rgba(var(--color-primary-300), 1); } .bind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; align-items: end; } .bind-field-label { display: block; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(var(--color-neutral-500), 1); } .bind-stepper { display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; min-width: 0; } .bind-stepper input { flex: 1; min-width: 0; text-align: center; } .bind-stepper button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.4rem; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; padding: 0; margin: 0; border: 2px solid rgba(var(--color-neutral-300), 1); border-radius: 0.6rem; background: transparent; font-weight: 800; font-size: 1rem; line-height: 1; appearance: none; -webkit-appearance: none; box-sizing: border-box; transition: background 0.15s ease, border-color 0.15s ease; } .bind-stepper button:hover { background: rgba(var(--color-neutral-100), 1); } :is(.dark) .bind-stepper button { border-color: rgba(var(--color-neutral-600), 1); } :is(.dark) .bind-stepper button:hover { background: rgba(var(--color-neutral-800), 1); } .bind-progress-meta { font-size: 0.78rem; font-weight: 600; color: rgba(var(--color-neutral-500), 1); text-align: right; } @media (max-width: 768px) { .bind-header { flex-wrap: wrap; } .bind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .bind-grid { grid-template-columns: 1fr; } .bind-progress-meta { text-align: left; } } .buff-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .buff-toggle-track { display: inline-block; flex-shrink: 0; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: transparent; border: 2px solid rgba(var(--color-neutral-400), 1); position: relative; transition: background 0.2s ease, border-color 0.2s ease; } :is(.dark) .buff-toggle-track { border-color: rgba(var(--color-neutral-500), 1); } .buff-toggle input:checked ~ .buff-toggle-track { background: rgba(var(--color-primary-500), 1); border-color: rgba(var(--color-primary-500), 1); } .buff-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: rgba(var(--color-neutral-400), 1); box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s ease, background 0.2s ease; } :is(.dark) .buff-toggle-thumb { background: rgba(var(--color-neutral-500), 1); } .buff-toggle input:checked ~ .buff-toggle-track .buff-toggle-thumb { transform: translateX(1rem); background: #fff; } .buff-toggle input:focus-visible ~ .buff-toggle-track { box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.4); outline: 2px solid rgba(var(--color-primary-500), 1); outline-offset: 2px; } </style> <script src="https://cdn.jsdelivr.net/npm/pouchdb@9.0.0/dist/pouchdb.min.js" integrity="sha384-dtHgv5TNOptjBroaztG8Rm9ve4saqLPzucl+QJhpiaBYyc0rxUfPnMmDw3anjAli" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script> <script defer src="https://pbtpocket.com/js/character-sheet.bundle.571e0775309279335a7e7341442899c88c464ea5bd5431c30949d846246cdb55280aa41f322519d2ced418d05c591c76af1bef7ef97a99606e400fb96d2dfb6f.js" integrity="sha512-Vx4HdTCSeTNafnNBRCiZyIxGTqW9VDHDCUnYRiRs21UoCqQfMiUZ0s7UGNBcWRx2rxvvfvl6mWBuQA&#43;5bS37bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.13.5/dist/cdn.min.js" integrity="sha384-wfbZXVysLM94lbXWxD/5B9Ra+UOJEStm4vBKyQsM8SRhLNmWyoP0WzGd3GQY041c" referrerpolicy="no-referrer" crossorigin="anonymous"></script> <div x-data="characterSheet"> <div class="w-full min-w-full"> <div class="flex flex-row gap-4"> <div class="flex-1"> <label for="cs-mind" class="block font-bold text-lg mb-2 text-neutral-800 dark:text-neutral-200">Mind</label> <select id="cs-mind" x-bind:value="mind" x-on:change="setMind" class="cs-select w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">— Select —</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> </div> <div class="flex-1"> <label for="cs-body" class="block font-bold text-lg mb-2 text-neutral-800 dark:text-neutral-200">Body</label> <select id="cs-body" x-bind:value="body" x-on:change="setBody" class="cs-select w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">— Select —</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> </div> <div class="flex-1"> <label for="cs-control" class="block font-bold text-lg mb-2 text-neutral-800 dark:text-neutral-200">Control</label> <select id="cs-control" x-bind:value="control" x-on:change="setControl" class="cs-select w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">— Select —</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> </div> <div class="flex-2"> <div class="flex items-center"><hr class="vertical-hr"/></div> </div> <div class="flex-2"> <label class="block font-bold text-lg mb-2 text-neutral-800 dark:text-neutral-200">Current Control</label> <div class="flex items-center gap-2"> <input type="text" readonly class="w-16 h-10 px-2 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-bold text-center bg-neutral-100 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200" x-bind:value="controlDieLabel"> <div class="flex flex-row gap-1"> <button type="button" x-on:click="degradeControl" class="h-10 w-10 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-xl font-bold" title="Degrade (Shift Down)"> ↓ </button> <button type="button" x-on:click="upliftControl" class="h-10 w-10 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-xl font-bold" title="Uplift (Shift Up)"> ↑ </button> <button type="button" x-on:click="resetControl" class="h-10 w-10 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-xl font-bold" title="Reset"> ↺ </button> </div> </div> </div> </div> <div class="cs-notice text-center text-sm text-neutral-500 dark:text-neutral-400" x-bind:class="savedNoticeClasses">Saved</div> <div class="stat-toggle"> <button type="button" class="stat-toggle-btn" x-bind:class="mindActiveClasses" x-on:click="selectMind">Mind</button> <button type="button" class="stat-toggle-btn" x-bind:class="bodyActiveClasses" x-on:click="selectBody">Body</button> </div> <div class="dice-row"> <div class="dice-group"> <span class="dice-group-label" x-text="selectedStatLabel"></span> <div class="dice-group-row"> <div class="dice-die" x-bind:class="statDieClasses" x-on:click="rollStat" x-on:keydown.enter="rollStat" x-on:keydown.space.prevent="rollStat" role="button" x-bind:tabindex="statDieTabindex" x-bind:aria-disabled="statDieAriaDisabled"> <svg x-show="statIsD4" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,8 92,88 8,88" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="statShowDefaultOrD6" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <rect x="8" y="8" width="84" height="84" rx="16" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)"/> </svg> <svg x-show="statIsD8" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 96,50 50,96 4,50" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="statIsD10" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 92,35 80,88 20,88 8,35" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="statIsD12" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 82,18 96,50 82,82 50,96 18,82 4,50 18,18" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="statIsD20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,2 93,27 93,73 50,98 7,73 7,27" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <span class="dice-value" x-text="statDisplayValue"></span> <span class="dice-type" x-text="statDieLabel"></span> </div> </div> </div> <div class="dice-divider"></div> <div class="dice-group"> <span class="dice-group-label">Control</span> <div class="dice-group-row"> <div class="dice-die" x-bind:class="ctrl1DieClasses" x-on:click="rollCtrl1" x-on:keydown.enter="rollCtrl1" x-on:keydown.space.prevent="rollCtrl1" role="button" x-bind:tabindex="controlDieTabindex" x-bind:aria-disabled="controlDieAriaDisabled"> <svg x-show="ctrlIsD4" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,8 92,88 8,88" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlShowDefaultOrD6" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <rect x="8" y="8" width="84" height="84" rx="16" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)"/> </svg> <svg x-show="ctrlIsD8" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 96,50 50,96 4,50" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlIsD10" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 92,35 80,88 20,88 8,35" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlIsD12" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 82,18 96,50 82,82 50,96 18,82 4,50 18,18" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlIsD20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,2 93,27 93,73 50,98 7,73 7,27" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <span class="dice-value" x-text="ctrl1DisplayValue"></span> <span class="dice-type" x-text="controlDieLabel"></span> </div> <div class="dice-die" x-bind:class="ctrl2DieClasses" x-on:click="rollCtrl2" x-on:keydown.enter="rollCtrl2" x-on:keydown.space.prevent="rollCtrl2" role="button" x-bind:tabindex="controlDieTabindex" x-bind:aria-disabled="controlDieAriaDisabled"> <svg x-show="ctrlIsD4" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,8 92,88 8,88" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlShowDefaultOrD6" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <rect x="8" y="8" width="84" height="84" rx="16" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)"/> </svg> <svg x-show="ctrlIsD8" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 96,50 50,96 4,50" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlIsD10" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 92,35 80,88 20,88 8,35" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlIsD12" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,4 82,18 96,50 82,82 50,96 18,82 4,50 18,18" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <svg x-show="ctrlIsD20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <polygon points="50,2 93,27 93,73 50,98 7,73 7,27" stroke="currentColor" stroke-width="3" fill="rgba(var(--color-neutral-100),1)" stroke-linejoin="round"/> </svg> <span class="dice-value" x-text="ctrl2DisplayValue"></span> <span class="dice-type" x-text="controlDieLabel"></span> </div> </div> </div> </div> <button type="button" class="dice-roll-btn" x-on:click="handleRollBtn" x-text="rollBtnLabel">Roll</button> </div> <div class="w-full min-w-full" aria-live="polite"> <div class="outcome-box" x-show="showUnderControl"> <div class="flex px-4 py-3 rounded-md shadow outcome-card outcome-card--success"> <span class="pe-3 flex items-center outcome-icon outcome-icon--success"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.7 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"/></svg></span> </span> <span class="outcome-text outcome-text--success"><strong>Under Control</strong> — Your stat die is equal to or under both control dice.</span> </div> </div> <div class="outcome-box" x-show="showTriple"> <div class="flex px-4 py-3 rounded-md shadow outcome-card outcome-card--success"> <span class="pe-3 flex items-center outcome-icon outcome-icon--success"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.7 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"/></svg></span> </span> <span class="outcome-text outcome-text--success"><strong>Triple</strong> — All three dice matched. Add <strong>+2 Impact</strong>.</span> </div> </div> <div class="outcome-box" x-show="showDouble"> <div class="flex px-4 py-3 rounded-md shadow outcome-card outcome-card--success"> <span class="pe-3 flex items-center outcome-icon outcome-icon--success"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.7 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"/></svg></span> </span> <span x-show="doubleUnderControl" class="outcome-text outcome-text--success"><strong>Double</strong> — Control dice matched; Under Control grants <strong>+1 Impact</strong>.</span> <span x-show="doubleOutOfControl" class="outcome-text outcome-text--success"><strong>Double</strong> — Control dice matched; Out of Control grants <strong>+1 Trouble</strong>.</span> </div> </div> <div class="outcome-box" x-show="showEndurable"> <div class="flex px-4 py-3 rounded-md shadow outcome-card outcome-card--warn"> <span class="pe-3 flex items-center outcome-icon outcome-icon--warn"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg> </span> </span> <span class="outcome-text outcome-text--warn"><strong>Endurable</strong> — Your stat die falls between the two control dice.</span> </div> </div> <div class="outcome-box" x-show="showOutOfControl"> <div class="flex px-4 py-3 rounded-md shadow outcome-card outcome-card--danger"> <span class="pe-3 flex items-center outcome-icon outcome-icon--danger"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path fill="currentColor" d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-2.8-5.6-5.6-11.2-9.8-16.8l-50.6 58.8s-81.4-103.6-87.1-110.6C133.1 243.8 112 273.2 112 306.8C112 375.4 162.6 416 225.7 416z"/></svg></span> </span> <span class="outcome-text outcome-text--danger"><strong>Out of Control</strong> — Your stat die exceeds both control dice.</span> </div> </div> </div> <div class="mt-6 border-t-2 border-neutral-300 dark:border-neutral-600 pt-5"> <div class="flex items-center justify-between gap-4 mb-2 flex-wrap"> <span class="font-bold text-lg text-neutral-800 dark:text-neutral-200">Character Details</span> <div class="sheet-tab-bar" role="tablist" aria-label="Character details sections"> <button type="button" class="sheet-tab-btn" id="tab-aspects" role="tab" x-ref="aspectsTab" x-bind:class="aspectTabClasses" x-bind:aria-selected="aspectTabSelected" x-bind:tabindex="aspectsTabIndex" x-on:click="selectAspectsTab" x-on:keydown.arrow-right.prevent="navToBindsTab" x-on:keydown.arrow-left.prevent="navToBackgroundTab">Aspects</button> <button type="button" class="sheet-tab-btn" id="tab-binds" role="tab" x-ref="bindsTab" x-bind:class="bindTabClasses" x-bind:aria-selected="bindsTabSelected" x-bind:tabindex="bindsTabIndex" x-on:click="selectBindsTab" x-on:keydown.arrow-left.prevent="navToAspectsTab" x-on:keydown.arrow-right.prevent="navToBackgroundTab">Binds</button> <button type="button" class="sheet-tab-btn" id="tab-background" role="tab" x-ref="backgroundTab" x-bind:class="backgroundTabClasses" x-bind:aria-selected="backgroundTabSelected" x-bind:tabindex="backgroundTabIndex" x-on:click="selectBackgroundTab" x-on:keydown.arrow-left.prevent="navToBindsTab" x-on:keydown.arrow-right.prevent="navToAspectsTab">Background</button> </div> </div> <div x-show="showAspectsPanel" x-cloak role="tabpanel" aria-labelledby="tab-aspects"> <div class="flex items-center justify-between mb-2 flex-wrap gap-3"> <span class="font-bold text-lg text-neutral-800 dark:text-neutral-200">Aspects</span> <div class="flex gap-3 items-center flex-wrap" x-show="hasAspects"> <span class="text-sm text-neutral-400" x-text="totalAspectWordsLabel"></span> <span class="text-sm text-neutral-300 dark:text-neutral-600">|</span> <span class="text-sm text-red-600 dark:text-red-400" x-text="crossedOffWordsLabel"></span> <span class="text-sm text-amber-700 dark:text-amber-500" x-text="remainingWordsLabel"></span> <button type="button" x-bind:disabled="disableClearCrossedOff" x-on:click="clearAllCrossedOff" class="h-7 px-2 flex items-center justify-center border-2 border-red-300 dark:border-red-700 rounded-lg hover:bg-red-100 dark:hover:bg-red-900 transition-colors text-xs font-bold text-red-600 dark:text-red-400 disabled:opacity-30 disabled:cursor-not-allowed" title="Clear all crossed-off words" aria-label="Clear all crossed-off words">Clear ✕</button> <span class="text-sm text-neutral-300 dark:text-neutral-600">|</span> <span class="text-sm text-neutral-400" x-text="aspectCountLabel"></span> </div> </div> <div x-show="noAspects" class="text-center py-4 text-neutral-400 dark:text-neutral-500 text-sm italic"> No aspects yet. Add one below. </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect0" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords0" data-index="0" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat0" data-index="0" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie0" data-index="0" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact0" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="0" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff0" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff0" title="Crossed-off words in this aspect"></span> <button type="button" data-index="0" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff0" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="0" x-bind:checked="aspectIsBuff0" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="0" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect1" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords1" data-index="1" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat1" data-index="1" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie1" data-index="1" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact1" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="1" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff1" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff1" title="Crossed-off words in this aspect"></span> <button type="button" data-index="1" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff1" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="1" x-bind:checked="aspectIsBuff1" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="1" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect2" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords2" data-index="2" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat2" data-index="2" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie2" data-index="2" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact2" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="2" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff2" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff2" title="Crossed-off words in this aspect"></span> <button type="button" data-index="2" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff2" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="2" x-bind:checked="aspectIsBuff2" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="2" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect3" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords3" data-index="3" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat3" data-index="3" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie3" data-index="3" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact3" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="3" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff3" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff3" title="Crossed-off words in this aspect"></span> <button type="button" data-index="3" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff3" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="3" x-bind:checked="aspectIsBuff3" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="3" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect4" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords4" data-index="4" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat4" data-index="4" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie4" data-index="4" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact4" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="4" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff4" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff4" title="Crossed-off words in this aspect"></span> <button type="button" data-index="4" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff4" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="4" x-bind:checked="aspectIsBuff4" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="4" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect5" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords5" data-index="5" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat5" data-index="5" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie5" data-index="5" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact5" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="5" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff5" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff5" title="Crossed-off words in this aspect"></span> <button type="button" data-index="5" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff5" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="5" x-bind:checked="aspectIsBuff5" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="5" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect6" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords6" data-index="6" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat6" data-index="6" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie6" data-index="6" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact6" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="6" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff6" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff6" title="Crossed-off words in this aspect"></span> <button type="button" data-index="6" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff6" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="6" x-bind:checked="aspectIsBuff6" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="6" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect7" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords7" data-index="7" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat7" data-index="7" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie7" data-index="7" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact7" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="7" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff7" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff7" title="Crossed-off words in this aspect"></span> <button type="button" data-index="7" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff7" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="7" x-bind:checked="aspectIsBuff7" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="7" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect8" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords8" data-index="8" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat8" data-index="8" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie8" data-index="8" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact8" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="8" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff8" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff8" title="Crossed-off words in this aspect"></span> <button type="button" data-index="8" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff8" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="8" x-bind:checked="aspectIsBuff8" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="8" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect9" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords9" data-index="9" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat9" data-index="9" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie9" data-index="9" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact9" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="9" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff9" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff9" title="Crossed-off words in this aspect"></span> <button type="button" data-index="9" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff9" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="9" x-bind:checked="aspectIsBuff9" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="9" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect10" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords10" data-index="10" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat10" data-index="10" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie10" data-index="10" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact10" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="10" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff10" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff10" title="Crossed-off words in this aspect"></span> <button type="button" data-index="10" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff10" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="10" x-bind:checked="aspectIsBuff10" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="10" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect11" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords11" data-index="11" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat11" data-index="11" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie11" data-index="11" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact11" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="11" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff11" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff11" title="Crossed-off words in this aspect"></span> <button type="button" data-index="11" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff11" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="11" x-bind:checked="aspectIsBuff11" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="11" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect12" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords12" data-index="12" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat12" data-index="12" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie12" data-index="12" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact12" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="12" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff12" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff12" title="Crossed-off words in this aspect"></span> <button type="button" data-index="12" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff12" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="12" x-bind:checked="aspectIsBuff12" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="12" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect13" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords13" data-index="13" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat13" data-index="13" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie13" data-index="13" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact13" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="13" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff13" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff13" title="Crossed-off words in this aspect"></span> <button type="button" data-index="13" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff13" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="13" x-bind:checked="aspectIsBuff13" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="13" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect14" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords14" data-index="14" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat14" data-index="14" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie14" data-index="14" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact14" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="14" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff14" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff14" title="Crossed-off words in this aspect"></span> <button type="button" data-index="14" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff14" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="14" x-bind:checked="aspectIsBuff14" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="14" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect15" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords15" data-index="15" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat15" data-index="15" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie15" data-index="15" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact15" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="15" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff15" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff15" title="Crossed-off words in this aspect"></span> <button type="button" data-index="15" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff15" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="15" x-bind:checked="aspectIsBuff15" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="15" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect16" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords16" data-index="16" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat16" data-index="16" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie16" data-index="16" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact16" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="16" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff16" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff16" title="Crossed-off words in this aspect"></span> <button type="button" data-index="16" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff16" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="16" x-bind:checked="aspectIsBuff16" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="16" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect17" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords17" data-index="17" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat17" data-index="17" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie17" data-index="17" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact17" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="17" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff17" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff17" title="Crossed-off words in this aspect"></span> <button type="button" data-index="17" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff17" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="17" x-bind:checked="aspectIsBuff17" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="17" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <div class="flex flex-col gap-2 py-3 border-b border-neutral-100 dark:border-neutral-800" x-show="showAspect18" x-cloak> <textarea rows="2" placeholder="Aspect words…" aria-label="Aspect words" x-bind:value="aspectWords18" data-index="18" x-on:change="setAspectWords" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> <div class="flex items-center gap-4"> <select x-bind:value="aspectCoreStat18" data-index="18" x-on:change="setAspectCoreStat" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="mind">Mind</option> <option value="body">Body</option> </select> <select x-bind:value="aspectBottomDie18" data-index="18" x-on:change="setAspectBottomDie" class="cs-select px-5 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 cursor-pointer"> <option value="">-</option> <option value="4">D4</option> <option value="6">D6</option> <option value="8">D8</option> <option value="10">D10</option> <option value="12">D12</option> <option value="20">D20</option> </select> <div class="vertical-hr"></div> <span class="min-w-10 text-center font-extrabold text-lg text-primary-600 dark:text-primary-400" x-text="aspectImpact18" title="Impact"></span> <div class="flex items-center gap-1"> <div class="vertical-hr"></div> <button type="button" data-index="18" x-on:click="decreaseAspectCrossedOff" x-bind:disabled="aspectDisableDecreaseCrossedOff18" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Restore crossed-off word" aria-label="Restore crossed-off word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span> </button> <span class="min-w-[1.5rem] text-center text-sm font-bold text-red-600 dark:text-red-400" x-text="aspectCrossedOff18" title="Crossed-off words in this aspect"></span> <button type="button" data-index="18" x-on:click="increaseAspectCrossedOff" x-bind:disabled="aspectDisableIncreaseCrossedOff18" class="h-7 w-7 px-2 py-2 flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors text-sm font-bold disabled:opacity-30 disabled:cursor-not-allowed" title="Cross off a word" aria-label="Cross off a word"> <span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> <div class="vertical-hr"></div> </div> <label class="buff-toggle flex items-center gap-2 cursor-pointer select-none text-sm font-semibold text-neutral-500 dark:text-neutral-400"> <input type="checkbox" data-index="18" x-bind:checked="aspectIsBuff18" x-on:change="setAspectIsBuff"> <span class="buff-toggle-track"><span class="buff-toggle-thumb"></span></span> Buff </label> <span class="flex-1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="18" x-on:click="removeAspect" title="Remove aspect" aria-label="Remove aspect"> ✕ </button> </div> </div> <button type="button" class="mt-3 py-2 px-4 border-2 border-dashed border-neutral-300 dark:border-neutral-600 rounded-lg bg-transparent text-neutral-500 dark:text-neutral-400 font-bold text-base cursor-pointer transition-all w-full hover:border-primary-500 hover:text-primary-600 dark:hover:border-primary-400 dark:hover:text-primary-400" x-on:click="addAspect" x-show="canAddAspect">+ Add Aspect</button> </div> <div x-show="showBindsPanel" x-cloak role="tabpanel" aria-labelledby="tab-binds"> <div class="flex items-center justify-between mb-2 flex-wrap gap-3"> <span class="font-bold text-lg text-neutral-800 dark:text-neutral-200">Binds</span> <span class="text-sm text-neutral-400" x-text="bindCountLabel"></span> </div> <div x-show="noBinds" class="text-center py-4 text-neutral-400 dark:text-neutral-500 text-sm italic"> No binds yet. Add one below. </div> <div class="bind-row" x-show="showBind0" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle0" data-index="0" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel0"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="0" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-0">Resolution</label> <input id="bind-resolution-0" type="number" min="0" step="1" x-bind:value="bindResolutionTicks0" data-index="0" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-0">Progress</label> <div class="bind-stepper"> <button type="button" data-index="0" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-0" type="number" min="0" step="1" x-bind:value="bindProgress0" data-index="0" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="0" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-0">Trouble</label> <input id="bind-trouble-0" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble0" data-index="0" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel0"></span> </div> </div> </div> <div class="bind-row" x-show="showBind1" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle1" data-index="1" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel1"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="1" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-1">Resolution</label> <input id="bind-resolution-1" type="number" min="0" step="1" x-bind:value="bindResolutionTicks1" data-index="1" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-1">Progress</label> <div class="bind-stepper"> <button type="button" data-index="1" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-1" type="number" min="0" step="1" x-bind:value="bindProgress1" data-index="1" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="1" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-1">Trouble</label> <input id="bind-trouble-1" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble1" data-index="1" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel1"></span> </div> </div> </div> <div class="bind-row" x-show="showBind2" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle2" data-index="2" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel2"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="2" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-2">Resolution</label> <input id="bind-resolution-2" type="number" min="0" step="1" x-bind:value="bindResolutionTicks2" data-index="2" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-2">Progress</label> <div class="bind-stepper"> <button type="button" data-index="2" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-2" type="number" min="0" step="1" x-bind:value="bindProgress2" data-index="2" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="2" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-2">Trouble</label> <input id="bind-trouble-2" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble2" data-index="2" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel2"></span> </div> </div> </div> <div class="bind-row" x-show="showBind3" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle3" data-index="3" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel3"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="3" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-3">Resolution</label> <input id="bind-resolution-3" type="number" min="0" step="1" x-bind:value="bindResolutionTicks3" data-index="3" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-3">Progress</label> <div class="bind-stepper"> <button type="button" data-index="3" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-3" type="number" min="0" step="1" x-bind:value="bindProgress3" data-index="3" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="3" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-3">Trouble</label> <input id="bind-trouble-3" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble3" data-index="3" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel3"></span> </div> </div> </div> <div class="bind-row" x-show="showBind4" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle4" data-index="4" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel4"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="4" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-4">Resolution</label> <input id="bind-resolution-4" type="number" min="0" step="1" x-bind:value="bindResolutionTicks4" data-index="4" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-4">Progress</label> <div class="bind-stepper"> <button type="button" data-index="4" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-4" type="number" min="0" step="1" x-bind:value="bindProgress4" data-index="4" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="4" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-4">Trouble</label> <input id="bind-trouble-4" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble4" data-index="4" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel4"></span> </div> </div> </div> <div class="bind-row" x-show="showBind5" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle5" data-index="5" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel5"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="5" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-5">Resolution</label> <input id="bind-resolution-5" type="number" min="0" step="1" x-bind:value="bindResolutionTicks5" data-index="5" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-5">Progress</label> <div class="bind-stepper"> <button type="button" data-index="5" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-5" type="number" min="0" step="1" x-bind:value="bindProgress5" data-index="5" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="5" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-5">Trouble</label> <input id="bind-trouble-5" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble5" data-index="5" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel5"></span> </div> </div> </div> <div class="bind-row" x-show="showBind6" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle6" data-index="6" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel6"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="6" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-6">Resolution</label> <input id="bind-resolution-6" type="number" min="0" step="1" x-bind:value="bindResolutionTicks6" data-index="6" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-6">Progress</label> <div class="bind-stepper"> <button type="button" data-index="6" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-6" type="number" min="0" step="1" x-bind:value="bindProgress6" data-index="6" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="6" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-6">Trouble</label> <input id="bind-trouble-6" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble6" data-index="6" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel6"></span> </div> </div> </div> <div class="bind-row" x-show="showBind7" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle7" data-index="7" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel7"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="7" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-7">Resolution</label> <input id="bind-resolution-7" type="number" min="0" step="1" x-bind:value="bindResolutionTicks7" data-index="7" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-7">Progress</label> <div class="bind-stepper"> <button type="button" data-index="7" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-7" type="number" min="0" step="1" x-bind:value="bindProgress7" data-index="7" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="7" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-7">Trouble</label> <input id="bind-trouble-7" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble7" data-index="7" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel7"></span> </div> </div> </div> <div class="bind-row" x-show="showBind8" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle8" data-index="8" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel8"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="8" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-8">Resolution</label> <input id="bind-resolution-8" type="number" min="0" step="1" x-bind:value="bindResolutionTicks8" data-index="8" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-8">Progress</label> <div class="bind-stepper"> <button type="button" data-index="8" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-8" type="number" min="0" step="1" x-bind:value="bindProgress8" data-index="8" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="8" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-8">Trouble</label> <input id="bind-trouble-8" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble8" data-index="8" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel8"></span> </div> </div> </div> <div class="bind-row" x-show="showBind9" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle9" data-index="9" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel9"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="9" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-9">Resolution</label> <input id="bind-resolution-9" type="number" min="0" step="1" x-bind:value="bindResolutionTicks9" data-index="9" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-9">Progress</label> <div class="bind-stepper"> <button type="button" data-index="9" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-9" type="number" min="0" step="1" x-bind:value="bindProgress9" data-index="9" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="9" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-9">Trouble</label> <input id="bind-trouble-9" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble9" data-index="9" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel9"></span> </div> </div> </div> <div class="bind-row" x-show="showBind10" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle10" data-index="10" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel10"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="10" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-10">Resolution</label> <input id="bind-resolution-10" type="number" min="0" step="1" x-bind:value="bindResolutionTicks10" data-index="10" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-10">Progress</label> <div class="bind-stepper"> <button type="button" data-index="10" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-10" type="number" min="0" step="1" x-bind:value="bindProgress10" data-index="10" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="10" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-10">Trouble</label> <input id="bind-trouble-10" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble10" data-index="10" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel10"></span> </div> </div> </div> <div class="bind-row" x-show="showBind11" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle11" data-index="11" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel11"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="11" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-11">Resolution</label> <input id="bind-resolution-11" type="number" min="0" step="1" x-bind:value="bindResolutionTicks11" data-index="11" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-11">Progress</label> <div class="bind-stepper"> <button type="button" data-index="11" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-11" type="number" min="0" step="1" x-bind:value="bindProgress11" data-index="11" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="11" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-11">Trouble</label> <input id="bind-trouble-11" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble11" data-index="11" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel11"></span> </div> </div> </div> <div class="bind-row" x-show="showBind12" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle12" data-index="12" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel12"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="12" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-12">Resolution</label> <input id="bind-resolution-12" type="number" min="0" step="1" x-bind:value="bindResolutionTicks12" data-index="12" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-12">Progress</label> <div class="bind-stepper"> <button type="button" data-index="12" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-12" type="number" min="0" step="1" x-bind:value="bindProgress12" data-index="12" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="12" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-12">Trouble</label> <input id="bind-trouble-12" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble12" data-index="12" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel12"></span> </div> </div> </div> <div class="bind-row" x-show="showBind13" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle13" data-index="13" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel13"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="13" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-13">Resolution</label> <input id="bind-resolution-13" type="number" min="0" step="1" x-bind:value="bindResolutionTicks13" data-index="13" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-13">Progress</label> <div class="bind-stepper"> <button type="button" data-index="13" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-13" type="number" min="0" step="1" x-bind:value="bindProgress13" data-index="13" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="13" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-13">Trouble</label> <input id="bind-trouble-13" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble13" data-index="13" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel13"></span> </div> </div> </div> <div class="bind-row" x-show="showBind14" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle14" data-index="14" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel14"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="14" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-14">Resolution</label> <input id="bind-resolution-14" type="number" min="0" step="1" x-bind:value="bindResolutionTicks14" data-index="14" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-14">Progress</label> <div class="bind-stepper"> <button type="button" data-index="14" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-14" type="number" min="0" step="1" x-bind:value="bindProgress14" data-index="14" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="14" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-14">Trouble</label> <input id="bind-trouble-14" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble14" data-index="14" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel14"></span> </div> </div> </div> <div class="bind-row" x-show="showBind15" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle15" data-index="15" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel15"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="15" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-15">Resolution</label> <input id="bind-resolution-15" type="number" min="0" step="1" x-bind:value="bindResolutionTicks15" data-index="15" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-15">Progress</label> <div class="bind-stepper"> <button type="button" data-index="15" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-15" type="number" min="0" step="1" x-bind:value="bindProgress15" data-index="15" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="15" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-15">Trouble</label> <input id="bind-trouble-15" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble15" data-index="15" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel15"></span> </div> </div> </div> <div class="bind-row" x-show="showBind16" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle16" data-index="16" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel16"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="16" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-16">Resolution</label> <input id="bind-resolution-16" type="number" min="0" step="1" x-bind:value="bindResolutionTicks16" data-index="16" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-16">Progress</label> <div class="bind-stepper"> <button type="button" data-index="16" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-16" type="number" min="0" step="1" x-bind:value="bindProgress16" data-index="16" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="16" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-16">Trouble</label> <input id="bind-trouble-16" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble16" data-index="16" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel16"></span> </div> </div> </div> <div class="bind-row" x-show="showBind17" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle17" data-index="17" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel17"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="17" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-17">Resolution</label> <input id="bind-resolution-17" type="number" min="0" step="1" x-bind:value="bindResolutionTicks17" data-index="17" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-17">Progress</label> <div class="bind-stepper"> <button type="button" data-index="17" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-17" type="number" min="0" step="1" x-bind:value="bindProgress17" data-index="17" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="17" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-17">Trouble</label> <input id="bind-trouble-17" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble17" data-index="17" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel17"></span> </div> </div> </div> <div class="bind-row" x-show="showBind18" x-cloak> <div class="bind-header"> <input type="text" placeholder="Bind title…" aria-label="Bind title" x-bind:value="bindTitle18" data-index="18" x-on:change="setBindTitle" class="bind-title-input w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <span class="bind-status" x-text="bindStatusLabel18"></span> <button type="button" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-400 dark:text-neutral-500 cursor-pointer transition-all text-xl leading-none hover:bg-red-100 hover:border-red-300 hover:text-red-600 dark:hover:bg-red-900 dark:hover:border-red-300 dark:hover:text-red-300" data-index="18" x-on:click="removeBind" title="Remove bind" aria-label="Remove bind"> ✕ </button> </div> <div class="bind-grid"> <div> <label class="bind-field-label" for="bind-resolution-18">Resolution</label> <input id="bind-resolution-18" type="number" min="0" step="1" x-bind:value="bindResolutionTicks18" data-index="18" x-on:change="setBindResolutionTicks" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label class="bind-field-label" for="bind-progress-18">Progress</label> <div class="bind-stepper"> <button type="button" data-index="18" x-on:click="decreaseBindProgress" aria-label="Decrease bind progress"> - </button> <input id="bind-progress-18" type="number" min="0" step="1" x-bind:value="bindProgress18" data-index="18" x-on:change="setBindProgress" class="px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> <button type="button" data-index="18" x-on:click="increaseBindProgress" aria-label="Increase bind progress"> + </button> </div> </div> <div> <label class="bind-field-label" for="bind-trouble-18">Trouble</label> <input id="bind-trouble-18" type="number" min="0" step="1" placeholder="Optional" x-bind:value="bindTrouble18" data-index="18" x-on:change="setBindTrouble" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div class="flex flex-col justify-end"> <span class="bind-field-label">Progress so far</span> <span class="py-3 text-emerald-400 dark:text-emerald-500 text-sm italic" x-text="bindProgressLabel18"></span> </div> </div> </div> <button type="button" class="mt-3 py-2 px-4 border-2 border-dashed border-neutral-300 dark:border-neutral-600 rounded-lg bg-transparent text-neutral-500 dark:text-neutral-400 font-bold text-base cursor-pointer transition-all w-full hover:border-primary-500 hover:text-primary-600 dark:hover:border-primary-400 dark:hover:text-primary-400" x-on:click="addBind" x-show="canAddBind">+ Add Bind</button> </div> <div x-show="showBackgroundPanel" x-cloak role="tabpanel" aria-labelledby="tab-background"> <div class="flex flex-col gap-5 py-2"> <div> <label for="bg-name" class="block font-bold text-sm mb-1 text-neutral-700 dark:text-neutral-300">Name</label> <input id="bg-name" type="text" placeholder="Character name…" x-bind:value="characterName" x-on:change="setCharacterName" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500"> </div> <div> <label for="bg-sensory" class="block font-bold text-sm mb-1 text-neutral-700 dark:text-neutral-300">What is that smell? / What is that sound? / Are you hungry?</label> <textarea id="bg-sensory" rows="3" x-bind:value="backgroundSensory" x-on:change="setBackgroundSensory" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> </div> <div> <label for="bg-how-here" class="block font-bold text-sm mb-1 text-neutral-700 dark:text-neutral-300">How did you end up here?</label> <textarea id="bg-how-here" rows="3" x-bind:value="backgroundHowHere" x-on:change="setBackgroundHowHere" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> </div> <div> <label for="bg-plan" class="block font-bold text-sm mb-1 text-neutral-700 dark:text-neutral-300">What are you going to do about it?</label> <textarea id="bg-plan" rows="3" x-bind:value="backgroundPlan" x-on:change="setBackgroundPlan" class="w-full px-3 py-2 border-2 border-neutral-300 dark:border-neutral-600 rounded-lg font-semibold text-base bg-transparent text-neutral-700 dark:text-neutral-300 dark:bg-neutral-800 focus:outline-none focus:border-primary-500 resize-none"></textarea> </div> </div> </div> </div> </div>