@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=Space+Grotesk:wght@400;500;700&display=swap";html,body,#root{width:100%;min-height:100%}body{margin:0}:root{--bg-0: #09131f;--bg-1: #0f2235;--bg-2: #152f47;--panel: #12273a;--panel-alt: #0d1f30;--line: #2e4a63;--text: #e8f2ff;--muted: #9db4ca;--accent: #1ecad3;--accent-2: #1e93ff;--danger: #ff5b64;--success: #3bd087;--warning: #ffb54c;--shadow: 0 24px 50px rgba(3, 8, 14, .4)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%}body{font-family:Space Grotesk,Hiragino Sans,Noto Sans JP,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 15%,rgba(30,147,255,.2),transparent 40%),radial-gradient(circle at 80% 10%,rgba(30,202,211,.18),transparent 45%),linear-gradient(160deg,var(--bg-0),var(--bg-1) 50%,var(--bg-2));overflow-x:hidden}.app{min-height:100vh;width:100%;margin:0;display:flex;flex-direction:column;position:relative;isolation:isolate}.app:before{content:none}.header{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(180deg,#08121ceb,#08121cad);border-bottom:1px solid rgba(63,104,136,.45);padding:.9rem 1rem .75rem}.header h1{font-family:Chakra Petch,Space Grotesk,sans-serif;font-size:1.45rem;letter-spacing:.08em;text-transform:uppercase}.tagline{margin-top:.3rem;color:var(--muted);font-size:.85rem}.nav-tabs{margin-top:.85rem;display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.nav-tab{appearance:none;border:1px solid rgba(80,133,170,.45);border-radius:12px;color:#d7ebff;background:linear-gradient(180deg,#173247cc,#0e2031f2);padding:.7rem .8rem;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.nav-tab:hover{border-color:#74b8e6cc;transform:translateY(-1px)}.nav-tab.active{border-color:#1ecad3e6;background:linear-gradient(180deg,#12617ceb,#0b4259fa);box-shadow:0 0 0 1px #1ecad338,0 8px 20px #0b3e5673}.main{flex:1;width:100%;max-width:1480px;margin:0 auto;padding:1rem}.view-panel{width:100%}.view-panel.is-hidden{display:none}.footer{padding:.7rem 1rem 1rem;text-align:center;color:#8da7be;font-size:.8rem}.capture-section,.collection-section,.discovery-section,.scanning-section{background:linear-gradient(180deg,#0a1825eb,#0a1825bf);border:1px solid rgba(60,96,124,.48);border-radius:20px;padding:.95rem;box-shadow:var(--shadow)}.capture-layout{display:grid;gap:.95rem}.camera-frame{width:100%;aspect-ratio:4 / 3;min-height:260px;border-radius:16px;overflow:hidden;border:1px solid rgba(86,136,170,.52);background:radial-gradient(circle at 40% 20%,#20405bcc,#0a1723eb);position:relative}.camera-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(168,210,255,.07),transparent 35%,rgba(14,25,37,.3));pointer-events:none}.preview-image{width:100%;height:100%;object-fit:contain}.empty-camera{height:100%;display:grid;place-items:center;text-align:center;color:#b9d7f5;gap:.55rem}.camera-icon{font-size:3rem;opacity:.8}.empty-camera p{padding:0 1rem;font-size:.9rem;color:#9ec1e4}.capture-side{display:grid;gap:.85rem;align-content:start}.controls{display:grid;gap:.65rem}.visibility-select-label{display:grid;gap:.35rem;color:#c8ddf5;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700}.visibility-select{width:100%;border:1px solid rgba(91,144,176,.7);background:#0c2233eb;color:#e7f2ff;border-radius:10px;padding:.72rem .75rem;font-family:inherit;font-weight:600}.visibility-help{margin-top:-.05rem;color:#9ec1e2;font-size:.78rem;line-height:1.45}.result-save-mode{margin-top:.85rem}.save-mode-toggle{margin-top:.45rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.save-mode-option{border:1px solid rgba(88,137,169,.65);border-radius:11px;background:linear-gradient(180deg,#0d2436f2,#0a1a28e6);color:#cde5ff;padding:.72rem .75rem;font-size:.82rem;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:border-color .2s ease,transform .2s ease,background .2s ease}.save-mode-option.active{border-color:#1ecad3f2;background:linear-gradient(180deg,#195c74f2,#0d3e54f2);color:#ecfcff}.save-mode-option:hover{transform:translateY(-1px)}.save-mode-option:disabled{opacity:.65;cursor:not-allowed}.capture-button,.scan-button,.continue-button,.start-capture-button,.download-button{width:100%;border:none;border-radius:12px;color:#051520;font-weight:700;font-family:Space Grotesk,sans-serif;cursor:pointer;padding:.85rem 1rem;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.capture-button,.scan-button,.continue-button,.start-capture-button,.download-button:disabled{opacity:.9}.capture-button{background:linear-gradient(180deg,#52e7a6,#2fbc7f);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 24px #1e644866}.scan-button{background:linear-gradient(180deg,#3ed7ff,#2a9cff);box-shadow:0 10px 24px #1561a06b}.scan-button:disabled{cursor:not-allowed;opacity:.6}.download-button{margin-top:.8rem;background:linear-gradient(180deg,#ffe089,#ffbe4c);box-shadow:0 10px 24px #885d0a59}.continue-button,.start-capture-button{margin-top:.8rem;background:linear-gradient(180deg,#8bd4ff,#3ca8ff);box-shadow:0 10px 24px #134f8059}.capture-button:hover,.scan-button:hover,.continue-button:hover,.start-capture-button:hover,.download-button:hover{transform:translateY(-1px)}button:focus-visible,.capture-button:focus-visible,.save-mode-option:focus-visible,.collection-filter:focus-visible,.detail-close-button:focus-visible,.detail-nav-button:focus-visible,.visibility-select:focus-visible{outline:2px solid rgba(130,223,255,.9);outline-offset:2px}.capture-hint-panel{border:1px solid rgba(76,121,152,.55);border-radius:12px;padding:.8rem;background:linear-gradient(180deg,#0e2335ed,#0a1a28bf)}.capture-hint-panel h3{font-family:Chakra Petch,Space Grotesk,sans-serif;font-size:.95rem;margin-bottom:.45rem;letter-spacing:.04em}.capture-hint-panel p{font-size:.84rem;color:var(--muted);line-height:1.4}.error-message{margin-top:.85rem;border:1px solid rgba(255,91,100,.7);background:linear-gradient(180deg,#58171fe6,#420e16f2);border-radius:12px;color:#ffe4e6;padding:.72rem .85rem;font-size:.86rem}.publish-success-message{margin-top:.85rem;border:1px solid rgba(59,208,135,.65);background:linear-gradient(180deg,#144d3aeb,#0d3b2ce6);border-radius:12px;color:#d9ffec;padding:.72rem .85rem;font-size:.86rem}.scanning-section{min-height:56vh;display:grid;place-items:center;text-align:center;gap:.65rem}.scan-animation{position:relative;width:150px;height:150px}.scan-circle{position:absolute;inset:40px;border-radius:999px;border:2px solid rgba(88,206,255,.8);animation:pulse 2.2s ease-out infinite}.scan-circle.delay-1{animation-delay:.5s}.scan-circle.delay-2{animation-delay:1s}@keyframes pulse{0%{transform:scale(.52);opacity:1}to{transform:scale(1.45);opacity:0}}.discovery-section{animation:reveal .35s ease}@keyframes reveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.discovery-header{border-radius:14px;padding:.85rem;background:linear-gradient(110deg,#ffc66033,#23577c3d);border:1px solid rgba(255,181,76,.45)}.discovery-header h2{font-family:Chakra Petch,sans-serif;font-size:1.18rem;letter-spacing:.03em}.discovery-subtitle{margin-top:.4rem;color:#ffd9a0;font-size:.86rem}.creature-card{margin-top:.95rem;padding:.85rem;border-radius:16px;border:1px solid rgba(84,124,153,.5);background:linear-gradient(180deg,#0d2031f2,#0a1927d1);display:grid;gap:.85rem}.creature-image{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid rgba(86,133,162,.55);background:var(--panel-alt)}.creature-image img{width:100%;height:100%;object-fit:contain}.creature-name{font-family:Chakra Petch,sans-serif;font-size:1.4rem;letter-spacing:.05em;margin-bottom:.7rem}.creature-stats{border-radius:12px;border:1px solid rgba(72,111,140,.55);background:#0c1f2fe0;padding:.7rem}.stat-row{display:flex;justify-content:space-between;gap:.8rem;padding:.52rem 0;border-bottom:1px solid rgba(62,93,117,.5)}.stat-row:last-child{border-bottom:none}.stat-label{color:var(--muted);font-size:.82rem}.stat-value{font-weight:600;text-align:right;font-size:.84rem}.type-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .64rem;color:#092130;background:linear-gradient(180deg,#94f5ff,#4dccf1)}.creature-id{margin-top:.65rem;color:#8ca7bf;font-size:.75rem;line-height:1.45}.loading-collection,.empty-collection{min-height:52vh;display:grid;place-items:center;text-align:center;color:#c6dff9}.spinner{width:46px;height:46px;border-radius:999px;border:3px solid rgba(129,174,207,.4);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-icon{font-size:3rem;opacity:.88}.collection-layout{display:grid;gap:.95rem}.collection-main{min-width:0}.collection-header{margin-bottom:.75rem}.collection-header h2{font-family:Chakra Petch,sans-serif;font-size:1.24rem;letter-spacing:.05em}.collection-count{color:var(--muted);margin-top:.22rem;font-size:.88rem}.collection-filters{margin-top:.65rem;display:flex;flex-wrap:wrap;gap:.45rem}.collection-filter{border:1px solid rgba(87,131,161,.65);border-radius:999px;background:#0d2132eb;color:#c9e3ff;padding:.36rem .72rem;font-size:.74rem;font-weight:700;letter-spacing:.03em;cursor:pointer}.collection-filter.active{border-color:#50cbe3f2;background:linear-gradient(180deg,#1a6078f2,#10465bf2);color:#ecfdff}.collection-grid{display:grid;grid-template-columns:1fr;gap:.75rem}.collection-infinite-sentinel{width:100%;height:1px}.collection-loading-more{margin-top:.75rem;color:#8ab6d6;font-size:.82rem;text-align:center}.collection-filter-empty{border:1px dashed rgba(95,138,167,.6);border-radius:14px;padding:1rem;text-align:center;color:#a9c6df;background:#0c1e2db8}.collection-card{border-radius:14px;border:1px solid rgba(89,128,157,.52);background:#0b1c2af0;padding:.78rem;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.collection-card:hover{transform:translateY(-1px);border-color:#7cb7dee0;box-shadow:0 10px 24px #04121d57}.collection-card-header{display:flex;justify-content:space-between;align-items:center;gap:.65rem;margin-bottom:.52rem}.collection-creature-name{font-family:Chakra Petch,sans-serif;font-size:1rem}.collection-type-badge{border-radius:999px;padding:.2rem .55rem;font-size:.72rem;color:#082537;background:linear-gradient(180deg,#9cf6ff,#57d4ff);font-weight:700}.collection-thumb{width:100%;aspect-ratio:16 / 10;border-radius:10px;overflow:hidden;border:1px solid rgba(79,118,147,.5);margin-bottom:.5rem}.collection-thumb img{width:100%;height:100%;object-fit:cover;display:block}.collection-thumb-placeholder{display:grid;place-items:center;background:linear-gradient(180deg,#143046e6,#0e2031d9);color:#9fb9d2;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}.collection-stat{display:flex;justify-content:space-between;gap:.7rem;border-bottom:1px solid rgba(59,89,111,.5);padding:.35rem 0}.collection-stat:last-child{border-bottom:none}.collection-stat-label{color:var(--muted);font-size:.78rem}.collection-stat-value{font-size:.8rem;text-align:right}.collection-card-footer{margin-top:.48rem;color:#91acc4;font-size:.75rem;line-height:1.45}.collection-card-footer small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.collection-detail{border-radius:16px;border:1px solid rgba(106,146,176,.6);background:#0e2233f7;padding:.85rem}.collection-modal-backdrop{display:none}.collection-detail-header{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin-bottom:.65rem}.collection-detail-header h3{font-family:Chakra Petch,sans-serif;font-size:1rem}.detail-close-button{border:1px solid rgba(112,146,173,.45);border-radius:9px;background:#182f42d1;color:#d2e7fb;padding:.42rem .68rem;font-weight:600;font-size:.74rem;cursor:pointer}.detail-nav-button{border:1px solid rgba(86,141,179,.72);border-radius:9px;background:linear-gradient(180deg,#1a506ef0,#113a52f5);color:#e7f6ff;padding:.42rem .68rem;font-weight:700;font-size:.74rem;cursor:pointer}.detail-nav-button:disabled{opacity:.48;cursor:not-allowed}.collection-detail-image{border-radius:10px;overflow:hidden;border:1px solid rgba(83,130,160,.58)}.collection-detail-image img{width:100%;height:auto;display:block}.collection-detail-description{margin-top:.62rem;color:#cfe2f4;font-size:.87rem;line-height:1.5}.collection-detail-meta{margin-top:.6rem}.collection-detail-empty{display:grid;gap:.65rem}.detail-capture-button{margin-top:.2rem}@media(min-width:720px){.header{padding:1rem 1.2rem .85rem}.header h1{font-size:1.7rem}.main,.capture-section,.collection-section,.discovery-section,.scanning-section{padding:1.2rem}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.creature-card{grid-template-columns:minmax(230px,.82fr) minmax(0,1fr);align-items:start}.creature-image{margin-bottom:0}}@media(max-width:719px){.collection-modal-backdrop{display:block;position:fixed;inset:0;border:none;background:#040c14b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:70}.collection-detail{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:86vh;overflow:auto;z-index:80;box-shadow:0 26px 48px #02080f85}}@media(min-width:1040px){.header{padding:1rem 1.5rem .9rem}.header h1{font-size:2.05rem}.tagline{font-size:.95rem}.nav-tabs{width:420px;margin-top:.9rem}.main{padding:1.3rem 1.5rem 1.5rem}.capture-layout{grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);align-items:stretch}.camera-frame{min-height:530px}.controls{gap:.78rem}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-layout{grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);align-items:start}.collection-detail{position:sticky;top:86px}}@media(min-width:1320px){.main{padding:1.6rem 1.9rem 2rem}.capture-section,.collection-section,.discovery-section,.scanning-section{padding:1.45rem}.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.creature-name{font-size:1.7rem}.discovery-header h2{font-size:1.4rem}}