:root{--bg:#d4efe3;--bg-card:#ffffffe0;--ink:#2a3d35;--muted:#4a6358;--faint:#6b8578;--line:#78a89173;--rail:#a8d9c4;--rail-deep:#8fcbb0;--rail-highlight:#c5ead8;--accent:#3d6b5c;--radius-lg:1.5rem;--radius-md:1rem;--radius-sm:.75rem;--radius-pill:9999px;--shadow-soft:0 4px 24px #2d5a4814;--shadow-btn:0 2px 12px #2d5a481f;letter-spacing:.02em;color:var(--ink);background-color:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Nunito,system-ui,sans-serif;font-weight:400;line-height:1.7}*{box-sizing:border-box}body{margin:0}h1,h2,h3,h4{letter-spacing:.02em;font-family:Nunito,system-ui,sans-serif;font-weight:700}h1,h2,h3,p{margin:0}h1{margin-top:.5rem;font-size:clamp(1.9rem,4vw,2.5rem);font-weight:700;line-height:1.28}h2{font-size:clamp(1.45rem,2.8vw,1.95rem);font-weight:700;line-height:1.35}.page{isolation:isolate;background:var(--bg);flex-direction:column;align-items:stretch;min-height:100dvh;padding:0;display:flex;position:relative}.page-vertical{box-sizing:border-box;flex-direction:column;flex:1;justify-content:center;width:100%;min-height:0;padding:.75rem 0 1.5rem;display:flex}.page-vertical--align-top{justify-content:flex-start}.page-main-row{box-sizing:border-box;flex-direction:row;justify-content:flex-start;align-items:stretch;width:100%;margin:0;padding:0 1rem;display:flex}.app-panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);width:100%;max-width:min(96rem,100%);box-shadow:var(--shadow-soft);flex-direction:row;align-items:stretch;min-width:0;margin:0 auto;display:flex;overflow:hidden}.page-vertical--align-top .page-main-row{align-items:flex-start}.page:before{content:"";z-index:0;opacity:.42;pointer-events:none;background-image:url(../wallpaper.svg);background-repeat:repeat;background-size:300px 300px;position:fixed;inset:0}.top-shell{z-index:1;background:linear-gradient(145deg, var(--rail-highlight) 0%, var(--rail) 42%, var(--rail-deep) 100%);border-bottom:none;border-right:none;flex-direction:column;flex-shrink:0;justify-content:center;align-items:stretch;width:auto;min-width:11.5rem;margin:0;padding:1.15rem .9rem 1.15rem 1.05rem;display:flex;position:relative;box-shadow:inset -1px 0 #2d5a4812}.top-tabs{flex-direction:column;justify-content:center;align-items:stretch;gap:.55rem;width:100%;min-width:0;margin:0;padding:0;display:flex}.top-tab{border-radius:var(--radius-pill);color:var(--muted);letter-spacing:.04em;text-transform:none;cursor:pointer;background:#ffffff61;border:1px solid #ffffff8c;flex:none;padding:.55rem 1.15rem;font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;transition:background .18s,color .18s,box-shadow .18s,border-color .18s;box-shadow:0 1px 2px #2d5a480f}.top-tab:hover{color:var(--ink);background:#ffffffc7;border-color:#ffffffd9}.top-tab--active{color:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-btn);background:linear-gradient(145deg,#4d8a74 0%,#3d6b5c 100%);border-color:#2d5a4847}.content-shell{z-index:0;background:#f7fbfa;flex-direction:column;flex:auto;align-items:center;width:100%;min-width:0;margin:0;padding:1.35rem 1.5rem 1.5rem;display:flex;position:relative}.content-shell>.card{width:100%;max-width:52rem}.app-panel .card{box-shadow:none;background:0 0;border:none;border-radius:0;padding-left:0;padding-right:0}.card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-card);width:100%;box-shadow:var(--shadow-soft);margin-top:0;padding:2.25rem 1.85rem;position:relative}.subtitle{color:var(--muted);max-width:40rem;margin-top:.95rem;font-size:1.05rem;font-weight:500;line-height:1.68}.intro-tagline{margin-top:.85rem}.intro-warning{border-radius:var(--radius-md);background:linear-gradient(165deg,#fef3c78c 0%,#fde68a47 100%);border:1px solid #b4530959;margin:1.35rem 0 0;padding:1rem 1.05rem;box-shadow:inset 0 1px #ffffffa6}.intro-warning-title{color:var(--ink);letter-spacing:.02em;font-family:Nunito,sans-serif;font-size:.95rem;font-weight:800;line-height:1.35;display:block}.intro-warning-body{color:var(--muted);margin:.55rem 0 0;font-size:.92rem;font-weight:600;line-height:1.55}.pill{letter-spacing:.08em;text-transform:uppercase;width:fit-content;color:var(--faint);border-radius:var(--radius-pill);background:#ffffff8c;border:none;padding:.35rem .75rem;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:700}.axis-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.75rem 0 2rem;display:grid}.axis-grid article{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff80;padding:1.1rem 1rem}.axis-grid article h3{margin-bottom:.4rem;font-family:Nunito,sans-serif;font-size:1.05rem;font-weight:700}.axis-grid article p{color:var(--muted);font-size:.92rem;font-weight:500;line-height:1.58}.axis-snippet{color:var(--muted);margin-top:.5rem;font-size:.95rem;font-weight:600;line-height:1.55}.btn{color:var(--ink);border-radius:var(--radius-md);letter-spacing:.02em;text-align:left;cursor:pointer;background:#ffffffbf;border:1px solid #0000;padding:1rem 1.2rem;font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1.5;transition:background .18s,color .18s,transform .15s,box-shadow .18s;box-shadow:inset 0 1px #ffffffe6}.btn:hover{box-shadow:var(--shadow-soft);background:#fff;transform:translateY(-1px)}.btn-primary{text-align:center;background:linear-gradient(145deg, #5a9e86 0%, var(--accent) 100%);color:#fff;width:100%;box-shadow:var(--shadow-btn);border-color:#ffffff40;font-weight:700}.btn-primary:hover{color:#fff;background:linear-gradient(145deg,#4d8a74 0%,#335a4d 100%);transform:translateY(-1px)}.quiz-head{gap:.75rem;display:grid}.quiz-head-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.quiz-head-pill{min-width:0;max-width:100%;margin:0}.quiz-back-btn{text-align:center;box-shadow:none;flex-shrink:0;padding:.55rem 1rem;font-size:.92rem;font-weight:700}.option-btn--selected{background:#3d6b5c1c;border-color:#3d6b5c8c;box-shadow:0 0 0 1px #3d6b5c26}.option-btn--selected:hover{background:#3d6b5c29}.progress-wrap{border-radius:var(--radius-pill);background:#ffffff8c;height:10px;overflow:hidden;box-shadow:inset 0 1px 3px #2d5a481f}.progress{border-radius:var(--radius-pill);background:linear-gradient(90deg,#7ec4a8,#4d8a74);height:100%;transition:width .22s}.quiz-card h2{margin:1.15rem 0 1.25rem;font-size:clamp(1.28rem,2.2vw,1.55rem);font-weight:700;line-height:1.42}.options{gap:.85rem;display:grid}.option-btn{display:block}.result-card h2{margin-top:.5rem}.result-archetype-panel{border-radius:var(--radius-md);border:1px solid var(--line);background:linear-gradient(165deg,#ffffffeb 0%,#f5faf7e0 100%);margin-top:.75rem;padding:1.35rem 1.25rem 1.4rem;box-shadow:0 4px 18px #2d5a4812}.result-archetype-panel .type-modal-hero{margin-top:0}.result-share-hint{color:var(--muted);margin:1rem 0 0;font-size:.88rem;font-weight:500;line-height:1.55}.result-actions{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.75rem;margin-top:2rem;display:grid}.result-actions .btn{text-align:center}.result-actions .btn:not(.btn-primary){border:1px solid var(--line);background:#ffffffa6}.type-overview{margin-top:.5rem}.type-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:1.25rem;display:grid}.type-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff8c;margin:0;padding:1rem .95rem;box-shadow:0 2px 10px #2d5a480f}.type-card--clickable{text-align:center;width:100%;min-height:12rem;font:inherit;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;transition:border-color .15s,box-shadow .15s,transform .12s;display:flex}.type-card-rarity{letter-spacing:.08em;text-transform:uppercase;opacity:.95;margin-top:.5rem;font-size:.74rem;font-weight:800;line-height:1.2}.type-card--clickable:hover{border-color:#3d6b5c73;transform:translateY(-1px);box-shadow:0 6px 22px #2d5a481f}.type-card--clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.type-card-code{letter-spacing:.14em;color:var(--faint);margin:0 0 .65rem;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:800}.type-card-avatar{background:linear-gradient(145deg,#fffffff2 0%,#3d6b5c1f 100%);border:1px solid #3d6b5c33;border-radius:50%;justify-content:center;align-items:center;width:4.25rem;height:4.25rem;margin:0 0 .75rem;font-size:2.15rem;line-height:1;display:flex}.type-card-beast{color:var(--ink);letter-spacing:.02em;margin:0;font-family:Nunito,sans-serif;font-size:1.35rem;font-weight:800;line-height:1.3}.type-rarity-legend{color:var(--muted);margin:.4rem 0 0;font-size:.83rem;font-weight:600;line-height:1.5}.type-rarity-chip{font-weight:800}.type-rarity-chip--common{color:#6b7280}.type-rarity-chip--uncommon{color:#3b82f6}.type-rarity-chip--rare{color:#d4a017}.type-rarity-chip--anomaly{color:#8b5cf6}.type-rarity-note{opacity:.9;font-weight:500}.type-modal-backdrop{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1c2a266b;justify-content:center;align-items:center;padding:.8rem;display:flex;position:fixed;inset:0}.type-modal{border-radius:var(--radius-md);border:1px solid var(--line);background:linear-gradient(165deg,#fffffffa 0%,#f5faf7f5 100%);width:min(56rem,100%);max-height:min(98dvh,200rem);padding:1.45rem 1.45rem 1.6rem;position:relative;overflow-y:auto;box-shadow:0 18px 48px #1c2a262e}.type-modal-close{border:none;border:1px solid var(--line);cursor:pointer;width:2.25rem;height:2.25rem;color:var(--ink);background:#ffffffd9;border-radius:50%;justify-content:center;align-items:center;font-size:1.35rem;line-height:1;transition:background .12s;display:flex;position:absolute;top:.65rem;right:.65rem}.type-modal-close:hover{background:#3d6b5c1f}.type-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.type-modal-hero{justify-content:center;margin:.25rem 0 .75rem;display:flex}.type-modal-emoji{background:linear-gradient(160deg,#fffffffa 0%,#3d6b5c24 100%);border:1px solid #3d6b5c38;border-radius:50%;justify-content:center;align-items:center;width:5rem;height:5rem;font-size:2.6rem;line-height:1;display:flex}.archetype-invalid-msg{text-align:center;color:var(--ink);margin:0;font-family:Nunito,sans-serif;font-size:1.05rem;font-weight:700;line-height:1.45}.archetype-invalid-sub{text-align:center;color:var(--muted);margin:.65rem 0 0;font-size:.94rem;font-weight:500;line-height:1.55}.quiz-empty-msg{color:var(--muted);margin:0 0 1.25rem;font-size:1.02rem;font-weight:600;line-height:1.55}.archetype-code-label{text-align:center;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0;font-family:Nunito,sans-serif;font-size:.72rem;font-weight:800}.archetype-code-display{text-align:center;margin:.35rem 0 0;font-family:Nunito,sans-serif;font-weight:900;line-height:1.05}.archetype-code-letters{letter-spacing:.14em;color:var(--ink);font-size:clamp(2.35rem,8vw,3.15rem)}.archetype-beast-subtitle{text-align:center;color:var(--accent);letter-spacing:.02em;margin:.5rem 0 0;font-family:Nunito,sans-serif;font-size:1.2rem;font-weight:800}.archetype-rarity-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem;margin-top:.6rem;display:flex}.archetype-rarity-badge{border-radius:var(--radius-pill);letter-spacing:.06em;text-transform:uppercase;background:#ffffffe6;border:1px solid;align-items:center;gap:.35rem;padding:.22rem .55rem;font-family:Nunito,sans-serif;font-size:.73rem;font-weight:800;display:inline-flex}.archetype-rarity-flavor{max-width:min(26rem,100%);color:var(--ink);opacity:.9;text-align:center;flex:0 auto;margin:0;font-size:.87rem;font-style:italic;font-weight:600;line-height:1.45}.archetype-letter-breakdown{margin:1.35rem 0 0}.archetype-letter-breakdown-title{letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center;margin:0 0 .65rem;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:800}.archetype-letter-rows{flex-direction:column;gap:.65rem;margin:0;padding:0;list-style:none;display:flex}.archetype-letter-card{border-radius:var(--radius-md);border:1px solid var(--line);background:#ffffffb8;border-left-width:4px;margin:0;padding:.75rem .85rem .85rem;box-shadow:0 1px 6px #2d5a480d}.archetype-letter-card-top{align-items:flex-start;gap:.75rem;display:flex}.archetype-letter-badge-lg{border-radius:var(--radius-md);background:#fffffff2;border:2px solid;flex-shrink:0;justify-content:center;align-items:center;min-width:2.35rem;height:2.35rem;padding:0 .35rem;font-family:Nunito,sans-serif;font-size:1.05rem;font-weight:900;line-height:1;display:inline-flex}.archetype-letter-card-meta{flex-direction:column;gap:.15rem;min-width:0;display:flex}.archetype-letter-axis{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:.72rem;font-weight:800}.archetype-letter-trait{color:var(--ink);font-family:Nunito,sans-serif;font-size:.98rem;font-weight:800;line-height:1.3}.archetype-letter-explainer{color:var(--muted);margin:.55rem 0 0;font-size:.9rem;font-weight:500;line-height:1.58}.type-modal-epithet{color:var(--ink);text-align:center;margin:1rem 0 0;font-size:1.02rem;font-style:italic;font-weight:600;line-height:1.55}.type-modal-profile{border-radius:var(--radius-md);background:#3d6b5c12;border:1px solid #3d6b5c21;margin:1.35rem 0 0;padding:1rem 1.05rem}.type-modal-profile-heading{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .65rem;font-size:.72rem;font-weight:800}.type-modal-profile-p{color:var(--ink);margin:0 0 .85rem;font-size:.97rem;font-weight:550;line-height:1.62}.type-modal-profile-p:last-child{margin-bottom:0}.guide-card h2{margin-top:.35rem}.guide-lede{margin-top:1rem}.guide-intro-p{color:var(--muted);margin:0 0 .85rem;font-size:1.05rem;font-weight:500;line-height:1.72}.guide-intro-p:last-child{margin-bottom:0}.guide-quote{border-left:4px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;background:linear-gradient(90deg,#3d6b5c17 0%,#fff6 100%);margin:1.35rem 0 0;padding:1rem 1.15rem 1.05rem}.guide-quote p{color:var(--ink);margin:0;font-size:1.02rem;font-style:italic;font-weight:600;line-height:1.55}.guide-axis{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.75rem}.guide-axis:first-of-type{border-top:none;margin-top:1.75rem;padding-top:0}.guide-axis-title{letter-spacing:.02em;color:var(--ink);align-items:center;gap:.5rem;margin:0;font-family:Nunito,sans-serif;font-size:1.2rem;font-weight:800;display:flex}.guide-axis-emoji{font-size:1.35rem;line-height:1}.guide-axis-tagline{color:var(--faint);letter-spacing:.04em;text-transform:uppercase;margin:.35rem 0 0;font-size:.78rem;font-weight:700}.guide-axis-narrative{color:var(--muted);margin:.85rem 0 0;font-size:1.02rem;font-weight:500;line-height:1.68}.guide-letter-list{gap:.75rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.guide-letter-item{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff80;align-items:flex-start;gap:.85rem;padding:.85rem 1rem;display:flex}.guide-letter-badge{border-radius:var(--radius-sm);letter-spacing:.06em;background:#ffffffd9;border:2px solid;flex-shrink:0;justify-content:center;align-items:center;min-width:2.35rem;height:2.35rem;font-size:1rem;font-weight:800;display:inline-flex}.guide-letter-body{min-width:0}.guide-letter-name{color:var(--ink);letter-spacing:.02em;margin:0;font-size:1.02rem;font-weight:800}.guide-letter-blurb{color:var(--muted);margin:.35rem 0 0;font-size:.92rem;font-weight:500;line-height:1.55}.guide-letter-detail{color:var(--ink);opacity:.92;margin:.5rem 0 0;font-size:.9rem;font-weight:500;line-height:1.58}@media (width<=760px){.axis-grid,.result-actions,.type-grid{grid-template-columns:1fr}.page-main-row{flex-direction:column;align-items:stretch;padding:0 .75rem}.page-vertical--align-top .page-main-row{align-items:stretch}.app-panel{flex-direction:column;max-width:100%}.top-shell{border-bottom:none;border-right:none;width:100%;min-width:0;padding:1rem 1rem .95rem;box-shadow:inset 0 -1px #2d5a4814,0 6px 16px -10px #2d5a4833}.top-tabs{align-self:flex-start;width:fit-content;min-width:0;max-width:100%;padding-right:0}.content-shell{width:100%;padding:1.15rem 1rem 1.35rem}.card{padding:1.65rem 1.25rem}.type-modal-backdrop{padding:.55rem}.type-modal{width:100%;max-height:min(98dvh,200rem);padding:1.1rem 1rem 1.2rem}.quiz-head-row{flex-flow:column;align-items:stretch;gap:.65rem}.quiz-back-btn{box-sizing:border-box;order:-1;width:100%;max-width:100%}.quiz-head-pill{align-self:flex-start}}