/* The collector's edition. One binding, quiet paper, and room for our memories. */
:root{--bg:#111824;--cream:#f4efe3;--gold:#c7ae76;--paper:#f2efe3;--ink:#28332d;--muted:#acb4bc}
body{background:var(--bg)}
.ambient{background:radial-gradient(ellipse at 18% 0,#2c405249,transparent 55%),radial-gradient(ellipse at 90% 95%,#3b4a4526,transparent 60%),linear-gradient(145deg,#182131,#111824 55%,#101822)}
.ambient::after{opacity:.23}
.topbar{max-width:1320px;height:86px;padding-inline:44px;border-color:#c4ad7924}
.brand{font-size:30px;letter-spacing:4px}
.brand small{font-size:10px;letter-spacing:2px}
.top-caption{display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:1.5px;color:#adb7be}
.top-caption i{width:27px;height:1px;background:#c7ae7666}
#album-screen{max-width:1260px;padding:34px 42px 0}
.album-heading{margin-bottom:25px;align-items:end}
.album-heading .eyebrow{font-size:12px;letter-spacing:1.7px;margin-bottom:12px;color:#b6a47e}
.album-heading .eyebrow>span{margin-inline:8px;color:#718189}
.album-heading h1{font-size:34px;letter-spacing:3px;line-height:1.4;font-weight:500}
.heading-star{font-size:22px;color:#cbb889}
.editor-topbar{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:15px;min-height:64px;padding:10px 20px 10px 28px;background:#1b2435f5;border-bottom:1px solid #c7ae762e;color:#e7decb;backdrop-filter:blur(16px)}
.editor-topbar>span{font-size:16px;font-family:var(--serif);letter-spacing:2px}
.editor-topbar small{margin-left:auto;font:12px var(--mono);letter-spacing:1px;color:#a99c81}
.editor-topbar .dialog-close{position:static;flex-shrink:0;width:44px;height:44px;border:1px solid #c7ae7638;border-radius:50%;background:#ffffff04;color:#e7decb}

/* Cover and binding. */
.topbar>.quiet-button{font-size:14px;min-height:44px;padding:9px 18px;border-color:#c7ae7640;background:#ffffff03}
.entry{max-width:1150px;gap:110px;padding:58px 55px 64px;grid-template-columns:1.1fr 1fr}
.cover-stage{padding-block:30px}
.cover-orbit{border-color:#cab5881a;background:radial-gradient(circle,#c7ae7610,transparent 69%)}
.cover-orbit::before{border-color:#cab58810}
.cover-orbit::after{border-color:#cab58815}
.cover-display{max-width:335px;transform:perspective(1500px) rotateY(-12deg) rotateZ(-5deg);filter:drop-shadow(22px 34px 28px #0007)}
.cover-stage:hover .cover-display{transform:perspective(1500px) rotateY(-6deg) rotateZ(-3deg) translateY(-3px)}
.cover-art{border-color:#7a879459}
.cover-caption{font-size:12px;letter-spacing:1.6px;color:#a7adb0;margin-top:45px}
.entry-copy>.eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:22px}
.entry h1{font-size:clamp(36px,4vw,52px);line-height:1.4;letter-spacing:3px;margin-bottom:23px}
.entry h1 span{color:#e1cba0}
.entry-description{font-size:16px;line-height:1.9;color:#bac1c7;letter-spacing:1px;margin-bottom:30px}
.entry label{font-size:14px;color:#d2c9b6}
.password-wrap{min-height:56px;border-color:#b2b6b33b;border-radius:5px;background:#080d171f}
.password-wrap input{font-size:16px;letter-spacing:.5px}
.password-wrap input::placeholder{font-size:14px;color:#939caa}
.password-wrap button{font-size:14px;color:#c6c6c0;min-width:64px}
.primary{min-height:48px;border:1px solid #d2bf94;border-radius:5px;background:linear-gradient(110deg,#e2d3b0,#c6b17e);color:#283028;box-shadow:inset 0 1px 0 #ffffff4d,0 3px 10px #0002}
.primary:hover:not(:disabled){background:linear-gradient(110deg,#ecddbc,#d1bf90);box-shadow:0 4px 16px #0002}
.entry .primary{min-height:55px;font-size:16px;letter-spacing:1px}
.private-note{font-size:13px;color:#a4aeb7;line-height:1.9}
.site-footer{max-width:1176px;padding:26px 0 30px;margin-top:34px;font-size:12px;letter-spacing:1.4px;border-color:#c7ae761e;color:#98a5ac}

/* Quiet controls above an open, full-size handbook. */
.collection-meta{min-width:168px;padding:0 0 3px 22px;border-left:1px solid #c7ae7640}
.collection-numbers{font-size:15px;gap:10px;color:#abb4b8}
.collection-numbers>span:first-child{font-size:42px;color:#f2ecdc;line-height:1}
.collection-numbers small{font-family:var(--sans);font-size:12px;letter-spacing:.3px;color:#bbc0bd;margin-top:7px}
.collection-track{height:2px;background:#c7ae7624;margin-top:13px}
.collection-track i{background:linear-gradient(90deg,#a8905d,#e0c996)}
.album-toolbar{align-items:end;gap:20px;margin-bottom:0;padding:0 12px}
.view-tabs{gap:7px;border:0;background:transparent;padding:0;border-radius:0}
.view-tabs button{min-height:52px;padding:12px 24px;font-size:15px;letter-spacing:.5px;border:1px solid #a1acb331;border-bottom:0;border-radius:5px 5px 0 0;background:#1a2637;color:#aeb9c1}
.view-tabs button[aria-selected=true]{background:linear-gradient(125deg,#ded7bf,#d1c6a6);color:#344037;border-color:#e4d8b5;box-shadow:inset 0 1px 0 #fff6}
.view-tabs button:hover:not([aria-selected=true]){background:#283549;color:#e8e3d4}
.view-tabs span{font-size:12px;letter-spacing:.3px;opacity:.72;margin-left:12px}
.sync-tools{gap:10px;margin-bottom:7px}
.sync-status{font-size:13px;color:#b8c8bb}
.icon-button{width:42px;height:42px;border-color:#acbcb137;font-size:23px}
.sync-tools .quiet-button{font-size:14px;min-height:42px;padding-inline:15px;border-left-color:#b7c1b52e}
.book{border:10px solid #263650;border-top-width:10px;gap:20px;border-radius:5px 7px 6px 5px;background:#203049;box-shadow:0 0 0 1px #84928c4d,0 3px 0 #142334,0 6px 0 #c4c4b2,0 9px 0 #838b7d,0 12px 0 #e0dfcd,0 18px 0 #263650,0 34px 50px -22px #000b,0 70px 110px -60px #0008}
.book-underlay{inset:-5px;box-shadow:inset 0 0 0 1px #cdb7852b}
.page{padding:27px 27px 21px;background-color:#f2efe3;background-image:var(--grain),linear-gradient(105deg,#e6e0cd14,#ffffff24);min-height:0}
.page-left{box-shadow:inset -25px 0 30px -26px #3b40349c,inset 1px 0 0 #fffaf0,inset 0 0 24px #a48b5214}
.page-right{box-shadow:inset 25px 0 30px -26px #3b40349c,inset -1px 0 0 #fffaf0,inset 0 0 24px #a48b5214}
.page-topline{font-size:12px;letter-spacing:1.1px;color:#747c6c;margin-bottom:22px;padding-bottom:13px;border-color:#98988042;gap:10px;flex-wrap:wrap}
.page-topline strong{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1px;color:#737660}
.page-bottomline{font-size:12px;letter-spacing:2px;color:#7e826a;padding-top:20px}
.book-spine{left:calc(50% - 13px);width:26px;background:linear-gradient(90deg,#0d172588,#9ba99c3b 18%,#0d1725a1 47%,#a4aea17a 80%,#0d172544)}
.book-spine i{width:43px;height:9px;left:-8px;border:1px solid #57675b80;border-radius:50%;background:linear-gradient(#54615a,#acb8aa 20%,#f2f1d9 41%,#bac5ad 56%,#566954 85%,#1e3329);box-shadow:0 3px 3px #0a15197a,inset 0 0 1px #fff9}
.card-grid{max-width:460px;gap:26px 20px;align-items:start;padding:5px 3px 0}
.pocket.empty{background-color:#18251e;background-image:linear-gradient(115deg,#879c751a,transparent 34%,#080e0a33 72%),var(--grain);box-shadow:inset 0 0 0 1px #475b3b4d}
.pocket.empty::before{background:linear-gradient(#c7cfa26e 0 24%,transparent 24% 76%,#c7cfa26e 76% 100%)}
.pocket-line{background:#c7cfa263}
.pocket-number{font-size:clamp(23px,2.1vw,30px);letter-spacing:2px;color:#e6e8cc}
.pocket-number span{background:#1b281e;padding-inline:8px}
.pocket-add{font-size:12px;letter-spacing:.4px;opacity:.72;color:#d1d6b7;bottom:18%}
.pocket.empty:hover .pocket-add{opacity:1}
.pocket.empty:hover{background-color:#2b3b28;transform:translateY(-2px)}

/* The sleeve belongs to the page; editing no longer covers the card title. */
.gi-slot{margin-bottom:44px}
.card-grid>.pocket.empty{margin-bottom:44px}
.gi-slot::before{content:'';position:absolute;inset:-5px;border:1px solid #929d8561;border-radius:3px;background:linear-gradient(128deg,#ffffff42,transparent 36%,#ffffff17);box-shadow:inset 0 0 0 1px #fffc,0 2px 5px #4d533519;pointer-events:none;z-index:-1}
.gi-card-face{border-radius:2px;border-color:#64745361;box-shadow:0 2px 3px #20291b33}
.memory-card{padding:4.7%;background:#182119;box-shadow:inset 0 0 0 1px #73875a80}
.card-header{background-color:#ececcf;border-color:#c0c7a2;min-height:17px;box-shadow:inset 0 0 0 1px #7786603b}
.card-header .name{font-size:7.2cqw;font-weight:600}
.card-photo{height:44%;border-color:#e4e5ca;margin-block:3.7%;box-shadow:0 0 0 1px #4c573b}
.card-description-wrap{padding:3.8%;background-image:var(--grain),linear-gradient(115deg,#fff3,transparent 42%,#15221950);background-size:65px 65px,100% 100%}
.card-description{padding:4%;background-color:#f6f2e5;border-color:#1d291c;background-image:var(--grain);box-shadow:none}
.pocket .card-note-text{font-size:clamp(13px,9.5cqw,17px);line-height:1.5;color:#303b2b;-webkit-line-clamp:2}
.pocket .card-date{font-family:var(--mono);font-size:10px;color:#626e55;letter-spacing:0;margin-top:3px}
.card-edit-button{position:absolute;top:auto;right:0;bottom:-43px;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:38px;min-height:38px;padding:7px 10px;border:1px solid #73816038;border-radius:4px;background:#ece9d956;color:#5a684b;box-shadow:none;font-family:var(--sans);font-size:13px;letter-spacing:.5px}
.card-edit-button span{pointer-events:none}
.card-edit-button svg{width:15px;height:15px;flex-shrink:0}
.card-edit-button:hover{transform:none;background:#e5e5d0;border-color:#71846366;color:#30412a}
.card-edit-button::before{display:none}
.origin-page{padding:40px 0 27px;justify-content:center}
.origin-page>.gi-slot,.origin-page>.pocket{width:190px;max-width:100%}
.origin-page>.gi-slot{margin-bottom:44px}
.origin-page .origin-index{font-size:12px;letter-spacing:1.6px;color:#889173;margin-bottom:26px}
.origin-page h2{font-size:27px;font-weight:500;color:#47533d;letter-spacing:3px;margin:27px 0 12px}
.origin-page p{font-size:16px;line-height:1.9;color:#7d846b;letter-spacing:.5px}
.origin-watermark{width:128px;height:128px;border-color:#8b99782e;transform:translate(-50%,-122%)}
.page-controls{max-width:600px;margin:38px auto 0;gap:24px;padding:12px 18px;border:1px solid #c7ae762e;background:#1a24328f;border-radius:6px}
.page-arrow{min-height:46px;min-width:115px;padding:8px 14px;border-color:#b9c3b42d;border-radius:4px;font-size:23px;gap:13px;color:#d6d7c9}
.page-arrow span{font-size:14px}
.page-center>span{font-size:13px;letter-spacing:2px;color:#e3dbc6}
.page-dots{gap:5px;margin-top:4px}
.page-dots button{width:19px;height:21px}
.page-dots button::after{top:8px;left:7px;width:4px;height:4px}
.album-hint{font-size:14px;line-height:1.9;letter-spacing:.5px;color:#b4c0b7;margin:24px 0 12px}
.album-hint span{display:block;margin:4px 0 0;font-size:13px;color:#929fa6}

/* A writing desk inside the book: full-size card, clear fields, fixed close control. */
.card-dialog{width:min(980px,calc(100% - 48px));max-height:calc(100dvh - 44px);border-color:#c7ae7652;border-radius:12px;background:#1b2434ef;box-shadow:0 35px 100px #0009}
.card-dialog::backdrop,.confirm-dialog::backdrop,.cover-dialog::backdrop{background:#0a111ad9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.editor-layout{grid-template-columns:44% 56%}
.editor-preview{padding:32px 38px;min-height:0;justify-content:flex-start;background-color:#14212d;background-image:radial-gradient(ellipse at 50% 27%,#69735323,transparent 65%),var(--grain);border-right-color:#c7ae762a}
.editor-preview::before{display:none}
.editor-preview>.eyebrow{font-size:12px;letter-spacing:2px;color:#b3aa8b;margin:0 0 5px}
.editor-preview>.eyebrow br{display:none}
.large-card{width:100%;max-width:330px;transform:none;margin:19px auto 20px;filter:drop-shadow(5px 12px 9px #0004)}
.large-card:has(.preview-card.is-flipped){transform:none;aspect-ratio:auto}
.large-card .card-note-text{font-size:clamp(18px,6.5cqw,22px);line-height:1.65}
.large-card .card-header .name{font-size:6.6cqw}
.large-card .card-date{font-size:12px}
.preview-flip-button{min-height:46px;padding:10px 21px;font-size:14px;letter-spacing:.5px;color:#d9c69b;border-color:#c7ae7659;background:#c7ae760a;border-radius:5px}
.preview-caption{font-size:14px;line-height:1.8;letter-spacing:1px;color:#95a69d;margin-top:18px}
.preview-card.is-flipped .gi-card-back{padding:22px;background-color:#f3edda;min-height:390px}
.preview-card .card-back-content{min-height:344px}
.preview-card .back-index{font-size:12px;letter-spacing:.4px}
.preview-card .card-back-content h3{font-size:26px;font-weight:600;margin:16px 0 24px;line-height:1.5}
.preview-card .back-abilities{overflow:visible;min-height:auto}
.preview-card .back-abilities strong{font-size:14px;color:#88713b;letter-spacing:.5px}
.preview-card .back-abilities p{font-size:18px;color:#414936;line-height:1.8}
.preview-card .back-abilities .handwritten{font-size:21px;line-height:1.7}
.preview-card .back-limit{gap:9px;padding-top:12px;margin-top:23px}
.preview-card .back-limit b,.preview-card .back-limit small{font-size:12px;letter-spacing:0}
.back-edit-link{min-height:44px;font-size:14px;padding:8px 12px;color:#7b6435;border-color:#b7a47580}
.editor-form{background-color:#1b2434b3;padding:28px 35px 24px}
.editor-form>.eyebrow{font-size:12px;letter-spacing:1px;color:#bfae89}
.editor-form h2{font-size:28px;letter-spacing:2px;margin:10px 0 26px;color:#ece6d8;font-weight:500}
.editor-form label{font-size:15px;line-height:1.6;color:#d4d7d3}
.editor-form input:not([type=file]):not([type=range]),.editor-form textarea,.editor-form select{min-height:48px;font-size:16px;padding:11px 12px;background:#111c29;border:1px solid #a0aca63b;border-radius:5px;color:#edf0df;box-shadow:inset 0 1px 3px #0001}
.editor-form input:focus,.editor-form textarea:focus,.editor-form select:focus{background:#162431;border-color:#cbbd91;outline:2px solid #cbbd9124;outline-offset:1px}
.editor-form input::placeholder,.editor-form textarea::placeholder{color:#86939c}
.editor-form select option{background:#182536;color:#f0eddf}
.editor-form #card-note{font-family:var(--hand);font-size:21px;line-height:1.85;min-height:145px;background-color:#162532}
.editor-form .photo-upload{font-size:15px;padding:17px;min-height:82px;border-radius:6px;border-color:#b9b18566;background:#c5b57807;color:#ddd0af}
.photo-upload small{font-size:12px;line-height:1.6;color:#a2aba9}
.upload-icon{width:34px;height:34px;font-size:23px;border-color:#b9b18552;color:#c3b185}
.photo-options label,.photo-options button{font-size:12px;line-height:1.6;color:#b1b9ad;min-height:36px}
.character-count{font-size:12px;color:#a1ada5}
.form-row{margin-block:21px;gap:17px}
.ability-fields{background:#c1b58704;border-color:#b9b18530;border-radius:6px;margin:22px 0}
.ability-heading{padding:15px 15px;font-size:15px;color:#d7c7a4}
.ability-heading small{font-size:12px;color:#adb5b4}
.ability-inputs{padding:17px 15px 12px;border-color:#b9b18525}
.ability-inputs>p{font-size:12px;color:#a5afab;line-height:1.8}
.editor-form .ability-inputs textarea{min-height:105px;font-size:16px;line-height:1.8}
.author-label{margin-top:21px}
.editor-actions{background:linear-gradient(#1b2434ef,#1b2434 30%);bottom:-24px;padding:15px 0 10px;margin-inline:0;border-color:#b9b18520;gap:18px;z-index:5}
.editor-actions .primary{min-height:50px;font-size:15px;letter-spacing:.5px}
.editor-actions .text-button{font-size:14px;min-height:44px;color:#cdab9e}
.save-footnote{font-size:12px;line-height:1.8;color:#a2afab;margin-top:9px}
.editor-form .form-message{font-size:14px;line-height:1.7;color:#e5c39b}
.confirm-dialog{background:#1b2434f5;border-color:#c7ae7652;border-radius:10px;color:#efe8d6}
.confirm-dialog p{font-size:16px;color:#c4ccc8}
.confirm-dialog h2{font-size:25px}
.confirm-dialog .secondary{min-height:48px;font-size:15px;color:#c9d0c1;border-color:#b6c0a950}
.toast{background:#e5e7d4;border-color:#c1c6a8;color:#334532;font-size:15px;border-radius:5px}
.console-page{background-color:#3b5768;background-image:var(--grain),linear-gradient(135deg,#70888320,transparent)}
.console-screen{border-color:#c0c6b4;background-color:#142222;gap:23px}
.console-screen p:first-of-type{font-size:22px;letter-spacing:2px}
.console-screen p:last-of-type{font-size:12px;letter-spacing:1px}
.console-controls>.gi-slot{margin-top:12px}
.console-page .card-edit-button{background:#1a39453d;border-color:#c0c6b447;color:#e4dec1}
.console-page .card-edit-button:hover{background:#263f49;color:#fff4cf}

/* Give a tablet one generous book page instead of six narrow card columns. */
@media(min-width:701px) and (max-width:960px){
  #album-screen{max-width:800px;padding-inline:32px}
  .book{display:flex;flex-direction:column;gap:0;border-width:8px}
  .page{padding:28px 33px 24px}
  .page-left{box-shadow:inset 0 -18px 24px -22px #33412b66}
  .page-right{border-top:1px solid #8f99744d;box-shadow:inset 0 18px 24px -22px #33412b66}
  .book-spine{display:none}
  .card-grid{max-width:590px;gap:25px 24px}
  .origin-page{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:40px;text-align:left;align-content:center;min-height:320px;padding:14px 20px 27px}
  .origin-page>.gi-slot,.origin-page>.pocket{grid-area:1/1/4/2;width:175px;justify-self:center}
  .origin-page .origin-index{grid-area:1/2;align-self:end;margin:0 0 10px;font-size:12px}
  .origin-page h2{grid-area:2/2;align-self:center;margin:8px 0 14px;font-size:27px}
  .origin-page p{grid-area:3/2;align-self:start;font-size:16px}
  .origin-watermark{display:none}
  .page-left:has(.origin-page) .page-bottomline{display:none}
  .page-controls{position:sticky;bottom:12px;z-index:4;background:#182331f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .console-screen{max-width:440px;width:100%;margin:auto}
  .console-controls{max-width:470px;width:100%;margin-inline:auto;min-height:220px}
  .editor-form{padding-inline:27px}
  .editor-preview{padding-inline:26px}
}
@media(max-width:960px){
  .topbar{padding-inline:30px}
  .top-caption{font-size:10px;gap:12px;letter-spacing:1px}
  .entry{gap:65px;padding-inline:40px}
  .cover-display{max-width:280px}
  .entry h1{font-size:40px}
  .view-tabs button{padding-inline:18px}
  .view-tabs span{display:none}
}
@media(max-width:700px){
  .topbar{height:76px;padding:0 22px;gap:15px}
  .brand{font-size:28px;gap:12px;letter-spacing:3px}
  .brand small{font-size:9px;letter-spacing:1.4px}
  .top-caption{display:none}
  .topbar>.quiet-button{min-height:42px;padding:8px 13px;font-size:14px}
  .entry{padding:25px 27px 30px;max-width:480px;gap:23px}
  .cover-stage{padding:15px 0 0}
  .cover-display{max-width:187px}
  .cover-caption{font-size:11px;margin-top:30px;letter-spacing:1px;gap:12px}
  .cover-caption i{width:25px}
  .entry-copy>.eyebrow{font-size:12px;letter-spacing:1.5px;margin-bottom:15px}
  .entry h1{font-size:36px;line-height:1.4;letter-spacing:2px;margin-bottom:18px}
  .entry-description{font-size:16px;line-height:1.8;letter-spacing:.5px;margin-bottom:28px}
  .entry-description br{display:none}
  .entry .primary{font-size:15px}
  .private-note{font-size:12px;line-height:1.8}
  #album-screen{padding:26px 14px 0}
  .album-heading{padding-inline:5px;gap:14px;margin-bottom:20px;align-items:center}
  .album-heading .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:9px}
  .album-heading .eyebrow>span{margin-inline:3px}
  .album-heading h1{font-size:25px;letter-spacing:1px;line-height:1.5}
  .collection-meta{min-width:91px;padding-left:12px;border-color:#c7ae7633}
  .collection-numbers{gap:5px;font-size:12px}
  .collection-numbers>span:first-child{font-size:31px}
  .collection-numbers small{font-size:10px;letter-spacing:0;margin-top:5px}
  .collection-track{margin-top:10px}
  .album-toolbar{display:flex;flex-wrap:wrap;row-gap:14px;padding:0 5px;margin-bottom:0}
  .view-tabs{width:100%;gap:6px}
  .view-tabs button{flex:1;min-height:49px;padding:12px 15px;font-size:15px;white-space:nowrap}
  .view-tabs span{display:inline;font-size:10px;margin-left:8px;letter-spacing:0}
  .sync-tools{order:-1;width:100%;gap:8px;margin-bottom:0}
  .sync-status{font-size:12px;margin-right:auto}
  .sync-tools .quiet-button{font-size:14px;padding-inline:14px;min-height:42px}
  .icon-button{width:42px;height:42px}
  .book{display:flex;flex-direction:column;gap:0;border-width:6px;border-radius:4px;box-shadow:0 0 0 1px #83948761,0 4px 0 #cccab6,0 7px 0 #8a927e,0 11px 0 #263650,0 22px 35px -14px #000b;scroll-margin-top:14px}
  .page{padding:23px 19px 21px;min-height:0}
  .page-left{box-shadow:inset 0 -15px 22px -23px #31412b88}
  .page-right{box-shadow:inset 0 15px 22px -23px #31412b88;border-top:1px solid #8f99745c}
  .book-spine{display:none}
  .page-topline{font-size:11px;letter-spacing:.4px;margin-bottom:22px;padding-bottom:12px;gap:7px}
  .page-topline strong{font-size:12px;letter-spacing:.3px}
  .page-bottomline{font-size:12px;padding-top:18px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:460px;gap:24px 20px;padding:4px 2px 0}
  .pocket-number{font-size:28px;letter-spacing:2px}
  .pocket-add{font-size:12px;opacity:.8;letter-spacing:0}
  .gi-slot{margin-bottom:44px}
  .gi-slot::before{inset:-4px}
  .card-header{min-height:18px;font-size:11px}
  .card-header .name{font-size:clamp(11px,8.1cqw,15px)}
  .card-header>span:last-child{font-size:10px}
  .card-photo{height:41%;margin:3.5% 0}
  .pocket .card-note-text{font-size:clamp(14px,10.7cqw,19px);line-height:1.5;-webkit-line-clamp:2}
  .pocket .card-date{font-size:10px;margin-top:2px;letter-spacing:0}
  .card-edit-button{position:absolute;right:0;top:auto;bottom:-43px;width:100%;height:39px;min-height:39px;font-size:14px;gap:7px;padding:8px 6px}
  .card-edit-button svg{width:15px;height:15px}
  .origin-page{display:grid;grid-template-columns:minmax(125px,1fr) 1fr;grid-template-rows:26px auto auto;column-gap:20px;min-height:250px;padding:12px 0 28px;align-content:center;text-align:left}
  .origin-page>.gi-slot,.origin-page>.pocket{grid-area:1/1/4/2;justify-self:center;width:155px;max-width:100%}
  .origin-page .origin-index{grid-area:1/2;font-size:11px;letter-spacing:.3px;margin:0;align-self:end;line-height:1.5}
  .origin-page h2{grid-area:2/2;font-size:22px;letter-spacing:1px;margin:10px 0 12px;align-self:center;line-height:1.4}
  .origin-page p{grid-area:3/2;font-size:15px;line-height:1.85;color:#737d61;align-self:start}
  .origin-watermark{display:none}
  .page-left:has(.origin-page){padding-bottom:12px}
  .page-left:has(.origin-page) .page-bottomline{display:none}
  .gi-slot .back-index{font-size:10px;letter-spacing:0}
  .gi-slot .card-back-content h3{font-size:15px;line-height:1.3;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0}
  .gi-slot .back-abilities strong{font-size:11px;line-height:1.3;margin-bottom:3px}
  .gi-slot .back-abilities p{font-size:13px;line-height:1.5;-webkit-line-clamp:2}
  .gi-slot .back-acquisition p{-webkit-line-clamp:1}
  .gi-slot .back-limit b{font-size:9px}
  .gi-slot .back-limit small{display:none}
  .page-controls{position:sticky;bottom:10px;z-index:4;max-width:none;margin:27px 0 0;padding:10px 9px;gap:9px;background:#1a2633f2;border-color:#b6b39545;border-radius:5px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .page-arrow{min-height:45px;min-width:82px;gap:8px;padding:8px;font-size:21px}
  .page-arrow span{font-size:13px}
  .page-center>span{font-size:12px;letter-spacing:1.4px}
  .page-dots{gap:2px;margin-top:3px}
  .page-dots button{width:14px;height:16px}
  .page-dots button::after{top:6px;left:5px;width:3px;height:3px}
  .album-hint{font-size:14px;letter-spacing:0;line-height:1.85;margin:23px 0 13px;padding-inline:6px}
  .album-hint span{font-size:12px;line-height:1.8;margin-top:6px}
  .site-footer{margin:27px 22px 0;padding:21px 0 27px;font-size:11px;letter-spacing:1px}
  .card-dialog{width:calc(100% - 18px);max-height:calc(100dvh - 18px);border-radius:10px}
  .editor-topbar{min-height:59px;padding:8px 10px 8px 20px;gap:9px}
  .editor-topbar>span{font-size:15px;letter-spacing:1px}
  .editor-topbar small{font-size:10px;letter-spacing:.5px}
  .editor-topbar .dialog-close{width:42px;height:42px}
  .editor-layout{display:flex;flex-direction:column}
  .editor-preview,.editor-preview:has(.preview-card.is-flipped){display:flex;flex-direction:column;padding:24px 26px 27px;gap:0;border-right:0;border-bottom:1px solid #c7ae7626}
  .editor-preview>.eyebrow{font-size:11px;margin:0 0 15px;align-self:center;text-align:center}
  .editor-preview>.eyebrow br{display:none}
  .large-card,.editor-preview:has(.preview-card.is-flipped) .large-card{width:min(290px,100%);max-width:none;margin:0 auto 19px;transform:none}
  .preview-controls{align-self:center;text-align:center}
  .preview-caption{display:none}
  .preview-flip-button{font-size:14px;min-height:46px}
  .preview-card.is-flipped .gi-card-back{padding:19px;min-height:370px}
  .preview-card .card-back-content{min-height:332px}
  .preview-card .card-back-content h3{font-size:25px;margin:13px 0 20px}
  .preview-card .back-abilities .handwritten{font-size:21px}
  .preview-card .back-limit b,.preview-card .back-limit small{font-size:11px}
  .editor-form{padding:27px 22px 20px}
  .editor-form h2{font-size:27px;margin-bottom:25px}
  .editor-form>.eyebrow{font-size:11px;letter-spacing:.7px}
  .editor-form label{font-size:15px}
  .editor-form input:not([type=file]):not([type=range]),.editor-form textarea,.editor-form select{font-size:16px;min-height:49px}
  .editor-form #card-note{font-size:21px;min-height:151px}
  .form-row{gap:13px;margin-block:22px}
  .form-row .wide{flex:2.2}
  .editor-form .photo-upload{font-size:15px;padding:15px;gap:12px}
  .photo-upload small{font-size:12px}
  .ability-heading{padding:15px 13px}
  .ability-heading small{font-size:12px}
  .ability-inputs{padding-inline:13px}
  .editor-actions{bottom:-20px;padding-top:13px;margin-top:18px;gap:14px}
  .editor-actions .primary{min-height:52px;font-size:15px;gap:10px;padding-inline:12px}
  .editor-actions .text-button{font-size:14px;min-width:65px}
  .save-footnote{font-size:12px;text-align:center;margin-top:10px}
  .console-screen{gap:22px;padding:25px;aspect-ratio:1.12}
  .console-screen p:first-of-type{font-size:21px}
  .console-screen p:last-of-type{font-size:11px;letter-spacing:.5px}
  .console-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 10px}
  .console-controls>.gi-slot,.console-controls>.pocket{grid-row:1;grid-column:1/-1;width:min(190px,75%);justify-self:center}
  .console-controls .dpad,.console-speaker{justify-self:center}
  .console-speaker{width:66px}
  .toast{font-size:14px;bottom:90px}
}
@media(max-width:380px){
  .topbar{padding-inline:18px}
  #album-screen{padding-inline:10px}
  .album-heading{gap:10px;padding-inline:4px}
  .album-heading h1{font-size:22px}
  .album-heading .eyebrow{font-size:9px;letter-spacing:.4px}
  .collection-meta{min-width:83px;padding-left:9px}
  .collection-numbers>span:first-child{font-size:28px}
  .view-tabs button{font-size:14px;padding-inline:9px}
  .view-tabs span{font-size:9px;margin-left:6px}
  .page{padding-inline:13px}
  .card-grid{gap:23px 16px}
  .page-topline{font-size:10px;letter-spacing:0}
  .page-topline strong{font-size:11px}
  .origin-page{grid-template-columns:minmax(112px,1fr) 1fr;column-gap:15px}
  .origin-page>.gi-slot,.origin-page>.pocket{width:134px}
  .origin-page h2{font-size:20px}
  .origin-page p{font-size:14px}
  .origin-page .origin-index{font-size:10px}
  .page-controls{gap:6px;padding-inline:7px}
  .page-arrow{min-width:74px;padding-inline:7px}
  .page-arrow span{font-size:12px}
  .page-dots{gap:1px}
  .editor-topbar{padding-left:16px}
  .editor-topbar small{font-size:9px}
  .editor-preview,.editor-preview:has(.preview-card.is-flipped){padding-inline:18px}
  .editor-form{padding-inline:18px}
  .form-row{gap:11px}
  .ability-heading{flex-direction:column;align-items:start;gap:5px}
  .editor-actions .primary{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.gi-card,.cover-display,.page{transition:none!important;animation:none!important}}