:root { color-scheme: light; --ink:#1c201e; --muted:#6b726d; --line:#e4e8e4; --paper:#fff; --soft:#f5f7f4; --accent:#3f70c8; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
a { color:inherit; }
button,input { font:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shell { width:min(1120px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; top:12px; left:12px; z-index:5; padding:11px 15px; background:#fff; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; min-height:44px; }
.brand img { display:block; width:121px; height:auto; }
.nav-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; text-decoration:none; }
.nav-link:hover { color:var(--accent); }
.hero { padding:88px 0 78px; max-width:650px; }
.eyebrow { margin:0 0 16px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(40px,6vw,64px); font-weight:500; line-height:1.05; letter-spacing:-.055em; }
.hero-copy { max-width:42ch; margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.7; }
.section-head,.admin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-head { padding-bottom:15px; border-bottom:1px solid var(--line); }
h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:-.015em; }
.count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:23px; margin-left:6px; padding:0 5px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:10px; font-weight:500; vertical-align:middle; }
.section-note { color:var(--muted); font-size:11px; }
.deck-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding-top:30px; }
.deck-card { min-width:0; }
.deck-link { display:block; height:100%; border:1px solid var(--line); border-radius:9px; overflow:hidden; text-decoration:none; transition:border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease; }
.deck-link:hover { border-color:#b5beb5; transform:translateY(-3px); box-shadow:0 12px 25px rgba(22,31,23,.07); }
.deck-preview { position:relative; aspect-ratio:16/9; background:var(--soft); border-bottom:1px solid var(--line); overflow:hidden; }
.deck-image { display:block; width:100%; height:100%; object-fit:cover; }
.image-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.open-mark { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#fff; font-size:17px; line-height:1; }
.deck-copy { padding:18px 19px 20px; }
.deck-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; }
.deck-tag { padding:4px 7px; border-radius:4px; background:var(--soft); color:#586257; }
.deck-title { margin:16px 0 6px; font-size:18px; font-weight:500; line-height:1.35; letter-spacing:-.025em; overflow-wrap:anywhere; }
.deck-author { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.deck-open { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:23px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; font-weight:600; }
.deck-open span { font-size:17px; font-weight:400; }
.deck-link:hover .deck-open { color:var(--accent); }
.state-message { margin:25px 0 14px; color:var(--muted); font-size:13px; line-height:1.7; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 15px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font-size:12px; cursor:pointer; text-decoration:none; }
.button:hover { background:var(--soft); }
.button.primary { border-color:var(--ink); background:var(--ink); color:#fff; }
.button.primary:hover { border-color:var(--accent); background:var(--accent); }
.quiet-button { margin-bottom:15px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding:28px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }

.viewer-body { background:var(--soft); }
.viewer-header { display:flex; align-items:center; gap:22px; min-height:76px; padding:12px 24px; border-bottom:1px solid var(--line); background:#fff; }
.back-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:12px; text-decoration:none; }
.back-link:hover { color:var(--accent); }
.viewer-header h1 { flex:1; font-size:15px; letter-spacing:-.025em; }
.viewer-main { flex:1; display:flex; flex-direction:column; }
.viewer-state { margin:auto; padding:40px 24px; text-align:center; }
.viewer-main iframe { width:100%; min-height:calc(100svh - 126px); flex:1; border:0; background:#fff; }
.viewer-help { margin:0; padding:14px 24px; color:var(--muted); font-size:11px; text-align:center; }
.viewer-help a { text-underline-offset:3px; }

.admin-page { padding:68px 0 100px; }
.admin-intro { max-width:650px; margin-bottom:58px; }
.auth-panel { width:min(100%,430px); padding:28px; border:1px solid var(--line); border-radius:9px; background:var(--soft); }
.auth-panel h2 { font-size:20px; }
.auth-panel > p:not(.eyebrow) { margin:10px 0 25px; color:var(--muted); font-size:13px; line-height:1.6; }
.admin-toolbar { margin-bottom:20px; }
.admin-toolbar h2 { font-size:18px; }
.editor-panel { margin-bottom:62px; padding:29px; border:1px solid var(--line); border-radius:9px; background:var(--soft); }
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.editor-heading .eyebrow { margin-bottom:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; }
.field { display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:11px; font-weight:600; }
.field.wide { grid-column:1 / -1; }
.field b { color:var(--accent); }
.field input { width:100%; min-height:43px; padding:9px 11px; border:1px solid #d7ded8; border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:400; }
.field input:focus { border-color:var(--accent); outline:2px solid rgba(63,112,200,.18); outline-offset:1px; }
.field small,.check small { color:var(--muted); font-size:10px; line-height:1.5; font-weight:400; }
.thumbnail-preview { display:flex; align-items:center; gap:11px; margin-top:20px; color:var(--muted); font-size:11px; }
.thumbnail-preview img { width:135px; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--line); border-radius:5px; }
.visibility-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; padding-top:23px; border-top:1px solid var(--line); }
fieldset { min-width:0; border:0; margin:0; padding:0; }
legend { margin-bottom:14px; padding:0; font-size:11px; font-weight:700; }
.check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:11px; line-height:1.5; }
.check input { flex:0 0 auto; width:17px; height:17px; accent-color:var(--accent); }
.check span { display:flex; flex-direction:column; gap:4px; }
.expiry { margin-top:19px; }
.form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-top:28px; }
.form-message,.card-message { min-height:18px; margin:0; color:var(--muted); font-size:11px; }
.form-message[data-error="true"],.card-message[data-error="true"] { color:#a14e4e; }
.text-button { display:inline-flex; align-items:center; min-height:32px; padding:0; border:0; background:transparent; color:var(--ink); font-size:11px; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; cursor:pointer; }
.text-button:hover { color:var(--accent); text-decoration-color:currentColor; }
.text-button.danger { color:#9a514f; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.admin-card { display:grid; grid-template-columns:180px minmax(0,1fr); min-width:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.admin-image { display:block; width:100%; height:100%; min-height:145px; object-fit:cover; background:var(--soft); }
.admin-card-body { min-width:0; padding:18px; }
.admin-card-body .deck-title { margin:12px 0 6px; font-size:16px; }
.admin-card-body .deck-author { font-size:11px; }
.admin-actions { display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:19px; padding-top:12px; border-top:1px solid var(--line); }

@media (max-width:1000px) { .deck-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .shell { width:calc(100% - 40px); }
  .site-header { min-height:86px; }
  .brand img { width:108px; }
  .hero { padding:56px 0 50px; }
  .hero-copy { font-size:15px; }
  .section-note { display:none; }
  .deck-grid,.form-grid,.visibility-grid,.admin-grid { grid-template-columns:minmax(0,1fr); }
  .site-footer { align-items:flex-start; flex-direction:column; gap:6px; }
  .viewer-header { gap:10px; flex-wrap:wrap; padding:12px 20px; }
  .viewer-header h1 { flex-basis:calc(100% - 90px); }
  .viewer-link { margin-left:auto; }
  .viewer-main iframe { min-height:65svh; }
  .admin-page { padding:48px 0 65px; }
  .editor-panel { padding:20px; }
  .admin-card { grid-template-columns:1fr; }
  .admin-image { height:auto; min-height:0; aspect-ratio:16/9; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }