*{box-sizing:border-box}body{margin:0;background:#f5f4ef;color:#283b33;font:15px system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid #cdd6ce;background:white;color:#365543;border-radius:7px;padding:10px 17px}button:hover{background:#eef2ec}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ccab52;outline-offset:3px}.primary{background:#527760;border-color:#527760;color:white}.primary:hover{background:#41654f}[hidden]{display:none!important}header{background:#242e31;color:#f4f3e9;display:flex;align-items:center;justify-content:space-between;padding:22px max(28px,calc((100vw - 1180px)/2));gap:24px}.brand{display:flex;gap:15px;align-items:center;text-decoration:none;color:inherit}.brand strong{font-size:29px;letter-spacing:-1px}.brand strong span{color:#b6c6bf;font-weight:450}.brand small{display:block;color:#b6c6bf;letter-spacing:.5px;margin-top:5px;font-size:12px}.logo{width:62px;height:62px;object-fit:contain;transform:scaleX(1);filter:brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(340%) hue-rotate(94deg) brightness(93%) contrast(90%)}nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}nav button{background:#344348;border-color:#50605f;color:#eff3ed}nav .primary{background:#63876e;border-color:#63876e}#welcome{font-size:13px;color:#becdc3;margin-right:6px}main{max-width:1180px;margin:auto;padding:42px 28px 25px}#hero{position:relative;background:#eaece3;border:1px solid #dce1d6;border-radius:18px;padding:46px;margin-bottom:40px;overflow:hidden}.kicker{text-transform:uppercase;letter-spacing:2px;font-weight:750;font-size:10px;color:#7c8a7e}h1{font-size:52px;line-height:1.12;letter-spacing:-2px;margin:18px 0}h1 em{font-style:normal;color:#6d8a6a}#hero p{line-height:1.8;color:#768275}#startButton{margin-top:10px}#startButton span{margin-left:16px}.mini-plan{position:absolute;right:45px;top:65px;display:flex;transform:rotate(-5deg);box-shadow:10px 15px 25px #3e573814;border-radius:9px;overflow:hidden}.mini-plan div{width:125px;height:240px;padding:24px 15px;display:flex;flex-direction:column;gap:12px;border-right:1px solid #fff5}.mini-plan span{font-size:11px;color:#66756b}.blue{background:#dce9f4}.purple{background:#e8e0f2}.green{background:#ddece2}.section-top{display:flex;align-items:center;justify-content:space-between;gap:20px}h2{font-size:27px;letter-spacing:-.6px;margin:7px 0 20px}#status{color:#7f8c82;line-height:1.7}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.project-card{background:#fff;border:1px solid #dce3d8;border-radius:13px;padding:25px;position:relative}.project-card::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:4px;background:#aac4d9;border-radius:3px}.project-card:nth-child(3n+2)::before{background:#bea8d2}.project-card:nth-child(3n)::before{background:#a3c7ad}.project-card h3{font-size:21px;overflow-wrap:anywhere;margin:10px 0 14px}.project-card p{font-size:12px;color:#7a887f}.project-card .open{display:inline-block;color:#50765c;text-decoration:none;font-weight:650;padding:8px 0}.project-card .delete{position:absolute;right:13px;top:12px;border:0;background:none;color:#8b968d;font-size:18px;padding:4px 8px}#emptyState{text-align:center;padding:55px 20px;border:1px dashed #ccd7c9;border-radius:14px;margin-top:24px;color:#7c8a7e}#emptyState h3{color:#3e5645;font-size:23px}.paper-icon{font-size:45px;color:#9cb39c}footer{display:flex;justify-content:space-between;padding-top:45px;font-size:11px;color:#8c978d}dialog{position:relative;border:0;border-radius:15px;padding:32px;width:440px;max-width:92vw;box-shadow:0 20px 90px #17241b40}dialog::backdrop{background:#182b2880}dialog p{color:#7b897d;line-height:1.5}dialog label{display:block;font-size:12px;font-weight:650;margin:18px 0}dialog input{width:100%;padding:12px;border:1px solid #ccd5ca;border-radius:7px;margin-top:7px;color:#354f3d}dialog .primary{width:100%}dialog small{font-size:11px;color:#7d897c;line-height:1.6}.close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:23px}.link{display:block;margin:17px auto 0;background:none;border:0;color:#608169;font-size:12px}.error{color:#ad493d!important;font-size:12px;min-height:0}.privacy{text-align:center;font-size:11px;margin-top:22px}.actions{display:flex;gap:10px;justify-content:flex-end}.actions .primary{width:auto}@media(max-width:1000px){.mini-plan{right:25px;top:120px}.mini-plan div{width:90px;height:190px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}h1{font-size:44px}}@media(max-width:720px){header{padding:18px;flex-wrap:wrap}.brand strong{font-size:25px}.logo{width:48px;height:48px}main{padding:24px 18px}#hero{padding:28px}.mini-plan{position:static;transform:none;margin-top:28px}.mini-plan div{flex:1;width:auto;height:130px}.project-grid{grid-template-columns:1fr}h1{font-size:39px}.section-top{align-items:flex-start}}

.hero-picture{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:42%;max-height:88%;object-fit:contain;border-radius:10px}#hero>p{max-width:50%}@media(max-width:720px){.hero-picture{position:static;transform:none;width:100%;max-height:none;margin-top:28px}#hero>p{max-width:none}}

.hero-picture{width:26%;max-width:280px;max-height:260px;right:65px}@media(max-width:1000px) and (min-width:721px){.hero-picture{right:28px;width:28%;max-height:230px}}@media(max-width:720px){.hero-picture{width:65%;max-width:240px;max-height:240px;margin:24px auto 0;display:block}}

@font-face{font-family:'IM FELL English SC';src:url('assets/IMFellEnglishSC-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
header{background:#6072c2;color:white;border-bottom:1px solid #5264b4}
.quest-brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;min-width:0;flex-shrink:0}
.quest-wordmark strong,.quest-wordmark small{display:block;font-family:'IM FELL English SC',Georgia,serif;font-weight:400;white-space:nowrap}
.quest-wordmark strong{font-size:38px;line-height:1.05;letter-spacing:1px;color:#fff}
.quest-wordmark small{font-size:21px;line-height:1.15;letter-spacing:1px;color:#10121c;margin-top:4px;text-transform:none}
.quest-logo{width:95px;height:88px;object-fit:contain;transform:none;filter:none;mix-blend-mode:multiply}
.quest-brand:focus-visible{outline:3px solid white;outline-offset:5px;border-radius:3px}
header nav button{background:#ffffff18;border-color:#ffffff55;color:white}header nav .primary{background:#ffffff;color:#4055a3;border-color:white}header #welcome{color:#fff}
@media(max-width:720px){header{flex-wrap:wrap;padding:14px 18px;gap:14px}.quest-wordmark strong{font-size:29px}.quest-wordmark small{font-size:17px}.quest-logo{width:76px;height:72px}}
@media(max-width:380px){.quest-wordmark strong{font-size:25px}.quest-wordmark small{font-size:15px}.quest-logo{width:60px;height:60px}}

/* Colours coordinated with the MyPaperQuest header. */
:root{--brand:#6072c2;--brand-dark:#4659a7;--ink:#282d45;--muted:#626b84;--border:#d8ddef;--paper:#f6f7fc}
body{background:var(--paper);color:var(--ink)}
button{border-color:var(--border);color:var(--brand-dark)}
button:hover{background:#edf0fb}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#354992}
.primary{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.primary:hover{background:#35488d;border-color:#35488d}
#hero{background:#e9edfa;border-color:#d9dff3}
h1 em{color:var(--brand-dark)}
.kicker,#hero p,#status,.project-card p,#emptyState,dialog p,dialog small,footer{color:var(--muted)}
.project-card{border-color:var(--border);box-shadow:0 3px 14px #4055a306}
.project-card::before{background:var(--brand)}
.project-card:nth-child(3n+2)::before{background:#8996d4}
.project-card:nth-child(3n)::before{background:#a9b3e4}
.project-card .open,.link{color:var(--brand-dark)}
.project-card .open:hover,.link:hover{color:#293e87}
.project-card .delete{color:var(--muted)}
.project-card .delete:hover{background:#fceced;color:#a63847}
#emptyState{background:#ffffff70;border-color:#c4cde9}
#emptyState h3{color:var(--ink)}
.paper-icon{color:#929ed5}
dialog{background:#fff;box-shadow:0 20px 90px #202c6340}
dialog::backdrop{background:#202a5580}
dialog input{border-color:var(--border);color:var(--ink)}
header nav button:hover{background:#ffffff30}
header nav .primary:hover{background:#eef0fc;color:#35488d;border-color:#eef0fc}

/* Blue welcome panel, visible for guests and signed-in members. */
#hero{background:var(--brand);border-color:#5264b4;color:#fff}
#hero .kicker{color:#f0f2ff}
#hero h1{color:#fff}
#hero h1 em{color:#fff}
#hero>p{color:#f0f2ff}
#hero #startButton{background:#e5e7eb;border-color:#e5e7eb;color:#292e3c}
#hero #startButton:hover{background:#d2d6dd;border-color:#d2d6dd}
#hero #startButton:focus-visible{outline-color:#fff}
#hero .hero-picture{width:32%;max-width:330px;max-height:310px;right:42px;border-radius:0}
@media(max-width:1000px) and (min-width:721px){#hero .hero-picture{width:30%;max-height:260px;right:24px}}
@media(max-width:720px){#hero .hero-picture{width:72%;max-width:270px;max-height:270px;position:static;transform:none;margin:24px auto 0}}

/* Uploaded dot artwork sits behind the blue hero panel. */
.hero-stage{position:relative;isolation:isolate;margin-bottom:40px}
.hero-stage #hero{position:relative;z-index:1;margin-bottom:0}
.hero-stage::before{content:'';position:absolute;z-index:0;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:url('assets/hero-dots.png') center/cover no-repeat;pointer-events:none}
@media(max-width:720px){.hero-stage::before{display:none}}


/* Restore the original compact, rounded hero. */
.hero-stage{width:100%;max-width:none;left:auto;transform:none}
.hero-stage::before,#hero::before,#hero::after{content:none!important}
#hero,.hero-stage #hero{width:100%;max-width:none;left:auto;transform:none;border-radius:18px!important;padding:46px;overflow:hidden}
/* The paper plane belongs to the whole page background. */
body{position:relative;isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:url('assets/hero-paper-plane.png') 55% 78%/min(1000px,80vw) auto no-repeat;opacity:.10;pointer-events:none}
@media(max-width:720px){#hero,.hero-stage #hero{padding:28px}body::before{background-size:95vw auto;background-position:center 80%}}

/* Display the whole front page at eighty percent scale. */
body{zoom:.8;min-height:125vh}