@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Outfit:wght@400;500;600;700&display=swap";:root{font-family:Outfit,sans-serif;color:#223135;background:#f4f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#f4f1e9}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(100%,620px);min-height:100svh;margin:auto;background:#f4f1e9;padding-bottom:96px;overflow:hidden}.loading-screen{display:grid;place-items:center;color:#617071;font:500 12px DM Mono;text-transform:uppercase;letter-spacing:.07em}.welcome-screen{min-height:100svh;padding:42px 28px;display:flex;flex-direction:column;justify-content:space-between}.welcome-screen .wordmark{display:block;margin:0 0 110px}.welcome-screen h1{margin-bottom:22px}.welcome-screen p:not(.wordmark){max-width:330px;color:#617071;line-height:1.5}.google-button{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;padding:17px;border:1px solid #b9b9b2;color:#223135;background:#f4f1e9;font-weight:600}.google-button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:#4285f4;font-weight:700}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:17px 24px}.wordmark{border:0;padding:0;font:600 14px/11px DM Mono,monospace;letter-spacing:.08em;text-align:left;color:#223135;background:none}.wordmark em{color:#e56f31;font-style:normal}.icon-button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #c9c6bd;background:transparent;border-radius:50%;color:#223135}.page{padding:25px 24px 35px}.eyebrow,.section-kicker{display:flex;gap:7px;align-items:center;text-transform:uppercase;font:500 11px/1.2 DM Mono,monospace;letter-spacing:.075em;color:#617071}.eyebrow{margin:0 0 25px}.section-kicker{margin:0 0 12px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Fraunces,serif;letter-spacing:0}h1{font-size:clamp(42px,10vw,58px);line-height:.97;font-weight:600;margin:0}h1 i{color:#e56f31;font-style:italic;font-weight:500}.intro{margin-bottom:44px}.intro p{margin:20px 0 0;max-width:310px;color:#617071;line-height:1.5}.feature{position:relative;background:#dfe5dc;padding:25px;min-height:280px;border-radius:4px;overflow:hidden}.feature:after{content:"";position:absolute;width:190px;height:190px;right:-42px;bottom:-56px;background:var(--genre, #e56f31);opacity:.85;border-radius:50%}.feature h2{position:relative;z-index:1;font-size:34px;line-height:1.02;margin:35px 0 8px;max-width:320px}.feature .byline{position:relative;z-index:1;color:#536560}.genre-dot{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--genre);color:#fff9eb;font:500 14px DM Mono}.line-button,.text-button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:#223135;font-weight:600;text-decoration:underline;text-underline-offset:4px}.primary-button{border:0;background:#223135;color:#f6f2e9;padding:14px 18px;display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;font:600 12px DM Mono;letter-spacing:.04em}.primary-button:disabled{opacity:.4;cursor:not-allowed}.feature .primary-button{position:absolute;z-index:2;bottom:25px}.full{justify-content:center;width:100%;margin-top:32px}.reading-mix{position:relative;display:grid;grid-template-columns:1fr auto;margin:21px 0;padding:26px 0 29px;border-bottom:1px solid #c9c6bd}.reading-mix h2{font-size:29px;line-height:1.06;margin:0}.color-row{grid-column:1/-1;display:flex;gap:6px;margin-top:24px}.color-row span{width:100%;height:5px}.action-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#c9c6bd}.action-panel{text-align:left;min-height:176px;border:0;padding:20px;color:#223135;display:flex;flex-direction:column;align-items:flex-start}.color-panel{background:#edc847}.roulette-panel{background:#9dc8bb}.panel-icon{margin-bottom:auto}.action-panel b{font:600 25px/1.03 Fraunces}.action-panel small{margin-top:10px;text-transform:uppercase;font:500 10px DM Mono;letter-spacing:.05em}.form-page h1{margin-bottom:40px}.field{margin-bottom:23px}.field label,fieldset legend{display:block;margin-bottom:8px;font:600 12px DM Mono;text-transform:uppercase;letter-spacing:.05em}.field label span{color:#7c8582;font-weight:400;text-transform:none}.field input{width:100%;border:0;border-bottom:1px solid #aeb6af;padding:10px 0;color:#223135;outline:0;background:transparent;font:500 20px Fraunces}.field input:focus{border-color:#223135}fieldset{border:0;padding:0;margin:31px 0 0}.genre-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.genre-choice{display:flex;align-items:center;gap:10px;border:1px solid #d0cdc4;color:#52605e;padding:9px;background:transparent;text-align:left}.genre-choice span{display:grid;place-items:center;width:24px;height:24px;color:#fffaf1;background:var(--genre);border-radius:50%;font:500 10px DM Mono}.genre-choice.selected{border-color:#223135;color:#223135;box-shadow:inset 0 0 0 1px #223135}.big-count{margin:35px 0 10px;font:600 clamp(80px,20vw,118px)/.8 Fraunces;color:#e56f31}.big-count span{font:500 18px Outfit;color:#223135}.quiet-copy{max-width:360px;color:#617071;line-height:1.55}.mix-list{margin-top:45px}.mix-item{display:grid;grid-template-columns:32px 1fr auto;gap:11px;align-items:center;margin:17px 0}.mix-item>span{display:grid;place-items:center;width:29px;height:29px;color:#fffaf1;font:10px DM Mono;border-radius:50%}.mix-item b{font-weight:500}.mix-item i{font-style:normal;color:#617071}.bar{grid-column:2/-1;height:3px;background:#d5d4cd}.bar div{height:100%}.most-read{padding-top:32px;margin-top:36px;border-top:1px solid #c9c6bd}.most-read h3{font-size:29px;margin:0 0 5px}.most-read p:last-child{color:#617071}.roulette-book{position:relative;min-height:310px;margin-top:36px;background:#d4d9c9;padding:32px 27px 28px 84px;display:flex;flex-direction:column;justify-content:center}.book-spine{position:absolute;inset:0 auto 0 0;width:56px;display:grid;place-items:center;background:#cb573b;color:#f8edda;font:28px Fraunces}.roulette-book h2{font-size:38px;line-height:1;margin:0 0 11px}.roulette-book p:not(.section-kicker){color:#536560}.roulette-book small{margin-top:28px;font:11px DM Mono}.spin-button{width:100%;justify-content:center;display:flex;align-items:center;gap:9px;border:0;margin:23px 0 19px;padding:16px;color:#f5f1e9;background:#223135;text-transform:uppercase;font:600 12px DM Mono}.roulette-page .text-button{margin:auto}.shelf-summary{display:flex;gap:15px;align-items:center;margin:36px 0 21px;padding:18px 0;border-top:1px solid #c9c6bd;border-bottom:1px solid #c9c6bd}.shelf-summary span{font:52px/.8 Fraunces;color:#e56f31}.shelf-summary p{margin:0;color:#617071;line-height:1.4}.owned-book{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #d4d0c7}.owned-book b{font:600 18px Fraunces}.owned-book p{margin:4px 0 0;color:#617071;font-size:14px}.status{white-space:nowrap;align-self:center;padding:5px 7px;background:#dce7db;color:#35674e;font:10px DM Mono}.status.looking{background:#f3dbb0;color:#816027}.add-book{display:flex;gap:8px;align-items:center;border:0;background:none;padding:26px 0;font-weight:600}.book-form{margin-top:24px;padding:22px;background:#e3e5dd}.status-options{display:grid;gap:6px;margin:20px 0}.status-options button{border:1px solid #b8c2b8;padding:9px;text-align:left;background:transparent}.status-options button.active{background:#223135;color:#f5f1e9;border-color:#223135}.profile-page{text-align:center;padding-top:65px}.avatar{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 22px;border-radius:50%;background:#e56f31;color:#fff7e9;font:38px Fraunces}.profile-page h1{font-size:45px}.email{color:#617071;margin:13px 0 42px}.profile-list{text-align:left;border-top:1px solid #c9c6bd}.profile-list div{display:flex;flex-direction:column;padding:18px 0;border-bottom:1px solid #c9c6bd}.profile-list span{color:#617071;font:11px DM Mono;text-transform:uppercase}.profile-list b{margin-top:7px;font:600 19px Fraunces}.signout{margin:32px auto;color:#a65148}nav{position:fixed;z-index:5;bottom:0;left:50%;width:min(100%,620px);transform:translate(-50%);height:76px;display:grid;grid-template-columns:repeat(4,1fr);background:#223135;border-top:1px solid #344548}nav button{display:grid;place-items:center;gap:3px;border:0;color:#aab8b2;background:transparent;padding:10px 3px}nav button.active{color:#f4f1e9}nav span{font:10px Outfit}.toast{position:fixed;z-index:20;bottom:91px;left:50%;transform:translate(-50%);max-width:calc(100% - 40px);padding:12px 17px;background:#223135;color:#f7f2e8;box-shadow:0 8px 25px #22313540;font-size:14px}.color-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;justify-content:space-between;color:#fffaf0;padding:26px;text-align:center}.color-screen button{align-self:flex-end;border:0;padding:4px;color:inherit;background:transparent}.color-screen>div{margin:auto 0}.color-screen span{font:500 12px DM Mono;letter-spacing:.1em}.color-screen h1{font-size:clamp(60px,17vw,112px);line-height:.9;margin:23px 0 18px}.color-screen p{font:20px Fraunces}.color-screen small{font:11px DM Mono;opacity:.8}@media (min-width:650px){body{padding:22px;background:#d6d5cd}.app-shell{box-shadow:0 10px 40px #22313522;min-height:calc(100svh - 44px)}.page,.topbar{padding-inline:42px}.action-panel{min-height:195px}nav{bottom:22px}}@media (prefers-reduced-motion:no-preference){.feature,.action-panel,.genre-choice,.primary-button,.spin-button{transition:transform .2s ease,filter .2s ease}.feature:hover,.action-panel:hover{transform:translateY(-2px)}.spin-button:active,.primary-button:active{transform:scale(.98)}}