@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700;800&display=swap');

:root { --paper:#f6f1e8; --ink:#202126; --muted:#74716d; --line:#d8d0c4; --coral:#ff725e; --cyan:#85dce2; --yellow:#ffd95a; --mint:#b7e6bb; --white:#fffdf8; --shadow:6px 6px 0 var(--ink); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { margin:0; color:var(--ink); font-family:'Fira Sans', sans-serif; background-color:var(--paper); background-image:linear-gradient(rgba(32,33,38,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(32,33,38,.045) 1px,transparent 1px); background-size:28px 28px; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.site-header { max-width:1200px; margin:auto; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:12px; font:700 18px 'Fira Code', monospace; letter-spacing:.02em; }
.brand small { display:block; color:var(--muted); font:500 10px 'Fira Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; background:var(--coral); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-size:25px; transform:rotate(-5deg); }
.app-shell { max-width:1200px; margin:auto; padding:38px 28px 72px; min-height:calc(100vh - 130px); }
.hero { display:grid; grid-template-columns:1.3fr .7fr; gap:45px; align-items:end; margin:36px 0 70px; }
.eyebrow { font:600 12px 'Fira Code',monospace; color:var(--coral); text-transform:uppercase; letter-spacing:.13em; }
h1 { font-size:clamp(48px,8vw,102px); line-height:.88; margin:14px 0 24px; letter-spacing:-.06em; max-width:760px; }
h2 { font-size:clamp(27px,4vw,45px); line-height:1; letter-spacing:-.04em; margin:0 0 24px; }
p { line-height:1.65; max-width:64ch; }
.hero-copy p { color:var(--muted); font-size:18px; }
.hero-doodle { border:2px solid var(--ink); background:var(--yellow); padding:26px; min-height:190px; transform:rotate(3deg); box-shadow:var(--shadow); position:relative; }
.hero-doodle:after { content:'✦'; position:absolute; right:19px; bottom:10px; font-size:42px; }
.doodle-equation { font:600 23px 'Fira Code',monospace; line-height:1.7; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:26px; }
.section-head h2 { margin:0; }
.mono { font:500 12px 'Fira Code',monospace; color:var(--muted); }
.button { border:2px solid var(--ink); padding:12px 17px; background:var(--ink); color:var(--white); font-weight:700; display:inline-flex; justify-content:center; align-items:center; gap:9px; box-shadow:3px 3px 0 var(--coral); transition:transform .18s, box-shadow .18s; }
.button:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--coral); }
.button.secondary { color:var(--ink); background:var(--white); box-shadow:3px 3px 0 var(--cyan); }
.button.danger { box-shadow:3px 3px 0 var(--coral); }
.button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.auth-button { background:var(--white); color:var(--ink); border-color:var(--ink); box-shadow:3px 3px 0 var(--cyan); }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-card { background:var(--white); border:2px solid var(--ink); min-height:300px; display:flex; flex-direction:column; transition:transform .2s; }
.project-card:hover { transform:translateY(-5px) rotate(-.5deg); }
.project-thumb { height:190px; background:var(--cyan); overflow:hidden; position:relative; border-bottom:2px solid var(--ink); }
.project-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.project-thumb .empty-art { height:100%; display:grid; place-items:center; font:700 46px 'Fira Code'; color:var(--ink); }
.project-body { padding:18px; display:flex; flex-direction:column; flex:1; }
.project-body h3 { margin:0 0 8px; font-size:21px; }
.project-body p { margin:0; color:var(--muted); font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.project-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:18px; }
.status { font:600 11px 'Fira Code'; text-transform:uppercase; letter-spacing:.05em; }
.status.on { color:#258540; }.status.off { color:var(--coral); }
.empty-state { border:2px dashed var(--ink); padding:55px 24px; text-align:center; background:rgba(255,253,248,.7); grid-column:1/-1; }
.form-wrap { max-width:800px; margin:30px auto; }.back-link { display:inline-block; margin-bottom:26px; font:600 12px 'Fira Code'; color:var(--muted); }
.form-card { background:var(--white); border:2px solid var(--ink); padding:28px; box-shadow:var(--shadow); }
.form-grid { display:grid; gap:22px; }.field { display:grid; gap:8px; }.field label { font:600 12px 'Fira Code'; text-transform:uppercase; letter-spacing:.05em; }.field input,.field textarea { width:100%; border:2px solid var(--ink); padding:13px 14px; background:#fff; color:var(--ink); }.field textarea { min-height:135px; resize:vertical; }.upload-box { border:2px dashed var(--ink); padding:22px; background:#f0fbf8; }.upload-box input { border:0; padding:0; background:none; }.upload-hint { color:var(--muted); font-size:13px; margin-top:10px; }.preview-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:15px; }.preview { aspect-ratio:1; border:2px solid var(--ink); overflow:hidden; background:var(--yellow); position:relative; }.preview img { width:100%; height:100%; object-fit:cover; }.preview span { position:absolute; top:3px; right:4px; font:700 11px 'Fira Code'; background:var(--white); padding:2px; }
.notice { padding:14px 16px; border:2px solid var(--ink); background:var(--mint); margin-bottom:20px; font-size:14px; }.notice.error { background:#ffd0c8; }.share-box { display:flex; gap:8px; margin-top:15px; }.share-box input { flex:1; min-width:0; border:2px solid var(--ink); padding:11px; background:var(--white); font:12px 'Fira Code'; }
.success-card { text-align:center; }.success-card p { margin-left:auto; margin-right:auto; color:var(--muted); }.share-box-large { max-width:680px; margin:28px auto 0; }.share-box-large input { font-size:13px; }.copy-message { min-height:24px; margin-top:12px; color:#258540; font:600 12px 'Fira Code'; }.success-actions { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:24px; }.success-actions .back-link { margin:0; }
.overview-toolbar { display:flex; justify-content:space-between; gap:15px; align-items:center; margin:30px 0 24px; }.owner-chip { display:flex; gap:10px; align-items:center; font-size:14px; }.owner-chip img { width:35px; height:35px; border-radius:50%; border:2px solid var(--ink); object-fit:cover; }.owner-chip span { display:grid; gap:2px; }.owner-chip small { color:var(--muted); font:10px 'Fira Code',monospace; }
.project-meta { flex-wrap:wrap; }.edit-image-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.edit-image,.add-image { aspect-ratio:1; border:2px solid var(--ink); position:relative; overflow:hidden; background:var(--yellow); }.edit-image img { width:100%; height:100%; object-fit:cover; }.edit-image .button { position:absolute; top:5px; right:5px; min-width:34px; padding:6px 10px; box-shadow:2px 2px 0 var(--ink); }.add-image { display:grid; place-items:center; align-content:center; gap:5px; border-style:dashed; color:var(--muted); font:12px 'Fira Code'; text-align:center; cursor:pointer; }.add-image span { font-size:30px; color:var(--ink); }.add-image input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.viewer { max-width:1080px; margin:auto; }.viewer-head { max-width:760px; margin:38px 0; }.viewer-description { color:var(--muted); font-size:17px; white-space:pre-wrap; }.viewer-grid { columns:2 280px; column-gap:18px; }.viewer-image { width:100%; margin:0 0 18px; border:2px solid var(--ink); display:block; cursor:zoom-in; break-inside:avoid; background:var(--white); }.viewer-image img { width:100%; display:block; max-height:680px; object-fit:cover; }.lightbox { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:30px; background:rgba(32,33,38,.9); }.lightbox[hidden] { display:none; }.lightbox img { max-width:min(100%,1100px); max-height:85vh; object-fit:contain; border:3px solid var(--white); }.close-lightbox { position:absolute; top:20px; right:25px; background:var(--coral); color:var(--ink); border:2px solid var(--ink); font-size:24px; width:46px; height:46px; }
.reaction-bar { display:flex; gap:10px; margin-top:22px; }.reaction-button { border:2px solid var(--ink); background:var(--white); color:var(--ink); padding:10px 16px; font:600 14px 'Fira Code'; transition:transform .18s, background .18s; }.reaction-button:hover:not(:disabled),.reaction-button.selected { background:var(--yellow); transform:translateY(-2px); }.reaction-button:disabled { cursor:default; opacity:.7; }
.formula { position:fixed; opacity:.18; font:700 14px 'Fira Code'; pointer-events:none; z-index:0; }.formula-one { top:27%; left:2%; transform:rotate(-10deg); }.formula-two { top:64%; right:2%; transform:rotate(8deg); }.formula-three { bottom:8%; left:17%; transform:rotate(-4deg); }.site-footer { max-width:1200px; margin:auto; padding:18px 28px 30px; display:flex; justify-content:space-between; color:var(--muted); font:11px 'Fira Code'; text-transform:uppercase; }
.loading { text-align:center; padding:100px 20px; font:600 13px 'Fira Code'; }.spinner { display:inline-block; animation:spin 1s linear infinite; margin-right:8px; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .site-header,.app-shell { padding-left:18px; padding-right:18px; }.site-header { align-items:flex-start; }.hero { grid-template-columns:1fr; gap:20px; margin-top:20px; margin-bottom:50px; }.project-grid { grid-template-columns:1fr; }.section-head,.overview-toolbar { align-items:flex-start; flex-direction:column; }.preview-row { grid-template-columns:repeat(3,1fr); }.form-card { padding:20px; }.share-box { flex-direction:column; }.site-footer { padding-left:18px; padding-right:18px; }.site-footer span:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }