#vault-app {
  --vault-ink: var(--ivory, #f2f0df);
  --vault-muted: var(--muted, #b5beb0);
  --vault-violet: var(--violet, #b497ee);
  --vault-amber: var(--amber, #e5bf7e);
  --vault-paper: var(--ivory, #f2f0df);
  --vault-paper-ink: #26372d;
  width: 100%;
  margin-inline: auto;
  container: capp-vault / inline-size;
  color: var(--vault-ink);
  font: 14px/1.55 var(--body, Arial, sans-serif);
}
#vault-app *, #vault-app *::before, #vault-app *::after { box-sizing: border-box; }
#vault-app button, #vault-app input, #vault-app textarea { font: inherit; }
#vault-app button { cursor: pointer; }
#vault-app button:disabled { cursor: default; opacity: .45; }
#vault-app button:focus-visible { outline: 2px solid var(--lime, #d6f596); outline-offset: 4px; }
#vault-app .vault-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 510px; background: var(--panel, #202b27); border: 1px solid var(--edge, #596450); border-radius: 2px 22px 2px 2px; box-shadow: 0 8px 0 #0b110e; }
#vault-app .vault-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 25px 18px 21px; border-right: 1px solid #131c17; background: #303d35; position: relative; }
#vault-app .vault-sidebar::after { content: ''; position: absolute; right: -4px; top: 20px; bottom: 20px; width: 4px; background: #141e18; border-right: 1px solid #5d6b5459; }
#vault-app .vault-rack-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 21px; }
#vault-app .vault-kicker { font: 10px/1.4 var(--mono, monospace); font-weight: 600; letter-spacing: 1px; }
#vault-app .vault-record-count { font: 30px/1 var(--display, Impact, sans-serif); color: var(--vault-amber); }
#vault-app .vault-new { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #8d9a7c; border-radius: 2px; background: #aebd99; color: #1d2b21; font-weight: 600; transition: background .18s ease; }
#vault-app .vault-new > span { font-size: 23px; font-weight: 400; line-height: 1; }
#vault-app .vault-new[aria-pressed="true"] { background: var(--lime, #d6f596); border-color: var(--lime, #d6f596); }
#vault-app .vault-rack { padding: 0 4px; margin: 26px -4px 20px; list-style: none; max-height: 330px; overflow: auto; scrollbar-width: thin; scrollbar-color: #7e8d71 #223027; }
#vault-app .vault-rack li + li { margin-top: 9px; }
#vault-app .vault-slot { display: grid; grid-template-columns: 18px minmax(0, 1fr) 6px; align-items: center; gap: 9px; width: 100%; min-height: 72px; text-align: left; padding: 11px 10px; border: 1px solid #617158; border-top-color: #819173; border-radius: 1px; background: #3a4a3d; color: var(--vault-ink); transition: background .18s, border-color .18s; }
#vault-app .vault-slot-index { font: 11px var(--mono, monospace); color: #b5c0a9; }
#vault-app .vault-slot-label { min-width: 0; }
#vault-app .vault-slot strong { display: block; font-size: 13px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
#vault-app .vault-slot time { display: block; margin-top: 4px; font: 10px/1.6 var(--mono, monospace); color: #c1c8b9; }
#vault-app .vault-slot-light { width: 5px; height: 16px; border-radius: 2px; background: #1c281f; }
#vault-app .vault-slot[aria-pressed="true"] { background: #dce4c7; color: #213226; border-color: #e6edd9; }
#vault-app .vault-slot[aria-pressed="true"] .vault-slot-index, #vault-app .vault-slot[aria-pressed="true"] time { color: #4e5b45; }
#vault-app .vault-slot[aria-pressed="true"] .vault-slot-light { background: #655285; }
#vault-app .vault-empty { flex: 1; padding: 35px 2px 28px; }
#vault-app .vault-empty-slots { height: 151px; position: relative; padding: 11px 0; }
#vault-app .vault-empty-slots i { display: block; height: 32px; margin-bottom: 8px; border-top: 1px solid #19271e; border-bottom: 1px solid #72806355; background: #233127; }
#vault-app .vault-empty-slots span { position: absolute; inset: 22px 0 auto; color: #758469; text-align: center; font: 72px/1 var(--display, Impact, sans-serif); letter-spacing: -2px; }
#vault-app .vault-empty p { margin: 17px 0 0; color: #c4cbb9; font-size: 12px; line-height: 1.8; }
#vault-app .vault-local-note { display: flex; align-items: flex-start; gap: 9px; margin: auto 0 0; padding-top: 20px; border-top: 1px solid #7d8d694d; color: #c0c9b6; font-size: 12px; line-height: 1.7; }
#vault-app .vault-local-note svg { flex: 0 0 20px; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.3; }
#vault-app .vault-terminal { min-width: 0; display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr); gap: 30px; padding: 27px 30px 24px; align-items: start; }
#vault-app .vault-console-head { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
#vault-app .vault-machine-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 1px 0 0; color: #b4bdaa; }
#vault-app .vault-machine-top .vault-kicker { font-size: 9px; letter-spacing: .75px; }
#vault-app .vault-core-status { display: inline-flex; align-items: center; gap: 6px; font: 9px/1.4 var(--mono, monospace); letter-spacing: .6px; color: var(--lime, #d6f596); }
#vault-app .vault-core-status i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
#vault-app .vault-core { width: calc(100% + 26px); margin: -5px -13px -2px; max-width: 310px; align-self: center; }
#vault-app .vault-core svg { display: block; width: 100%; height: auto; overflow: visible; }
#vault-app .vault-memory-card { transform-origin: 150px 195px; opacity: .8; transition: opacity .3s; }
#vault-app[data-view="stored"] .vault-memory-card { opacity: 1; }
#vault-app .vault-readout { margin: 0 auto; width: 100%; max-width: 263px; }
#vault-app .vault-date-screen { padding: 12px 14px 11px; border-left: 2px solid #ab8754; background: #111b16; }
#vault-app .vault-date-screen > span { display: block; color: #cbb58d; font: 9px/1.3 var(--mono, monospace); letter-spacing: 1.8px; }
#vault-app .vault-date-screen output { display: block; margin-top: 5px; color: var(--vault-amber); font: 20px/1.35 var(--mono, monospace); letter-spacing: -.8px; white-space: nowrap; }
#vault-app .vault-readout > p { margin: 19px 0 0; color: #c7cebc; text-align: center; font: 20px/1.2 var(--display, Impact, sans-serif); letter-spacing: .4px; }
#vault-app .vault-workspace { min-width: 0; }
#vault-app .vault-form { margin: 0; }
#vault-app .vault-paper { position: relative; background: var(--vault-paper); color: var(--vault-paper-ink); padding: 24px 27px 17px; box-shadow: 5px 6px 0 #111b1573; border-radius: 1px; }
#vault-app .vault-paper::after { content: ''; position: absolute; right: 0; top: 0; width: 19px; height: 19px; background: linear-gradient(45deg, #d5d8bd 50%, #202b27 50%); }
#vault-app .vault-paper-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-right: 7px; color: #616e57; }
#vault-app .vault-paper-heading .vault-kicker { font-size: 9px; letter-spacing: 1.4px; }
#vault-app .vault-paper-mark { font: 11px var(--mono, monospace); }
#vault-app .vault-paper h3 { font: 36px/1.05 var(--display, Impact, sans-serif); letter-spacing: -.4px; margin: 17px 0 23px; }
#vault-app .vault-form label { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; margin: 0 0 6px; }
#vault-app .vault-form label span { font-weight: 400; color: #68715d; margin-left: 4px; font-size: 10px; }
#vault-app .vault-form-pair { display: grid; grid-template-columns: 1fr 1.05fr; gap: 22px; margin-bottom: 20px; }
#vault-app .vault-form-pair > div { min-width: 0; }
#vault-app input { width: 100%; min-width: 0; height: 40px; padding: 7px 0; border: 0; border-bottom: 1px solid #8a967c; border-radius: 0; background: transparent; color: var(--vault-paper-ink); font-size: 14px; color-scheme: light; }
#vault-app input::placeholder, #vault-app textarea::placeholder { color: #77816e; opacity: 1; }
#vault-app input:focus-visible, #vault-app textarea:focus-visible { outline: 2px solid #615177; outline-offset: 3px; }
#vault-app textarea { display: block; width: 100%; min-width: 0; min-height: 128px; padding: 1px 0 0; resize: vertical; border: 0; border-radius: 0; color: var(--vault-paper-ink); background: repeating-linear-gradient(transparent 0 30px, #9aa38b59 30px 31px); font-size: 14px; line-height: 31px; }
#vault-app input[aria-invalid="true"], #vault-app textarea[aria-invalid="true"] { outline: 1px solid #9b3f29; outline-offset: 2px; }
#vault-app .vault-field-error { color: #943820; margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
#vault-app .vault-field-error:empty { display: none; }
#vault-app .vault-writing-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 22px; margin-top: 7px; }
#vault-app .vault-writing-meta .vault-field-error { margin-top: 0; }
#vault-app #vault-message-count { color: #68715e; font: 10px/1.6 var(--mono, monospace); margin-left: auto; white-space: nowrap; }
#vault-app .vault-form-actions, #vault-app .vault-stored-actions { display: flex; align-items: center; gap: 17px; margin-top: 20px; }
#vault-app .vault-primary, #vault-app .vault-secondary, #vault-app .vault-danger { min-height: 46px; border-radius: 2px; font-size: 12px; font-weight: 500; transition: background .18s, color .18s, border-color .18s; }
#vault-app .vault-primary { display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; flex: 1; padding: 12px 17px; border: 1px solid #c5a7f2; background: #b497ee; color: #221a32; box-shadow: 0 3px 0 #796390; }
#vault-app .vault-primary > span:last-child { font-size: 20px; line-height: 1; }
#vault-app .vault-secondary { padding: 10px 0; border: 0; border-bottom: 1px solid transparent; color: #d1d8c6; background: transparent; white-space: nowrap; }
#vault-app .vault-danger { padding: 10px 15px; border: 1px solid #dab19b; color: #f2ded0; background: #773b2e; }
#vault-app .vault-delete { margin-left: auto; }
#vault-app .vault-recovery { color: var(--vault-amber); border-bottom-color: currentColor; }
#vault-app .vault-honest-note { color: #b9c4b0; font-size: 12px; line-height: 1.7; margin: 15px 0 0; max-width: 52ch; }
#vault-app .vault-feedback, #vault-app .vault-storage-notice { padding: 12px 14px; margin: 0 0 16px; border-left: 2px solid var(--lime, #d6f596); background: #384631; color: #e1edce; font-size: 12px; line-height: 1.6; }
#vault-app .vault-feedback:empty { display: none; }
#vault-app .vault-feedback[data-tone="error"], #vault-app .vault-storage-notice { color: #f4d9af; border-color: var(--vault-amber); background: #453c2d; }
#vault-app .vault-letter { min-height: 371px; display: flex; flex-direction: column; }
#vault-app .vault-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.9; margin: 0 0 25px; min-height: 140px; }
#vault-app .vault-letter-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; padding-top: 17px; border-top: 1px solid #a4ad96; margin-top: auto; }
#vault-app .vault-letter-heading .vault-kicker { color: #68745c; font-size: 9px; }
#vault-app .vault-letter-heading h4 { font-size: 14px; font-weight: 500; margin: 3px 0 0; overflow-wrap: anywhere; }
#vault-app .vault-letter-heading > p { max-width: 130px; text-align: right; font: 10px/1.6 var(--mono, monospace); color: #647059; margin: 0; }
#vault-app .vault-confirm { margin-top: 20px; padding: 18px; background: #483e31; border-left: 2px solid var(--vault-amber); }
#vault-app .vault-confirm h4 { font-size: 15px; margin: 0; }
#vault-app .vault-confirm p { font-size: 12px; line-height: 1.65; color: #e0d0bb; margin: 8px 0 12px; }
#vault-app .vault-confirm > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
#vault-app.vault-is-sealing .vault-core-glass { animation: vault-charge 1.1s ease-out; }
#vault-app.vault-is-sealing .vault-memory-card { animation: vault-store .8s cubic-bezier(.2, .7, .3, 1) both; }
#vault-app.vault-is-sealing .vault-slot-glow { animation: vault-charge 1.1s ease-out; }
@keyframes vault-charge { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.6); } }
@keyframes vault-store { from { transform: translateY(64px) scale(.84); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (hover: hover) {
  #vault-app .vault-new:hover { background: #e1f7b8; }
  #vault-app .vault-slot:hover { border-color: #c0cdaa; }
  #vault-app .vault-primary:hover { background: #c7aafa; }
  #vault-app .vault-secondary:not(:disabled):hover { color: #f3f4e5; border-bottom-color: #a9b498; }
  #vault-app .vault-danger:hover { background: #8c4635; }
}
@media (min-width: 801px) and (max-height: 820px) {
  #vault-app .vault-shell { min-height: 490px; }
  #vault-app .vault-terminal { padding-block: 20px; }
  #vault-app .vault-core { max-width: 250px; }
  #vault-app .vault-readout > p { margin-top: 13px; font-size: 18px; }
  #vault-app .vault-paper { padding-top: 20px; padding-bottom: 12px; }
  #vault-app .vault-paper h3 { margin: 12px 0 16px; font-size: 32px; }
  #vault-app .vault-form-pair { margin-bottom: 13px; }
  #vault-app textarea { min-height: 108px; height: 108px; }
  #vault-app .vault-writing-meta { min-height: 18px; margin-top: 4px; }
  #vault-app .vault-form-actions, #vault-app .vault-stored-actions { margin-top: 16px; }
  #vault-app .vault-honest-note { margin-top: 11px; }
  #vault-app .vault-empty { padding-top: 25px; }
}
@container capp-vault (max-width: 1050px) {
  #vault-app .vault-shell { grid-template-columns: 180px minmax(0, 1fr); }
  #vault-app .vault-sidebar { padding-inline: 14px; }
  #vault-app .vault-terminal { grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); gap: 20px; padding: 25px 22px; }
  #vault-app .vault-machine-top { flex-wrap: wrap; gap: 8px; }
  #vault-app .vault-paper { padding-inline: 22px; }
  #vault-app .vault-date-screen { padding-inline: 10px; }
  #vault-app .vault-date-screen output { font-size: 16px; }
  #vault-app .vault-form-pair { gap: 16px; }
  #vault-app .vault-form-actions, #vault-app .vault-stored-actions { flex-wrap: wrap; gap: 10px 20px; }
  #vault-app .vault-primary { min-width: 160px; }
  #vault-app .vault-local-note { display: block; }
  #vault-app .vault-local-note svg { display: none; }
}
@container capp-vault (max-width: 820px) {
  #vault-app .vault-shell { display: flex; flex-direction: column-reverse; }
  #vault-app .vault-terminal { grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr); padding: 25px; }
  #vault-app .vault-sidebar { border-right: 0; border-top: 1px solid #73816466; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px 20px; padding: 20px 25px; }
  #vault-app .vault-sidebar::after { display: none; }
  #vault-app .vault-rack-heading { padding: 0; justify-content: flex-start; gap: 15px; }
  #vault-app .vault-new { width: auto; padding-inline: 15px; }
  #vault-app .vault-rack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 -4px; max-height: 178px; }
  #vault-app .vault-rack li + li { margin-top: 0; }
  #vault-app .vault-local-note { grid-column: 1 / -1; display: flex; padding: 13px 0 0; font-size: 11px; }
  #vault-app .vault-local-note svg { display: block; }
  #vault-app .vault-local-note br { display: none; }
  #vault-app .vault-empty { grid-column: 1 / -1; padding: 0; }
  #vault-app .vault-empty p { margin: 0; }
  #vault-app .vault-empty p br { display: none; }
  #vault-app .vault-empty-slots { display: none; }
}
@container capp-vault (max-width: 560px) {
  #vault-app .vault-terminal { display: block; padding: 20px; }
  #vault-app .vault-console-head { display: grid; grid-template-columns: 125px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 17px; margin: -6px 0 18px; }
  #vault-app .vault-machine-top { grid-column: 2; grid-row: 1; align-self: end; padding-top: 21px; gap: 7px; }
  #vault-app .vault-core { grid-column: 1; grid-row: 1 / 3; width: 147px; margin: -2px -11px -5px; }
  #vault-app .vault-readout { grid-column: 2; grid-row: 2; padding-top: 12px; align-self: start; }
  #vault-app .vault-readout > p { text-align: left; font-size: 17px; margin-top: 12px; }
  #vault-app .vault-readout > p br { display: none; }
  #vault-app .vault-date-screen { padding: 8px 9px; }
  #vault-app .vault-date-screen output { font-size: 15px; letter-spacing: -1px; }
  #vault-app .vault-date-screen > span { font-size: 8px; letter-spacing: 1px; }
  #vault-app .vault-paper { padding: 22px 20px 15px; }
  #vault-app .vault-paper h3 { font-size: 34px; margin: 17px 0 22px; }
  #vault-app .vault-form-pair { gap: 13px; }
  #vault-app .vault-form label { font-size: 12px; }
  #vault-app input, #vault-app textarea { font-size: 16px; }
  #vault-app input { height: 43px; }
  #vault-app textarea { min-height: 156px; }
  #vault-app .vault-form-actions, #vault-app .vault-stored-actions { gap: 12px; }
  #vault-app .vault-primary { min-width: 0; flex: 1 1 auto; font-size: 12px; gap: 15px; padding-inline: 14px; }
  #vault-app .vault-secondary { font-size: 12px; }
  #vault-app .vault-honest-note { font-size: 12px; }
  #vault-app .vault-sidebar { padding: 20px; }
  #vault-app .vault-rack { grid-template-columns: 1fr; }
  #vault-app .vault-slot { min-height: 65px; }
  #vault-app .vault-slot-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #vault-app .vault-slot strong { max-width: 60%; }
  #vault-app .vault-slot time { margin: 0; text-align: right; }
  #vault-app .vault-message { font-size: 15px; }
  #vault-app .vault-letter { min-height: 340px; }
}
@container capp-vault (max-width: 330px) {
  #vault-app .vault-terminal { padding: 16px; }
  #vault-app .vault-console-head { grid-template-columns: 105px minmax(0, 1fr); gap: 10px; }
  #vault-app .vault-core { width: 128px; }
  #vault-app .vault-machine-top { padding-top: 15px; }
  #vault-app .vault-machine-top .vault-kicker { font-size: 8px; letter-spacing: .2px; }
  #vault-app .vault-date-screen output { font-size: 13px; }
  #vault-app .vault-readout > p { font-size: 16px; margin-top: 10px; }
  #vault-app .vault-paper { padding-inline: 16px; }
  #vault-app .vault-form-pair { grid-template-columns: 1fr; gap: 17px; }
  #vault-app .vault-form-actions, #vault-app .vault-stored-actions { align-items: stretch; flex-direction: column; gap: 5px; }
  #vault-app .vault-delete { margin-left: 0; }
  #vault-app .vault-sidebar { padding-inline: 16px; column-gap: 10px; }
  #vault-app .vault-rack-heading { gap: 8px; }
  #vault-app .vault-rack-heading .vault-kicker { font-size: 9px; letter-spacing: .4px; }
  #vault-app .vault-new { font-size: 12px; padding-inline: 10px; gap: 5px; }
  #vault-app .vault-record-count { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #vault-app *, #vault-app *::before, #vault-app *::after { animation: none !important; transition: none !important; }
}