@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nanum+Pen+Script&display=swap');

:root { --ink:#183127; --muted:#6f7769; --paper:#f5f1e7; --paper-deep:#e9e4d5; --moss:#315d45; --fern:#638449; --ochre:#c48635; --bone:#e5d7b8; --line:#d5d0c1; --shadow:0 12px 30px rgba(49,53,34,.13); --specimen-accent:#315d45; --specimen-wash:#e1ead4; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#d8d2c1; font-family:'DM Sans',sans-serif; overflow:hidden; }
button,a,input { font:inherit; } button { cursor:pointer; } .grain { position:fixed; inset:0; pointer-events:none; opacity:.2; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.app-shell { display:grid; grid-template-columns:64px 332px minmax(500px,1fr) 376px; height:100vh; min-height:680px; background:var(--paper); position:relative; overflow:hidden; }
.rail { padding:15px 8px; background:#eee9dc; border-right:1px solid var(--line); z-index:3; display:flex; flex-direction:column; align-items:center; } .rail-logo { width:42px;height:42px;border-radius:50%; display:grid;place-items:center;color:var(--paper);background:var(--moss);font-family:Fraunces;font-weight:700;text-decoration:none;margin-bottom:23px;box-shadow:inset 0 0 0 3px #b7c58b; } .rail nav { display:grid;gap:10px;width:100%; }
.rail-link { color:#5f675c;text-decoration:none;display:grid;place-items:center;gap:2px;border-radius:11px;padding:8px 1px;transition:.2s; } .rail-link:hover,.rail-link.active { background:#dfe6d0;color:var(--moss); } .rail-icon { font-size:22px;line-height:19px; } .rail-link small { font-size:9px;letter-spacing:.02em; } .sound-button { margin-top:auto;border:1px solid #cfc8b7;background:#faf7ee;color:var(--moss);width:34px;height:34px;border-radius:50%;font-size:16px; }
.collection-panel { padding:25px 20px 16px 13px; background:#f1ede2; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:20px; overflow:auto; } .brand { display:flex;align-items:center;gap:8px;min-height:62px; } .brand-mark { border:2px solid var(--fern);color:var(--ochre);height:42px;width:42px;border-radius:50% 47% 55% 44%;display:grid;place-items:center;font-size:24px; } .brand strong { display:block;font-family:Fraunces;font-size:25px;letter-spacing:-1.4px;line-height:28px; } .brand strong span { color:var(--ochre); }.brand em {font-family:'Nanum Pen Script';font-size:18px;color:#53735a;letter-spacing:.4px;white-space:nowrap;}
.collection-heading { height:57px;border:1px solid var(--line);border-radius:13px;background:#f9f7f0;display:flex;align-items:center;padding:0 14px;gap:10px;box-shadow:0 3px 8px #867f6b12; }.collection-heading span,.model-switcher>p {font-family:'DM Mono';font-size:11px;font-weight:500;letter-spacing:1.2px;}.collection-heading small {margin-left:auto;color:#969a8d;font-family:Fraunces;font-style:italic;}.collection-heading button {border:0;background:transparent;font-size:19px;color:#5f675c;}
.species-list { display:grid;gap:11px; }.species-card { border:1px solid #d7d1c1;background:#faf8f1;border-radius:14px;min-height:78px;padding:10px 12px;display:flex;align-items:center;gap:13px;color:var(--ink);box-shadow:0 3px 7px #77705c12;text-align:left;transition:.2s; }.species-card:hover { transform:translateX(3px); }.species-card.selected {border-color:#819169;background:#f2eedc;box-shadow:inset 0 0 0 1px #bac197,0 4px 10px #77705c1c;}.species-thumb {width:50px;height:50px;border-radius:10px;display:grid;place-items:center;color:#f5edd9;font-size:27px;box-shadow:inset 0 0 0 1px #ffffff88;}.spino{background:linear-gradient(145deg,#415f49,#a16d35)}.rex{background:#776044}.trike{background:#617769}.raptor{background:#84765a}.species-card b {font:600 17px Fraunces;display:block;}.species-card small {color:#8a8b80;font-size:11px;margin-top:3px;display:block;}.species-card i {margin-left:auto;font-size:25px;color:#898d7e;font-style:normal;}.discovery-card {position:relative;margin-top:auto;border:1px solid #d7cfae;border-radius:12px;background:#f9f4df;padding:15px 15px 13px 54px;min-height:104px;overflow:hidden;box-shadow:0 3px 8px #77705c11;}.discovery-card:after{content:'';position:absolute;width:5px;height:115px;left:25px;top:-8px;border-left:2px solid #809557;transform:rotate(-6deg);}.leaf {position:absolute;left:9px;top:13px;color:#d99a41;font-size:24px;}.discovery-card i {font:22px 'Nanum Pen Script';color:#4d5846;}.discovery-card p {font:13px Fraunces;line-height:1.35;margin:5px 0 0;color:#6d6756;}
main { min-width:0; display:grid;grid-template-rows:100px minmax(0,1fr) 160px;position:relative;background:radial-gradient(circle at 50% 42%,#fbfaf3 0,#f2eee3 58%,#e9e4d6 100%); }.topbar {display:flex;align-items:center;justify-content:space-between;padding:0 34px;z-index:2;}.back-link {text-decoration:none;color:#62695f;font-family:Fraunces;font-size:15px;}.specimen-label {text-align:center;background:#ece6d6;min-width:230px;padding:8px 25px 9px;transform:rotate(-1deg);box-shadow:0 3px 9px #77705c0b;position:relative;}.specimen-label:after{content:'●';color:#b35d40;position:absolute;right:16px;top:-17px;font-size:25px;}.specimen-label span{font:10px 'DM Mono';letter-spacing:2px;display:block;color:#777765;}.specimen-label strong{font:700 24px Fraunces;letter-spacing:1px;display:block;line-height:25px;}.specimen-label em{font:italic 14px Fraunces;color:#666955;}.top-actions{display:flex;gap:13px;}.top-actions button {border:0;background:transparent;color:#6f7469;font-size:20px;display:grid;place-items:center;gap:1px;}.top-actions small{font-size:9px;}
.viewer-section{position:relative;min-height:0;overflow:hidden}#modelViewer{position:absolute;inset:0;width:100%;height:100%}.viewer-section:after{content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#cfc8b4,transparent);}.viewer-bg-orb {position:absolute;border-radius:50%;filter:blur(0);pointer-events:none;}.orb-one {width:440px;height:440px;background:radial-gradient(circle,#dfe8d1aa,transparent 68%);left:18%;top:5%;}.orb-two{width:380px;height:280px;background:radial-gradient(circle,#efdbc299,transparent 69%);right:7%;bottom:4%;}.viewer-section canvas {position:absolute;inset:0;width:100%;height:100%;outline:none;}.loading-state {position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:7px;color:var(--moss);font-size:13px;text-align:center;transition:.45s;}.loading-state.done{opacity:0;pointer-events:none;}.loading-state span {font-size:11px;color:#787f72;white-space:nowrap;}.fossil-loader{width:50px;height:50px;border:1px solid #a9b68b;border-radius:50%;display:grid;place-items:center;font-size:22px;animation:spin 1.8s linear infinite;}.viewer-hint{position:absolute;top:18px;left:50%;transform:translateX(-50%);color:#748171;font-size:11px;letter-spacing:.3px;display:flex;gap:7px;align-items:center;padding:6px 9px;border-radius:20px;background:#f7f4ead1;opacity:.85;}.viewer-hint span{font-size:17px;color:var(--moss);}.view-tools{position:absolute;right:24px;top:50%;transform:translateY(-50%);background:#fbfaf3;border-radius:24px;padding:8px 5px;box-shadow:var(--shadow);display:grid;gap:4px;}.tool{border:0;background:transparent;color:#6d7469;width:52px;height:50px;border-radius:18px;display:grid;justify-items:center;align-content:center;font-size:18px;}.tool span{font-size:9px;margin-top:2px;}.tool:hover,.tool.active{background:#e1ead4;color:var(--moss);}.viewer-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;background:#fdfbf4e6;padding:7px 9px;border-radius:19px;box-shadow:0 4px 14px #73715a2c;}.viewer-controls button{border:0;background:transparent;width:28px;height:28px;color:#53664f;font-size:22px;line-height:20px;}.pill{font:500 11px 'DM Mono';background:#e7e2d4;color:#5b6156;border-radius:15px;padding:8px 10px;}.viewer-controls input{accent-color:#52703b;width:175px;}.timeline-section{padding:11px 50px 17px;position:relative;z-index:2;}.timeline-title{display:flex;align-items:baseline;gap:12px;}.timeline-title span{font:10px 'DM Mono';letter-spacing:1.5px;color:#76806e;}.timeline-title strong{font:600 14px Fraunces;}.timeline{height:47px;display:grid;grid-template-columns:1fr 1fr 2fr 1fr;align-items:center;position:relative;margin:4px 0 0;}.timeline:before{content:'';height:3px;background:#d2cbb5;position:absolute;left:0;right:0;top:17px;border-radius:5px;}.era{position:relative;padding-top:26px;color:#98998b;}.era:not(:first-child){text-align:center;}.era:last-child{text-align:right;}.era b{font:9px 'DM Mono';letter-spacing:.4px;display:block;}.era span{font-size:9px;display:block;margin-top:1px;}.active-era{color:var(--moss);}.active-era:before{content:'';width:14px;height:14px;border-radius:50%;background:#67834a;border:4px solid #e3ead6;box-shadow:0 0 0 1px #748a59;position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:1;}.active-era:after{content:'';position:absolute;height:3px;top:17px;left:0;right:50%;background:#889d60;}.timeline-section>p{font:italic 12px Fraunces;color:#79786b;margin:0;text-align:center;}
.loading-state .file-protocol-help { max-width:250px; white-space:normal; color:#9d573f; line-height:1.35; }
.collection-heading button { margin-left:auto; }
.species-silhouette { width:45px; height:32px; fill:currentColor; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.parasaurus { background:linear-gradient(145deg,#69825a,#9b7241); }
.pteranodon { background:linear-gradient(145deg,#447785,#7da4aa); }.brachiosaurus { background:linear-gradient(145deg,#5f7045,#9b8952); }.ankylosaurus { background:linear-gradient(145deg,#8b6239,#b18a59); }.mammoth { background:linear-gradient(145deg,#596577,#9b8066); }
.species-card.selected { border-color:var(--specimen-accent); background:var(--specimen-wash); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--specimen-accent) 28%,#fff),0 4px 10px #77705c1c; }.model-choice.active,.puzzle-controls button:first-child { background:var(--specimen-accent); border-color:var(--specimen-accent); }.puzzle-progress-track span { background:linear-gradient(90deg,var(--specimen-accent),color-mix(in srgb,var(--specimen-accent) 62%,#d9b760)); }
.puzzle-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:13px; padding-top:12px; border-top:1px dashed #d1ccbf; }
.puzzle-controls[hidden] { display:none; }
.puzzle-controls button { border:1px solid #567a4e; border-radius:7px; background:#315d45; color:#fffdf2; padding:10px 13px; font-size:13px; line-height:1.1; font-weight:700; }
.puzzle-controls button + button { background:#f3f0e4; color:#52614e; border-color:#cec8b7; }
.puzzle-controls span { font-size:10px; color:#6b7568; }
.leaderboard-panel { margin-top:14px; padding-top:13px; border-top:1px dashed #d1ccbf; }
.leaderboard-heading { display:flex; align-items:center; justify-content:space-between; color:#5c6c52; font:10px 'DM Mono'; letter-spacing:.9px; }
.leaderboard-heading button { border:0; background:#e6ecd9; color:#4e714e; width:27px; height:27px; border-radius:50%; font-size:17px; }
.player-account-button { width:100%; margin:9px 0; border:1px solid #8ca16b; border-radius:7px; background:#f1f6e8; color:#405e42; padding:9px 10px; font-size:12px; font-weight:700; }
.leaderboard-filter { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#697568; font-size:10px; }.leaderboard-filter select { min-width:135px; border:1px solid #d0cbbd; border-radius:5px; background:#fffdf5; color:#52614e; padding:5px; font-size:10px; }
.leaderboard-list,.active-players ul { list-style:none; padding:0; margin:9px 0 0; }.leaderboard-list { display:grid; gap:4px; }.leaderboard-list li { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:6px; padding:6px 4px; border-bottom:1px dotted #d5d0c1; color:#53614f; font-size:11px; }.leaderboard-list li>b { color:#ad7830; font:600 12px Fraunces; }.leaderboard-list li span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.leaderboard-list li small { display:block; color:#909383; font-size:9px; text-transform:capitalize; }.leaderboard-list li strong { color:#315d45; font:600 13px 'DM Mono'; }.leaderboard-empty { display:block!important; color:#7a8075!important; font-size:10px!important; line-height:1.4; }
.active-players { margin-top:12px; padding:9px; border-radius:7px; background:#edf1e4; }.active-players>span { color:#64705a; font:9px 'DM Mono'; letter-spacing:.8px; }.active-players ul { display:grid; gap:4px; }.active-players li { display:flex; justify-content:space-between; gap:8px; color:#506049; font-size:10px; }.active-players li small { color:#808879; text-transform:capitalize; }
.auth-modal { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:#17261caa; backdrop-filter:blur(5px); }.auth-modal[hidden] { display:none; }.auth-card { position:relative; width:min(410px,100%); padding:30px; border:1px solid #b8a976; background:linear-gradient(145deg,#fffdf1,#e7dfc4); box-shadow:0 22px 60px #0008; color:#304a35; }.auth-card h2 { margin:3px 0 8px; font:700 31px Fraunces; }.auth-card>p:not(.eyebrow):not(.auth-message) { margin:0 0 17px; color:#5e6957; font:14px/1.4 Fraunces; }.auth-card label { display:grid; gap:5px; margin-top:10px; color:#53634f; font-size:11px; font-weight:700; }.auth-card input { width:100%; border:1px solid #c8c3ae; border-radius:6px; background:#fffdf6; padding:10px; color:#263e2c; }.auth-message { min-height:18px; margin:10px 0 0; color:#89603c; font-size:11px; line-height:1.35; }.auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }.auth-actions button { border:1px solid #315d45; border-radius:6px; background:#315d45; color:#fffdf2; padding:10px; font-size:12px; font-weight:700; }.auth-actions button + button { background:#f6f2e5; color:#486044; border-color:#b6b29f; }.auth-close { position:absolute; top:9px; right:11px; border:0; background:transparent; color:#5c6c57; font-size:25px; }
.password-input-wrap { display:flex; align-items:stretch; }.password-input-wrap input { min-width:0; border-radius:6px 0 0 6px; }.password-toggle { min-width:54px; border:1px solid #c8c3ae; border-left:0; border-radius:0 6px 6px 0; background:#eaf0df; color:#426044; font-size:11px; font-weight:700; }.auth-forgot { margin-top:10px; padding:2px 0; border:0; background:transparent; color:#426447; font-size:11px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }.auth-forgot:hover,.auth-forgot:focus-visible { color:#1f5039; }.auth-actions #authUpdatePassword:not([hidden]) { grid-column:1 / -1; }
.puzzle-hud { position:absolute; z-index:8; inset:18px 22px auto; display:grid; grid-template-columns:auto minmax(210px,360px); align-items:start; justify-content:space-between; gap:16px; pointer-events:none; }.puzzle-hud[hidden] { display:none; }
.puzzle-timer { min-width:112px; padding:10px 13px; border:1px solid #d49b55; border-radius:11px; background:#fff8e8eb; color:#8e4e29; box-shadow:0 6px 17px #5c42272b; text-align:center; }
.puzzle-timer span { display:block; font:9px 'DM Mono'; letter-spacing:.9px; }.puzzle-timer strong { display:block; margin-top:2px; font:700 24px Fraunces; letter-spacing:.7px; }
.puzzle-assembly-progress { padding:10px 12px 11px; border:1px solid #b7c79b; border-radius:11px; background:#fbfaefeb; color:#405b43; box-shadow:0 6px 17px #33412920; }.puzzle-progress-label { display:flex; justify-content:space-between; gap:15px; align-items:baseline; font:9px 'DM Mono'; letter-spacing:.8px; }.puzzle-progress-label strong { color:#537044; font-size:11px; letter-spacing:0; }.puzzle-progress-track { height:8px; margin-top:7px; overflow:hidden; border-radius:20px; background:#dbe2cf; box-shadow:inset 0 1px 2px #6e7c6120; }.puzzle-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#607f4e,#9cbb67); transition:width .28s ease; }
.puzzle-dialog { position:absolute; z-index:9; inset:0; display:grid; place-items:center; padding:22px; background:#2033237d; backdrop-filter:blur(2px); }.puzzle-dialog[hidden],.puzzle-celebration[hidden] { display:none; }
.puzzle-dialog-card { width:min(360px,calc(100% - 22px)); border:1px solid #b6a96f; border-radius:16px; background:linear-gradient(150deg,#fffbea,#e8dfbd); box-shadow:0 20px 50px #1820178a; padding:26px 28px 24px; text-align:center; color:#334a37; }.puzzle-dialog-icon { display:grid; place-items:center; width:47px; height:47px; margin:0 auto 10px; border-radius:50%; background:#dae8c4; font-size:26px; }.puzzle-dialog-card h2 { margin:0; font:700 27px Fraunces; }.puzzle-dialog-card p { margin:10px auto 20px; max-width:292px; color:#5a6755; font:15px/1.45 Fraunces; }.puzzle-dialog-card button { border:0; border-radius:7px; padding:11px 22px; background:#315d45; color:#fffdf2; font-size:14px; font-weight:700; box-shadow:0 3px 0 #193927; }.puzzle-dialog-card button#puzzleRetry { background:#9c5637; box-shadow:0 3px 0 #6c3622; }
.puzzle-celebration { position:absolute; z-index:10; inset:0; overflow:hidden; pointer-events:none; }.celebration-message { position:absolute; top:14%; left:50%; transform:translateX(-50%); min-width:260px; padding:13px 20px; border:1px solid #d6a74f; border-radius:14px; background:#fff9dff2; color:#735326; text-align:center; box-shadow:0 9px 25px #4e381633; animation:celebration-pop .55s ease-out both; }.celebration-message strong { display:block; font:700 25px Fraunces; }.celebration-message span { display:block; margin-top:3px; font-size:12px; }.celebration-particles { position:absolute; inset:0; }.confetti { position:absolute; top:-25px; width:10px; height:17px; background:var(--confetti-color); border-radius:2px; animation:confetti-fall var(--fall-duration) ease-in var(--fall-delay) forwards; }.balloon { position:absolute; bottom:-70px; width:34px; height:43px; border-radius:50% 50% 47% 47%; background:var(--balloon-color); box-shadow:inset -7px -7px 0 #00000012; animation:balloon-rise var(--rise-duration) ease-out var(--rise-delay) forwards; }.balloon:after { content:''; position:absolute; width:1px; height:58px; left:50%; top:41px; background:#746c54; }.balloon:before { content:''; position:absolute; bottom:-4px; left:13px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--balloon-color); }
.viewer-section:fullscreen { width:100vw; height:100vh; background:#18271e; }.viewer-section:fullscreen .puzzle-hud { top:24px; left:28px; right:28px; }.viewer-section:fullscreen .puzzle-assembly-progress { min-width:320px; }.viewer-section:fullscreen .viewer-controls { bottom:26px; }
.adjustment-panel { margin-top:14px; padding-top:12px; border-top:1px dashed #d1ccbf; display:grid; gap:8px; }
.adjustment-title { display:flex; align-items:center; justify-content:space-between; font:10px 'DM Mono'; letter-spacing:.8px; color:#697568; }
.adjustment-title output { font-size:9px; letter-spacing:0; color:#7b806f; }
.slider-control { display:grid; grid-template-columns:92px 1fr; align-items:center; gap:7px; font-size:10px; color:#5e675c; }
.slider-control input, .axis-controls input { width:100%; accent-color:#557a4d; }
.axis-title { margin-top:3px; }
.axis-controls { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.axis-controls label { display:grid; grid-template-columns:11px 1fr; align-items:center; gap:3px; font:10px 'DM Mono'; color:#5e675c; }
.fact p { font-size:15px; line-height:1.48; }
.discovery-card p { font-size:14px; line-height:1.42; }
.timeline-section>p { font-size:13px; line-height:1.35; }
.detail-panel{background:#f8f6ee;border-left:1px solid var(--line);padding:27px 24px 17px;overflow:auto;position:relative;z-index:2;box-shadow:-5px 0 20px #4b4e3610;}.badge{font:10px 'DM Mono';background:#d8cbdf;color:#725d7d;padding:7px 10px;border-radius:5px;letter-spacing:.5px;}.detail-panel h1{font:700 35px Fraunces;margin:14px 0 0;letter-spacing:-1.8px;line-height:37px;}.latin{font:italic 19px Fraunces;color:#6d705e;}.tags{display:flex;flex-wrap:wrap;gap:5px;margin:22px 0;}.tags span{font-size:10px;padding:7px 8px;border-radius:5px;color:#4d6550;background:#dce8cd;}.tags span:nth-child(2){background:#ead3a3;color:#846429}.tags span:nth-child(3){background:#cfe0e8;color:#4b7180}.tags span:nth-child(4){background:#e4d6c7;color:#7e5c47}.details-rule{border-top:1px solid #cbc5b8;}.model-switcher{padding:16px 0 14px;border-bottom:1px dashed #d1ccbf;}.model-switcher>p{margin:0 0 9px;color:#697568;}.model-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;}.model-choice{border:1px solid #cfc8b6;background:#f1eee5;color:#697063;border-radius:7px;padding:8px 4px;font-size:10px;line-height:1.1;}.model-choice.active{background:var(--moss);border-color:var(--moss);color:#fffdf2;}.overlay-toggle{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:11px;color:#5c675b;cursor:pointer;}.overlay-toggle input{position:absolute;opacity:0;}.toggle-track{width:27px;height:16px;border-radius:12px;background:#c5c7bc;position:relative;transition:.2s;flex:0 0 auto;}.toggle-track:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;left:2px;top:2px;transition:.2s;box-shadow:0 1px 2px #4444;}.overlay-toggle input:checked + .toggle-track{background:#728d50;}.overlay-toggle input:checked + .toggle-track:after{left:13px;}.overlay-toggle.disabled{opacity:.36;pointer-events:none;}.fact{display:grid;grid-template-columns:30px 1fr;gap:9px;padding:15px 0;border-bottom:1px dashed #d1ccbf;}.fact-icon{color:#798e58;background:#e0ead5;width:27px;height:27px;border-radius:7px;display:grid;place-items:center;font-size:15px;}.fact:nth-of-type(5) .fact-icon{background:#ead8b8;color:#9b7235}.fact h2{font:600 16px Fraunces;margin:0 0 3px;}.fact p{font:13px Fraunces;line-height:1.3;color:#6f7064;margin:0;}.fact a{display:inline-block;margin-top:6px;color:#426447;font-size:11px;font-weight:700;text-decoration:none;}.field-card{display:flex;align-items:center;justify-content:space-between;border:1px solid #d8ccb1;background:linear-gradient(120deg,#efe8d5,#f8f5eb);border-radius:11px;padding:13px 14px;margin-top:18px;overflow:hidden;}.field-card span{font:9px 'DM Mono';letter-spacing:1px;color:#857b65}.field-card b{font:italic 15px Fraunces;display:block;width:195px;margin-top:5px;color:#596252;}.field-skull{font-size:38px!important;color:#a47a3d!important;transform:rotate(-12deg)}
.welcome-modal{position:fixed;z-index:20;inset:0;background:rgba(11,25,18,.68);backdrop-filter:blur(5px);display:grid;place-items:center;transition:opacity .55s,visibility .55s;}.welcome-modal.hidden{opacity:0;visibility:hidden;}.welcome-card{width:min(470px,calc(100vw - 38px));min-height:390px;text-align:center;position:relative;overflow:hidden;border:1px solid #b5a978;background:radial-gradient(circle at 50% 16%,#f5edcd,#d8cda9 65%,#b9ae84);box-shadow:0 25px 80px #0008;padding:54px 47px 35px;color:#203b2b;}.welcome-card:before,.welcome-card:after{content:'';position:absolute;width:150px;height:150px;border:1px solid #66804e;opacity:.45;border-radius:48% 52% 59% 41%;}.welcome-card:before{left:-81px;bottom:-70px}.welcome-card:after{right:-84px;top:-72px}.welcome-sun{position:absolute;width:120px;height:120px;border:1px solid #bd9955;border-radius:50%;left:50%;top:-64px;transform:translateX(-50%);box-shadow:0 0 0 16px #e9dcae77,0 0 0 33px #e9dcae4d;}.bones{position:absolute;color:#56724c;opacity:.5;font-size:34px}.bones-a{left:29px;top:92px;transform:rotate(-32deg)}.bones-b{right:32px;top:86px;transform:rotate(30deg)}.eyebrow{position:relative;font:10px 'DM Mono';letter-spacing:3px;margin:20px 0 8px;color:#63734f;}.welcome-card h2{font:600 54px Fraunces;letter-spacing:-3px;margin:0;position:relative;}.welcome-card h2 span{color:#a56d2f}.welcome-copy{font:16px Fraunces;line-height:1.45;margin:25px auto 27px;max-width:305px;color:#4f5c45;position:relative;}.welcome-card button{position:relative;border:0;background:#2c5a41;color:#fffbea;padding:13px 20px;border-radius:3px;font-weight:700;box-shadow:0 4px 0 #1a3829;transition:.2s;}.welcome-card button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #1a3829}.welcome-card button span{font-size:20px;margin-left:8px}.welcome-card small{position:relative;display:block;margin-top:17px;color:#718060;font-size:10px;}
.fact p { font-size:15px; line-height:1.48; }
.discovery-card p { font-size:14px; line-height:1.42; }
.timeline-section>p { font-size:13px; line-height:1.35; }
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes celebration-pop { 0% { opacity:0; transform:translate(-50%,-18px) scale(.82); } 100% { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes confetti-fall { 0% { opacity:0; transform:translate3d(0,-20px,0) rotate(0deg); } 10% { opacity:1; } 100% { opacity:0; transform:translate3d(var(--drift),calc(100vh + 85px),0) rotate(760deg); } }
@keyframes balloon-rise { 0% { opacity:0; transform:translate3d(0,20px,0) rotate(-4deg); } 10% { opacity:1; } 100% { opacity:0; transform:translate3d(var(--balloon-drift),calc(-100vh - 120px),0) rotate(8deg); } }
@media(max-width:1220px){.app-shell{grid-template-columns:58px 275px minmax(420px,1fr) 325px}.collection-panel{padding-right:13px}.topbar{padding:0 19px}.back-link{font-size:13px}.specimen-label{min-width:190px}.detail-panel{padding:23px 18px}.detail-panel h1{font-size:31px}.timeline-section{padding-left:30px;padding-right:30px}}
@media(max-width:940px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;grid-template-columns:58px 1fr;grid-template-rows:auto auto}.collection-panel{display:none}main{grid-column:2;min-height:690px;grid-template-rows:84px 510px 142px}.detail-panel{grid-column:2;padding:26px;overflow:visible;border-top:1px solid var(--line)}.detail-panel .fact{max-width:620px}.rail{position:sticky;top:0;height:100vh}.top-actions{display:none}.topbar{padding:0 25px}.view-tools{right:14px}.viewer-controls input{width:130px}}
@media(max-width:620px){.app-shell{display:block}.rail{height:58px;width:100%;position:relative;flex-direction:row;padding:6px 11px;border-bottom:1px solid var(--line)}.rail-logo{margin:0 12px 0 0;width:36px;height:36px}.rail nav{display:flex;gap:3px;overflow:auto}.rail-link{display:flex;min-width:57px;padding:3px 5px}.rail-link small{font-size:8px}.rail-icon{font-size:16px}.sound-button{margin:0 0 0 auto;flex:0 0 auto}main{min-height:640px;grid-template-rows:78px 430px 132px}.topbar{padding:0 16px}.back-link{font-size:11px}.specimen-label{min-width:170px;padding:6px 12px}.specimen-label strong{font-size:19px}.specimen-label em{font-size:12px}.viewer-hint{font-size:9px;top:7px}.view-tools{top:auto;bottom:75px;transform:none;right:12px;display:flex;border-radius:16px}.tool{width:45px;height:42px;font-size:14px}.viewer-controls{bottom:12px}.timeline-section{padding:9px 15px}.timeline-title strong{font-size:12px}.timeline-section>p{font-size:10px}.detail-panel{padding:21px 18px}.welcome-card{padding:45px 28px 30px;min-height:370px}.welcome-card h2{font-size:47px}.welcome-copy{font-size:15px}.loading-state{top:43%}.puzzle-hud{inset:10px 11px auto;grid-template-columns:100px minmax(130px,1fr);gap:8px}.puzzle-timer{padding:7px 8px}.puzzle-timer strong{font-size:19px}.puzzle-assembly-progress{padding:7px 8px}.puzzle-progress-label{font-size:7px}.puzzle-progress-label strong{font-size:9px}.puzzle-progress-track{height:6px;margin-top:5px}.viewer-section:fullscreen .puzzle-hud{top:14px;left:15px;right:15px}.viewer-section:fullscreen .puzzle-assembly-progress{min-width:0}}

/* Mobile and tablet navigation: the collection remains available as a touch drawer. */
.mobile-menu-toggle,.collection-backdrop { display:none; }
@media (max-width:940px) {
  html,body { min-height:100%; overflow-x:hidden; }
  body.collection-drawer-open { overflow:hidden; }
  .app-shell { height:auto; min-height:100vh; overflow:visible; }
  .collection-panel { display:flex; position:fixed; z-index:40; inset:0 auto 0 0; width:min(370px,92vw); padding:22px 18px 18px; transform:translateX(-105%); transition:transform .28s ease; box-shadow:12px 0 36px #1a251b55; overscroll-behavior:contain; }
  .collection-panel.mobile-open { transform:translateX(0); }
  .collection-backdrop { display:block; position:fixed; z-index:35; inset:0; border:0; padding:0; background:#17251a8a; opacity:0; pointer-events:none; transition:opacity .28s ease; }
  .collection-backdrop.visible { opacity:1; pointer-events:auto; }
  .mobile-menu-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid #c9c3af; border-radius:8px; background:#faf8ef; color:#365d45; padding:8px 10px; font-size:12px; font-weight:700; box-shadow:0 2px 5px #60624a18; }
  .mobile-menu-toggle span { font-size:18px; line-height:12px; }
  .topbar { justify-content:center; gap:14px; }
  .top-actions { display:flex; gap:6px; }
  main { min-height:0; }
  .detail-panel { min-width:0; }
}
@media (max-width:620px) {
  .topbar { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 8px; padding:8px 12px; }
  .mobile-menu-toggle { white-space:nowrap; padding:8px; font-size:11px; }
  .specimen-label { min-width:0; width:100%; }
  .specimen-label span { font-size:8px; letter-spacing:1.4px; }
  .specimen-label strong { font-size:18px; line-height:20px; }
  .specimen-label em { font-size:11px; }
  .top-actions { grid-column:1 / -1; justify-content:center; width:100%; }
  .share-status { grid-column:1 / -1; }
  main { grid-template-rows:118px 430px 132px; }
  .detail-panel { padding:22px 16px 34px; }
  .model-buttons { grid-template-columns:1fr; }
  .model-choice { min-height:42px; font-size:12px; }
  .overlay-toggle { font-size:12px; }
  .puzzle-controls button { flex:1 1 140px; min-height:44px; }
  .slider-control { grid-template-columns:88px 1fr; font-size:11px; }
  .fact { grid-template-columns:30px minmax(0,1fr); }
  .fact p { font-size:15px; line-height:1.5; }
}

/* Labeled social sharing controls replace the previous notebook and comparison actions. */
.top-actions { align-items:flex-start; }
.share-action { border:0; background:transparent; color:#42604b; display:grid; justify-items:center; gap:2px; min-width:46px; padding:3px 2px; }
.share-action:hover,.share-action:focus-visible { color:#1e4e39; outline:none; }
.share-icon { width:24px; height:24px; display:grid; place-items:center; border:1px solid #c9d5bd; border-radius:50%; background:#edf2e4; font:700 15px/1 'DM Sans',sans-serif; }
.share-action small { font-size:8px; white-space:nowrap; }
.share-status { position:absolute; top:80px; right:22px; max-width:230px; color:#42604b; font-size:10px; text-align:right; }
@media (max-width:940px) { .share-status { top:76px; right:20px; } }
@media (max-width:620px) { .share-action { min-width:56px; } .share-action small { font-size:8px; } .share-status { position:static; min-height:12px; max-width:none; text-align:center; } }
@media (max-width:940px) and (orientation:landscape) and (max-height:560px) {
  .rail { position:relative; height:58px; width:100%; flex-direction:row; padding:6px 11px; }
  .rail-logo { margin:0 12px 0 0; width:36px; height:36px; }
  .rail nav { display:flex; gap:4px; overflow:auto; }
  .rail-link { display:flex; min-width:60px; padding:3px 6px; }
  .app-shell { display:block; }
  main { grid-template-rows:68px minmax(360px,78vh) auto; }
  .timeline-section { padding:8px 20px 12px; }
  .detail-panel { padding:20px 24px 32px; }
}

/* Account and leaderboard controls remain readable and touch-friendly on tablets and phones. */
@media (max-width:940px) {
  .model-switcher { max-width:680px; }
  .leaderboard-panel { width:100%; max-width:680px; }
  .leaderboard-heading { font-size:11px; }
  .leaderboard-heading button { width:36px; height:36px; font-size:20px; cursor:pointer; }
  .player-account-button { min-height:44px; font-size:13px; cursor:pointer; }
  .leaderboard-filter { min-height:42px; font-size:12px; }
  .leaderboard-filter select { min-height:36px; padding:7px 9px; font-size:12px; }
  .leaderboard-list li { grid-template-columns:24px minmax(0,1fr) auto; min-height:42px; padding:7px 5px; font-size:12px; }
  .leaderboard-list li>b { font-size:14px; }
  .leaderboard-list li small,.active-players li { font-size:10px; }
  .leaderboard-list li strong { font-size:14px; }
  .active-players { padding:11px; }
  .active-players>span { font-size:10px; }
  .auth-modal { align-items:center; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .auth-card { margin:auto; }
}

@media (max-width:620px) {
  .detail-panel { padding-bottom:max(34px, env(safe-area-inset-bottom)); }
  .leaderboard-panel { margin-top:18px; padding-top:16px; }
  .leaderboard-heading { font-size:10px; }
  .leaderboard-filter { display:grid; grid-template-columns:1fr; align-items:stretch; gap:5px; }
  .leaderboard-filter select { width:100%; min-width:0; }
  .leaderboard-list li { grid-template-columns:22px minmax(0,1fr) auto; gap:7px; }
  .active-players li { min-height:28px; align-items:center; font-size:11px; }
  .auth-modal { align-items:start; padding:12px; padding-top:max(12px, env(safe-area-inset-top)); padding-bottom:max(12px, env(safe-area-inset-bottom)); }
  .auth-card { width:100%; max-height:calc(100dvh - 24px); overflow-y:auto; padding:27px 19px 21px; }
  .auth-card h2 { font-size:28px; line-height:1; }
  .auth-card>p:not(.eyebrow):not(.auth-message) { font-size:14px; }
  .auth-card input { min-height:46px; padding:11px; font-size:16px; }
  .auth-actions button { min-height:46px; font-size:13px; }
}