character page: player card, prepared spells, attunements

- PlayerCard: read-only portrait, name, class, level, XP (the sidebar
  holds the editors for this data)
- PreparedSpells: growable slot list; a vacant slot has a free-text
  input and '+' to fill it, an occupied slot shows name/level/
  description and '×' to empty it; '+ слот' appends a vacant slot
- Attunements: three slots, free-text entry and per-slot clear
- rows are plain functions called from For's let(...) children —
  component tags are not allowed directly inside them (view macro)
- Field<...> conversions for the Subfield prop types, state-in-key
  keys so changed rows re-render (same convention as sidebar pips)
- SCSS: _character.scss with card, slot rows, buttons (mixins)

style/_character.scss

@@ -0,0 +1,112 @@
+@use 'mixins';
+
+.character-page {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 10px 24px;
+    overflow-y: auto;
+}
+
+.player-card {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+
+    img {
+        width: 92px;
+        height: 92px;
+        object-fit: cover;
+        border-radius: 6px;
+        box-shadow: 0 0 0 2px crimson;
+    }
+
+    .player-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .player-name {
+        font-size: 1.5em;
+        font-weight: 900;
+    }
+
+    .player-class, .player-level, .player-xp {
+        font-weight: 300;
+        opacity: 0.8;
+    }
+}
+
+.prepared-spells, .attunements {
+    h6 {
+        text-transform: lowercase;
+        font-size: 1.1em;
+        margin: 0 0 10px;
+        font-weight: 900;
+        &::first-letter {
+            text-decoration: underline crimson;
+        }
+    }
+
+    .prepared-slot, .attunement-slot {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 4px 0;
+
+        input {
+            flex: 1;
+            max-width: 340px;
+            border: none;
+            color: white;
+            background: rgba(255, 255, 255, 0.06);
+            padding: 3px 8px;
+
+            &:focus {
+                outline: 1px solid crimson;
+            }
+        }
+
+        button {
+            @include mixins.button;
+            width: 34px;
+            height: 30px;
+            border: 0;
+            line-height: 1;
+        }
+    }
+
+    .prepared-slot {
+        &.occupied {
+            .spell-name {
+                font-weight: 900;
+                min-width: 200px;
+            }
+        }
+
+        .spell-level, .spell-desc {
+            font-weight: 300;
+            opacity: 0.75;
+            font-size: 0.85em;
+        }
+
+        .spell-level {
+            min-width: 44px;
+        }
+    }
+
+    .attuned-item {
+        font-weight: 900;
+        min-width: 200px;
+    }
+}
+
+.prepared-spells {
+    .add-slot {
+        @include mixins.button;
+        margin-top: 10px;
+        border: 0;
+        padding: 3px 14px;
+    }
+}

style/main.scss

@@ -3,6 +3,7 @@
 @use 'reset';
 @use 'mixins';
 @use 'header';
+@use 'character';
 @use 'sidebar';
 @use 'nav';
 @use 'inventory';