:root { color-scheme: dark; }
body { margin: 0; min-width: 320px; background: #101719; color: #f3f2ec; font-family: Figtree, Arial, sans-serif; }
.library-entry { width: min(760px, calc(100% - 48px)); min-height: calc(100vh - 93px); margin: 0 auto; padding: clamp(72px, 12vh, 148px) 0 72px; box-sizing: border-box; }
.library-entry-kicker { margin: 0 0 18px; color: #d5b779; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.library-entry h1 { max-width: 700px; margin: 0; color: #f8f5ee; font-family: "Baloo 2", Figtree, sans-serif; font-size: clamp(48px, 8vw, 76px); line-height: .95; letter-spacing: -.045em; }
.library-entry-lead { max-width: 620px; margin: 25px 0 42px; color: #c2ccc7; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; }
.library-entry-form { padding: 28px; background: #182123; border: 1px solid #526853; border-left: 4px solid #d5b779; box-shadow: 8px 8px 0 #080d0e; }
.library-entry-form label { display: block; margin-bottom: 8px; color: #f3f2ec; font-size: 15px; font-weight: 700; }
.library-entry-hint { margin: 0 0 18px; color: #b7c1bc; font-size: 14px; line-height: 1.5; }
.library-entry code { padding: 1px 4px; background: #0d1314; color: #e8cd99; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; }
.library-entry-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.library-entry input { min-width: 0; min-height: 48px; padding: 11px 13px; box-sizing: border-box; color: #f3f2ec; background: #101719; border: 1px solid #788681; border-radius: 0; font: inherit; }
.library-entry input::placeholder { color: #82908a; }
.library-entry input:focus-visible, .library-entry button:focus-visible, .library-entry a:focus-visible { outline: 3px solid #e8cd99; outline-offset: 3px; }
.library-entry button { min-height: 48px; padding: 11px 18px; color: #101719; background: #d5b779; border: 1px solid #e8cd99; border-radius: 0; box-shadow: 3px 3px 0 #0a0e0f; cursor: pointer; font: 700 14px/1 Figtree, Arial, sans-serif; }
.library-entry button:hover { background: #e8cd99; }
.library-entry button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a0e0f; }
.library-entry-status { min-height: 1.35em; margin: 12px 0 0; color: #e8cd99; font-size: 14px; }
.library-entry-status[data-state="error"] { color: #ffb4a8; }
.library-entry-note { margin-top: 28px; padding: 22px 0 0; border-top: 1px solid #526853; }
.library-entry-note h2 { margin: 0 0 7px; color: #f3f2ec; font-family: "Baloo 2", Figtree, sans-serif; font-size: 24px; letter-spacing: -.02em; }
.library-entry-note p, .library-entry-support { color: #b7c1bc; line-height: 1.55; }
.library-entry-note p { max-width: 610px; margin: 0 0 12px; }
.library-entry a { color: #e8cd99; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.library-entry-divider { width: 100%; height: 1px; margin-top: 42px; background: #354143; }
.library-entry-support { margin-top: 20px; font-size: 14px; }
@media (max-width: 620px) { .library-entry { width: min(100% - 32px, 760px); min-height: calc(100vh - 108px); padding-top: 64px; } .library-entry-form { padding: 20px; } .library-entry-controls { grid-template-columns: 1fr; } .library-entry button { width: 100%; } }