:root { --paper:#eef5ec; --ink:#173b2b; --muted:#5f7968; --line:#c9dccb; --accent:#2f8050; --deep-green:#173b2b; --light-green:#b9d9b8; --mid-green:#70ad7b; --sage:#a8c9a4; }
:root.dark-mode { --paper:#10251b; --ink:#e5f1e3; --muted:#a4bba8; --line:#365342; --accent:#8bd391; --deep-green:#07150e; --light-green:#234c35; --mid-green:#39764b; --sage:#477956; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.container { width:min(100% - 4rem,1160px); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); }
.nav { min-height:80px; display:flex; align-items:center; gap:2rem; }
.logo { font-size:1.3rem; font-weight:700; letter-spacing:-.04em; }
.dot { color:var(--accent); }
.nav-links { display:flex; gap:1.7rem; margin-left:auto; color:var(--muted); font-size:.85rem; }
.nav-links a:hover { color:var(--accent); }
.nav-note,.mono-label { color:var(--muted); font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
.nav-note { margin-left:1.5rem; }
.eyebrow { margin:0 0 1rem; color:var(--accent); font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:'Libre Baskerville',Georgia,serif; font-weight:400; line-height:1.1; letter-spacing:-.05em; }
h1 { font-size:clamp(3.5rem,8vw,7.7rem); }
h2 { font-size:clamp(2.5rem,5.4vw,5rem); }
h3 { font-size:clamp(1.7rem,3vw,2.65rem); }
em { color:var(--accent); font-weight:400; }
.hand-note { display:inline-block; color:var(--accent); font-family:'Permanent Marker',cursive; font-size:.9rem; transform:rotate(-3deg); }
.hand-note:hover { color:var(--deep-green); text-decoration:underline; }
.hero { min-height:calc(100vh - 80px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5rem; padding-top:4rem; padding-bottom:6rem; }
.hero-copy h1 { font-family:'Permanent Marker',cursive; font-size:clamp(4.5rem,10vw,9rem); letter-spacing:-.03em; transform:rotate(-2deg); }
.hero-intro { max-width:420px; margin:2rem 0 0; color:var(--muted); font-size:1.12rem; }
.hero-role { margin:1.2rem 0 0; color:var(--ink); font-size:1.18rem; font-weight:500; }
.hero-thesis { max-width:420px; margin:1.4rem 0 0; color:var(--muted); font-family:'Permanent Marker',cursive; font-size:1.05rem; transform:rotate(-1deg); }
.note-hero { margin:2.5rem 0 0 5rem; }
.hero-visual { min-height:540px; }
.image-placeholder { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink); }
.image-placeholder::before,.image-placeholder::after { position:absolute; content:''; border:1px solid currentColor; opacity:.3; }
.image-placeholder::before { width:70%; height:70%; border-radius:50%; }
.image-placeholder::after { width:50%; height:50%; transform:rotate(23deg); }
.image-placeholder > span { position:relative; z-index:1; font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:.12em; }
.image-placeholder small { position:absolute; bottom:1rem; left:1rem; color:var(--muted); font-size:.68rem; }
.placeholder-sun { background:var(--light-green); }
.placeholder-sun::before { border-radius:0; transform:rotate(45deg); }
.placeholder-blue { background:var(--mid-green); color:#f1f8ef; }
.placeholder-sage { background:var(--sage); }
.placeholder-yellow { background:var(--light-green); }
.note-orbit { position:absolute; right:0; bottom:18%; transform:rotate(7deg); }
.section { padding:8rem 0; border-top:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-bottom:5rem; }
.section-note { max-width:350px; align-self:end; color:var(--muted); }
.project-list { display:grid; gap:7rem; }
.project { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.project-image { aspect-ratio:1.12; }
.project-info { position:relative; }
.project-meta { margin:0 0 1.5rem; color:var(--muted); font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.1em; }
.project-meta span { color:var(--accent); font-size:1.1rem; }
.project-info > p:not(.project-meta) { max-width:430px; margin:1.5rem 0; color:var(--muted); }
.project-info .hand-note { margin-top:1rem; }
.project-club .project-image { transform:rotate(2deg); }
.project-research .project-image { transform:rotate(-2deg); }
.about-section { position:relative; padding:8rem 0; background:var(--deep-green); color:#eef5ec; }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.about-section .eyebrow { color:#a8d5a5; }
.about-copy { max-width:500px; color:#c9d0ca; font-size:1.08rem; }
.about-copy p { margin:0 0 1.3rem; }
.interest-list { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; }
.interest-list span { padding:.35rem .7rem; border:1px solid #59645e; border-radius:999px; color:#e8e9df; font-family:'DM Mono',monospace; font-size:.7rem; }
.note-about { grid-column:2; margin-top:1rem; color:#a8d5a5; transform:rotate(2deg); }
.field-notes-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4rem; }
.field-notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; }
.notes-placeholder { position:relative; padding:1.6rem; border:1px dashed var(--line); color:var(--muted); font-family:'DM Mono',monospace; font-size:.8rem; transform:rotate(-1deg); }
.notes-placeholder p { padding-bottom:1rem; border-bottom:1px solid var(--line); }
.notes-placeholder .hand-note { position:absolute; right:1rem; bottom:1rem; }
.site-footer { display:flex; justify-content:space-between; padding:1.5rem 0; color:var(--muted); font-size:.8rem; }
.site-footer p { margin:0; }
.theme-toggle { position:fixed; top:1.2rem; right:1.5rem; z-index:10; padding:.55rem .8rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); cursor:pointer; font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }
.handwriting-title { font-family:'Permanent Marker',cursive; font-weight:400; }
.handwriting-wordmark { display:flex; justify-content:center; align-items:center; }
.handwriting-wordmark img { display:block; width:min(100%,620px); height:auto; mix-blend-mode:multiply; }
.dark-mode .handwriting-wordmark img { filter:invert(1); mix-blend-mode:screen; }
.simple-home { gap:4rem; }
.simple-home .home-intro { max-width:700px; }
.simple-home .home-intro .eyebrow { margin-bottom:1.4rem; }
.simple-home .hero-intro { margin-top:1.4rem; }
.personal-map-text { gap:1rem; }
.personal-map-text .map-link { width:clamp(130px,18vw,175px); height:clamp(130px,18vw,175px); border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb, var(--paper) 75%, var(--light-green)); font-family:'Permanent Marker',cursive; font-size:1.35rem; line-height:1.15; text-align:center; transform:rotate(-2deg); }
.personal-map-text .map-link:nth-child(even) { transform:rotate(3deg); }
.personal-map-text .map-link:hover { background:var(--deep-green); color:var(--paper); }
.personal-map-text .map-link em { display:inline-block; color:var(--accent); }
.personal-map-text .map-link:hover em { color:var(--light-green); }
.home-footer { width:min(100% - 4rem,1160px); margin:0 auto; }
.inner-shell h1 { font-family:'Permanent Marker',cursive; letter-spacing:-.03em; transform:rotate(-2deg); }
.inner-shell h1 em { color:var(--accent); }
.home-page { min-height:100vh; background:var(--paper); }
.home-shell { width:min(100% - 4rem,1160px); min-height:100vh; margin:0 auto; padding:10vh 0 8vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3rem; }
.home-intro { display:flex; flex-direction:column; align-items:center; text-align:center; }
.home-intro h1 { font-family:'Permanent Marker',cursive; font-size:clamp(4.5rem,10vw,9rem); letter-spacing:-.03em; transform:rotate(-2deg); }
.home-intro .hero-intro { max-width:480px; }
.home-intro .hero-intro { font-family:'Permanent Marker',cursive; font-size:1.05rem; line-height:1.5; letter-spacing:.015em; word-spacing:.08em; transform:rotate(-1deg); }
.portrait-slot { width:150px; height:150px; margin:1.8rem 0 0; display:flex; align-items:center; justify-content:center; position:relative; background:var(--light-green); border:1px dashed var(--accent); border-radius:50%; text-align:center; color:var(--accent); font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.1em; transform:rotate(-5deg); }
.portrait-slot small, .activity-photo small { position:absolute; bottom:.7rem; left:0; width:100%; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.62rem; letter-spacing:0; }
.personal-map { width:min(100%,620px); position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; }
.map-link { width:130px; height:130px; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:transform .2s, background .2s, color .2s; }
.map-link:hover { background:var(--deep-green); color:var(--paper); transform:scale(1.08) rotate(-4deg); }
.sticker { display:block; color:var(--accent); font-family:'Permanent Marker',cursive; font-size:4rem; line-height:1; }
.sticker-collage { transform:rotate(-12deg); text-shadow:12px 8px 0 var(--light-green), -7px -5px 0 var(--mid-green); }
.sticker-book { width:48px; height:58px; border:7px solid currentColor; border-radius:4px 12px 8px 4px; transform:rotate(9deg); font-size:0; box-shadow:10px 8px 0 var(--light-green); }
.sticker-brush { width:76px; height:48px; position:relative; transform:rotate(-20deg); }
.sticker-brush::before { content:''; position:absolute; left:4px; top:17px; width:68px; height:12px; border-radius:99px; background:var(--ink); }
.sticker-brush i, .sticker-brush b, .sticker-brush em { position:absolute; top:4px; width:20px; height:18px; border-radius:50% 50% 45% 45%; }
.sticker-brush i { left:7px; background:#e58a70; }.sticker-brush b { left:29px; background:#e5c15b; }.sticker-brush em { left:51px; background:#70ad7b; }
.sticker-star { color:#e5c15b; transform:rotate(10deg); text-shadow:4px 4px 0 var(--accent); }
.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; }
.map-school { transform:translateX(2rem) rotate(1deg); }
.map-hobbies { transform:translateX(-1rem) rotate(-1deg); }
.map-goals { transform:translateX(3rem) rotate(1deg); }
.inner-page { min-height:100vh; background:var(--paper); }
.inner-shell { width:min(100% - 4rem,900px); margin:0 auto; padding:3rem 0 7rem; }
.back-link { display:inline-block; margin-bottom:7rem; color:var(--accent); font-family:'DM Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.back-link:hover { text-decoration:underline; }
.inner-shell h1 { font-size:clamp(3.5rem,8vw,7rem); }
.page-lead { max-width:550px; margin:1.5rem 0 5rem; color:var(--muted); font-size:1.15rem; }
.detail-list { display:grid; gap:0; border-top:1px solid var(--line); }
.detail-list article { padding:2.5rem 0; border-bottom:1px solid var(--line); }
.activity-photo { width:100%; height:180px; margin-bottom:1.5rem; display:flex; align-items:center; justify-content:center; position:relative; background:var(--light-green); border:1px dashed var(--accent); color:var(--accent); text-align:center; font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.12em; }
.detail-list h2, .empty-detail h2 { margin:.5rem 0 1rem; font-size:clamp(1.7rem,3vw,2.5rem); }
.detail-list p:not(.project-meta), .empty-detail p { max-width:620px; color:var(--muted); }
.experience-page .detail-list p:not(.project-meta) { color:var(--deep-green); }
.empty-detail { padding:2.5rem; border:1px dashed var(--line); transform:rotate(-1deg); }
@media (max-width:760px) { .container{width:min(100% - 2rem,1160px)} .nav-note{display:none} .nav-links{gap:1rem} .hero,.project,.about-layout,.field-notes-grid,.section-heading{grid-template-columns:1fr;gap:2.5rem} .hero{padding-top:4rem;min-height:auto} .hero-visual{min-height:340px} .section,.about-section{padding:5rem 0} .section-heading{margin-bottom:3rem} .project-list{gap:5rem} .project-club .project-image{grid-row:1} .note-about{grid-column:auto} }
@media (max-width:760px) { .home-shell{width:min(100% - 2rem,1160px); padding:4rem 0; grid-template-columns:1fr; gap:4rem; align-content:center} .personal-map{min-height:0} .map-school,.map-hobbies,.map-goals{transform:none} .inner-shell{width:min(100% - 2rem,900px)} .back-link{margin-bottom:4rem} }

/* Animated desktop homepage */
.desktop-page { min-height:100vh; overflow-x:hidden; background:var(--deep-green); color:var(--ink); }
.desktop-shell { min-height:100vh; position:relative; display:flex; flex-direction:column; padding:1.2rem clamp(1rem,4vw,4rem) 1rem; overflow:hidden; background:radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--mid-green) 42%, transparent), transparent 30rem), radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--light-green) 35%, transparent), transparent 26rem), var(--deep-green); }
.desktop-shell::before { content:''; position:absolute; inset:0; opacity:.18; pointer-events:none; background-image:radial-gradient(var(--light-green) 1px, transparent 1px); background-size:24px 24px; mask-image:linear-gradient(to bottom, black, transparent 78%); }
.desktop-glow { position:absolute; width:20rem; height:20rem; border-radius:50%; filter:blur(8px); opacity:.3; pointer-events:none; animation:desktop-drift 12s ease-in-out infinite alternate; }
.desktop-glow-one { top:12%; right:5%; background:var(--mid-green); }
.desktop-glow-two { bottom:10%; left:2%; background:var(--accent); animation-delay:-5s; }
.desktop-topbar, .desktop-taskbar, .desktop-window { position:relative; z-index:1; }
.desktop-topbar { display:flex; align-items:center; justify-content:space-between; width:min(100%,1120px); margin:0 auto 1rem; color:#eef5ec; font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.desktop-brand, .desktop-status { display:flex; align-items:center; gap:.6rem; }
.brand-orb { display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; border:1px solid #b9d9b8; border-radius:50%; color:#b9d9b8; font-family:'Permanent Marker',cursive; font-size:1.1rem; text-transform:none; animation:desktop-pulse 3s ease-in-out infinite; }
.status-dot { width:.45rem; height:.45rem; border-radius:50%; background:#a8d5a5; box-shadow:0 0 12px #a8d5a5; animation:desktop-pulse 2s ease-in-out infinite; }
.desktop-page .theme-toggle { position:static; z-index:auto; margin-left:.5rem; padding:.35rem .55rem; border-color:rgba(238,245,236,.35); background:transparent; color:#eef5ec; font-size:.58rem; }
.desktop-page .theme-toggle:hover { border-color:#a8d5a5; color:#a8d5a5; }
.desktop-window { width:min(100%,1120px); min-height:clamp(570px,78vh,760px); margin:auto; overflow:hidden; border:1px solid rgba(238,245,236,.55); border-radius:1.2rem; background:color-mix(in srgb, var(--paper) 91%, transparent); box-shadow:0 24px 80px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35); animation:desktop-float 7s ease-in-out infinite; }
.window-titlebar { display:flex; align-items:center; justify-content:space-between; height:3rem; padding:0 1rem; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--light-green) 48%, transparent); color:var(--muted); font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.06em; }
.window-controls { display:flex; gap:.4rem; }
.window-controls span { width:.65rem; height:.65rem; border-radius:50%; background:var(--accent); opacity:.75; }
.window-controls span:nth-child(2) { background:#d5b55c; }.window-controls span:nth-child(3) { background:#d77d68; }
.window-menu { letter-spacing:.18em; }
.desktop-content { position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:3rem; min-height:calc(clamp(570px,78vh,760px) - 5rem); padding:clamp(3rem,7vw,7rem); }
.desktop-copy { position:relative; z-index:2; max-width:500px; }
.desktop-kicker { margin:0 0 1rem; color:var(--accent); font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.15em; }
.desktop-copy h1 { margin:0; font-family:'Permanent Marker',cursive; font-size:clamp(4.5rem,10vw,8.5rem); line-height:.95; letter-spacing:-.04em; transform:rotate(-3deg); }
.desktop-statement { max-width:480px; margin:2rem 0 0; color:var(--muted); font-family:'Permanent Marker',cursive; font-size:clamp(1rem,1.6vw,1.25rem); line-height:1.55; transform:rotate(-1deg); }
.desktop-hint { margin:2rem 0 0; color:var(--accent); font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.desktop-photo { position:absolute; top:10%; right:11%; z-index:1; display:grid; place-items:center; width:clamp(130px,16vw,190px); aspect-ratio:1; padding:1rem; border:1px dashed var(--accent); border-radius:50%; background:var(--light-green); color:var(--accent); text-align:center; font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.1em; transform:rotate(7deg); animation:desktop-photo-wobble 5s ease-in-out infinite; }
.desktop-photo small { position:absolute; bottom:1rem; width:100%; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.6rem; letter-spacing:0; }
.desktop-files { position:relative; z-index:3; display:grid; grid-template-columns:repeat(2, minmax(100px, 1fr)); gap:2.4rem 2rem; justify-items:center; padding-top:5rem; }
.desktop-file { display:flex; flex-direction:column; align-items:center; gap:.35rem; width:8.5rem; padding:.75rem .45rem; border-radius:.7rem; color:var(--ink); font-family:'DM Mono',monospace; font-size:.75rem; text-align:center; transition:transform .25s ease, background .25s ease; }
.desktop-file small { color:var(--muted); font-size:.6rem; }
.desktop-file:hover, .desktop-file:focus-visible { outline:none; background:color-mix(in srgb, var(--light-green) 52%, transparent); transform:translateY(-.6rem) rotate(-2deg); }
.file-icon { position:relative; display:block; width:4.5rem; height:3.5rem; border:2px solid var(--accent); border-radius:.35rem .55rem .5rem .5rem; background:linear-gradient(145deg, color-mix(in srgb, var(--light-green) 80%, white), var(--mid-green)); box-shadow:5px 6px 0 color-mix(in srgb, var(--accent) 30%, transparent); transition:transform .25s ease; }
.file-icon::before { content:''; position:absolute; top:-.55rem; left:-2px; width:1.8rem; height:.75rem; border:2px solid var(--accent); border-bottom:0; border-radius:.35rem .35rem 0 0; background:var(--light-green); }
.file-icon::after { content:''; position:absolute; inset:.7rem .55rem; border:1px dashed color-mix(in srgb, var(--deep-green) 45%, transparent); border-radius:.2rem; }
.file-icon i { position:absolute; right:.45rem; bottom:.45rem; z-index:1; width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); }
.desktop-file:hover .file-icon, .desktop-file:focus-visible .file-icon { transform:rotate(6deg) scale(1.08); }
.file-school { transform:rotate(2deg); }.file-hobbies { transform:rotate(-2deg); }.file-goals { transform:rotate(2deg); }
.window-footer { display:flex; justify-content:space-between; padding:.75rem 1.2rem; border-top:1px solid var(--line); color:var(--muted); font-family:'DM Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.desktop-taskbar { display:flex; align-items:center; justify-content:space-between; width:min(100%,1120px); margin:1rem auto 0; color:#eef5ec; font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.04em; }
.taskbar-button { padding:.5rem .75rem; border:1px solid rgba(238,245,236,.35); border-radius:.5rem; }.taskbar-button:first-letter { color:#a8d5a5; }.taskbar-note { opacity:.7; }.taskbar-clock { color:#a8d5a5; }
@keyframes desktop-float { 0%,100% { transform:translateY(0) rotate(.15deg); } 50% { transform:translateY(-8px) rotate(-.15deg); } }
@keyframes desktop-drift { from { transform:translate(0,0) scale(1); } to { transform:translate(35px,-20px) scale(1.12); } }
@keyframes desktop-pulse { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes desktop-photo-wobble { 0%,100% { transform:rotate(7deg) translateY(0); } 50% { transform:rotate(3deg) translateY(-8px); } }
@media (max-width:760px) { .desktop-shell { padding:1rem; } .desktop-topbar { font-size:.58rem; } .desktop-status > span:not(.status-dot), .desktop-page .theme-toggle span, .taskbar-note { display:none; } .desktop-window { min-height:calc(100vh - 7.2rem); } .desktop-content { display:flex; flex-direction:column; align-items:flex-start; gap:2rem; min-height:calc(100vh - 10.2rem); padding:3rem 1.5rem; } .desktop-photo { top:2rem; right:1.5rem; width:105px; } .desktop-copy { padding-top:2rem; } .desktop-copy h1 { font-size:clamp(3.5rem,17vw,6rem); } .desktop-statement { max-width:75%; font-size:.95rem; } .desktop-files { width:100%; grid-template-columns:repeat(2,1fr); gap:1.2rem; padding-top:1rem; } .desktop-file { width:7rem; } .file-icon { width:3.8rem; height:3rem; } .window-footer { font-size:.5rem; } .desktop-taskbar { font-size:.55rem; } }

/* Scrapbook-style entry screen */
[hidden] { display:none !important; }
.login-screen { position:relative; isolation:isolate; min-height:100vh; overflow:hidden; display:grid; place-items:center; padding:2rem; color:#402b2b; background:radial-gradient(circle at 20% 15%, #f6ca86 0 7%, transparent 22%), radial-gradient(circle at 90% 80%, #e8a4b8 0 5%, transparent 24%), linear-gradient(135deg,#bd785c,#d49a69 48%,#a95f55); }
.login-screen::before { content:''; position:absolute; inset:0; z-index:-2; opacity:.25; background-image:radial-gradient(#6f3d35 1px, transparent 1px); background-size:9px 9px; mix-blend-mode:multiply; }
.login-screen::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.3; background:linear-gradient(115deg, transparent 0 48%, #f6d19a 48% 49%, transparent 49% 100%), linear-gradient(25deg, transparent 0 72%, #78b9bc 72% 79%, transparent 79%); pointer-events:none; }
.login-collage { position:absolute; inset:0; pointer-events:none; }
.polaroid { position:absolute; display:grid; place-items:center; width:clamp(130px,16vw,210px); aspect-ratio:1 / 1.12; padding:.65rem .65rem 2rem; border:5px solid #fffdf1; background:linear-gradient(145deg,#dce9e2,#a1c2bb); box-shadow:0 12px 22px rgba(63,33,29,.25); text-align:center; animation:polaroid-sway 6s ease-in-out infinite alternate; }
.polaroid::before { content:''; position:absolute; inset:.65rem .65rem 2rem; background:radial-gradient(circle at 30% 32%, #f8d46e 0 10%, transparent 11%), linear-gradient(145deg,#81b8bf,#e4a17b 55%,#705266); opacity:.9; }
.polaroid span { position:relative; z-index:1; color:#fffdf1; font-family:'Permanent Marker',cursive; font-size:clamp(3rem,7vw,6rem); text-shadow:2px 3px 0 rgba(66,35,35,.3); }
.polaroid small { position:absolute; bottom:.55rem; color:#60423c; font-family:'Permanent Marker',cursive; font-size:.7rem; }
.polaroid-one { top:7%; left:6%; transform:rotate(-11deg); }.polaroid-two { top:6%; right:7%; transform:rotate(10deg); animation-delay:-2s; }.polaroid-three { bottom:7%; left:9%; transform:rotate(8deg); animation-delay:-4s; }.polaroid-four { right:9%; bottom:8%; transform:rotate(-8deg); animation-delay:-1s; }
.collage-note { position:absolute; padding:.35rem .7rem; background:#f6d76b; color:#70412e; font-family:'Permanent Marker',cursive; font-size:clamp(.7rem,1.5vw,1rem); box-shadow:2px 4px 0 rgba(63,33,29,.12); }.note-one { top:29%; right:12%; transform:rotate(4deg); background:#8ed7c8; }.note-two { bottom:22%; left:27%; transform:rotate(-5deg); }
.collage-star, .collage-flower { position:absolute; color:#f9dc62; font-family:'Permanent Marker',cursive; font-size:clamp(2rem,5vw,4.5rem); text-shadow:2px 3px 0 rgba(63,33,29,.18); animation:sticker-bob 4s ease-in-out infinite; }.star-one { top:20%; left:25%; }.star-two { right:25%; bottom:19%; color:#75db73; animation-delay:-2s; }.collage-flower { top:13%; right:30%; color:#f7a06d; font-size:3rem; animation-delay:-1s; }
.login-card { position:relative; z-index:2; width:min(100%,530px); padding:clamp(2rem,5vw,4.2rem); border:8px solid #fffdf1; background:rgba(255,249,229,.94); box-shadow:0 18px 0 rgba(89,44,38,.22), 0 30px 65px rgba(63,33,29,.3); text-align:center; transform:rotate(-1deg); animation:login-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
.login-card::before { content:'✦'; position:absolute; top:-1.7rem; left:50%; color:#e84e51; font-family:'Permanent Marker',cursive; font-size:2.2rem; transform:translateX(-50%) rotate(9deg); }.login-kicker { margin:0 0 1rem; color:#bb6553; font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.16em; }.login-card h1 { margin:0; font-family:'Permanent Marker',cursive; font-size:clamp(3rem,8vw,5.8rem); line-height:1; letter-spacing:-.04em; color:#4b3030; }.login-card h1 span { color:#e87b55; }.login-subtitle { margin:1.25rem 0 2rem; color:#795650; font-family:'Libre Baskerville',serif; font-size:.95rem; }.ready-form { text-align:left; }.ready-form label { display:block; margin-bottom:.5rem; color:#a65a50; font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }.ready-input-row { display:flex; gap:.5rem; }.ready-input-row input { min-width:0; flex:1; padding:.85rem 1rem; border:2px solid #dbb9a5; border-radius:.4rem; outline:none; background:#fffdf7; color:#4b3030; font-family:'Permanent Marker',cursive; font-size:1rem; }.ready-input-row input:focus { border-color:#e87b55; box-shadow:0 0 0 3px rgba(232,123,85,.18); }.ready-input-row button { padding:.85rem 1.1rem; border:0; border-radius:.4rem; background:#e87b55; color:#fffdf1; cursor:pointer; font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; transition:transform .2s, background .2s; }.ready-input-row button:hover { background:#c75e57; transform:translateY(-2px) rotate(2deg); }.ready-message { min-height:1.1rem; margin:.75rem 0 0; color:#b94e51; font-family:'Permanent Marker',cursive; font-size:.85rem; }.login-footer { position:absolute; bottom:1.2rem; z-index:2; margin:0; color:#fff5dc; font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; }.login-complete { animation:login-exit .5s ease forwards; pointer-events:none; }
@keyframes login-arrive { from { opacity:0; transform:translateY(25px) rotate(-5deg) scale(.96); } to { opacity:1; transform:rotate(-1deg) scale(1); } }.login-complete .login-card { animation:none; }.login-complete .login-collage { animation:login-exit .5s ease forwards; }.login-complete .login-footer { opacity:0; }.login-complete { animation:login-exit .5s ease forwards; } @keyframes login-exit { to { opacity:0; transform:scale(1.05); } } @keyframes polaroid-sway { from { margin-top:-8px; } to { margin-top:8px; } } @keyframes sticker-bob { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(8deg) translateY(-8px); } }
@media (max-width:760px) { .login-screen { padding:1rem; }.polaroid { width:105px; padding:.4rem .4rem 1.4rem; border-width:3px; }.polaroid::before { inset:.4rem .4rem 1.4rem; }.polaroid small { bottom:.3rem; font-size:.48rem; }.polaroid-one { left:-1%; top:8%; }.polaroid-two { right:-2%; top:9%; }.polaroid-three { left:-2%; bottom:12%; }.polaroid-four { right:-1%; bottom:13%; }.collage-note { display:none; }.login-card { padding:2rem 1.3rem; border-width:5px; }.login-card h1 { font-size:clamp(2.8rem,15vw,4.5rem); }.login-subtitle { font-size:.8rem; }.ready-input-row { flex-direction:column; }.ready-input-row button { width:100%; }.login-footer { font-size:.48rem; bottom:.6rem; } }