:root {
  --paper:#fffdf8; --bg:#f5f1e9; --ink:#26302b; --muted:#788078; --line:#e5ddd0; --green:#2d5141;
  --wolf:#173b61; --wolf-bg:#e3edf6; --dog:#a96d12; --dog-bg:#f7e7b6; --pig:#c84f5b; --pig-bg:#f8d8d8; --cat:#4f8d41; --cat-bg:#dcefd5;
  --investment:#2f73a9; --competence:#b57a21; --health:#6e9d48; --energy:#a74f78; --duration:#8b603e;
  --shadow:0 14px 36px rgba(42,52,46,.1);
}
* { box-sizing:border-box; }
html { background:var(--bg); overflow-x:hidden; touch-action:manipulation; }
body { margin:0; color:var(--ink); overflow-x:hidden; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button { font:inherit; cursor:pointer; }
.shell { position:relative; width:min(720px,100%); min-height:100vh; min-height:100dvh; margin:auto; padding:calc(54px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 20px calc(58px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.home-shell { display:flex; min-height:100vh; min-height:100dvh; flex-direction:column; padding-top:calc(54px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom:calc(30px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.hero { padding:10px 0 0; text-align:center; }
.brand-title { margin:0; font-size:clamp(32px,9vw,55px); font-weight:900; letter-spacing:.08em; line-height:1.2; }
.brand-title i { margin:0 .12em; color:#26302b; font-style:normal; }
.wolf-text { color:var(--wolf); }.dog-text { color:var(--dog); }.pig-text { color:var(--pig); }.cat-text { color:var(--cat); }
.hero h1 { margin:18px 0 8px; color:var(--green); font-size:clamp(25px,6vw,34px); line-height:1.25; }
.hero-subtitle { margin:0 auto; color:var(--muted); font-size:15px; }.hero-subtitle::after { display:block; margin:7px auto 0; content:"👇"; font-size:30px; line-height:1; animation:point 1.2s ease-in-out infinite; }@keyframes point { 50% { transform:translateY(7px); } }
.start-group { margin:24px 0 0; text-align:center; }
.start-orb { position:relative; display:flex; width:178px; height:178px; margin:0 auto; align-items:center; justify-content:center; overflow:hidden; border:8px solid rgba(255,255,255,.75); border-radius:50%; color:#fff; background:var(--green); box-shadow:0 9px 0 #1d3b2e,0 18px 28px rgba(45,81,65,.22); animation:pulse 2.6s ease-in-out infinite; }
.start-orb::before { position:absolute; z-index:1; top:88px; left:50%; width:62px; height:25px; transform:translateX(-50%); border:2px solid rgba(255,249,232,.86); border-radius:7px 4px 8px 7px; clip-path:polygon(0 0,78% 0,100% 28%,100% 100%,0 100%); content:""; background:radial-gradient(circle at 17px 10px,var(--green) 0 3px,transparent 3.5px),radial-gradient(circle at 38px 10px,var(--green) 0 3px,transparent 3.5px),linear-gradient(180deg,#f8dc7d,#d8a435); box-shadow:0 4px 0 rgba(19,59,46,.25); }.start-orb::after { position:absolute; z-index:1; top:112px; left:calc(50% - 22px); width:8px; height:8px; border:2px solid #f8dc7d; border-radius:50%; content:""; background:#1d3b2e; box-shadow:36px 0 0 -2px #1d3b2e,36px 0 0 0 #f8dc7d; }
.start-orb span { position:absolute; top:39px; left:0; right:0; z-index:2; margin:0; font-size:26px; font-weight:800; line-height:1.3; }.start-orb span::before { position:absolute; top:63px; left:25px; width:25px; height:3px; border-radius:99px; content:""; background:#f8dc7d; box-shadow:-9px 8px 0 -1px #f8dc7d,-3px 16px 0 -1px #f8dc7d; animation:speed 1s linear infinite; }@keyframes speed { 50% { transform:translateX(-7px); opacity:.55; } }.start-note { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
@keyframes pulse { 50% { box-shadow:0 9px 0 #1d3b2e,0 18px 40px rgba(45,81,65,.35); } }
.animal-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:auto; }
.animal { min-width:0; overflow:hidden; padding:4px 3px 7px; border:1px solid #e6d9c9; border-radius:12px; color:var(--ink); background:#f4e8d8; text-align:center; box-shadow:0 5px 12px rgba(68,53,38,.08); }
.animal-photo { height:92px; overflow:hidden; border-radius:8px; background-image:url('./assets/animal-portraits.webp'); background-size:200% 200%; background-repeat:no-repeat; }
.home-shell .animal-photo { height:auto; aspect-ratio:1 / 1; }
.portrait-wolf { background-position:left top; }
.portrait-dog { background-position:right top; }
.portrait-pig { background-position:left bottom; }
.portrait-cat { background-position:right bottom; }
.animal-photo img { display:block; width:150%; height:150%; margin:-25%; object-fit:contain; object-position:center 54%; }
.animal strong { display:block; margin-top:4px; font-size:11px; line-height:1.3; }.animal small { display:block; margin-top:1px; color:#788078; font-size:8px; line-height:1.35; }.animal.wolf strong { color:var(--wolf); }.animal.dog strong { color:var(--dog); }.animal.pig strong { color:var(--pig); }.animal.cat strong { color:var(--cat); }
.intro-card { margin:16px 0 0; padding:11px 13px; border:1px solid var(--line); border-radius:15px; color:#5d665f; background:rgba(255,253,248,.7); text-align:center; font-size:13px; line-height:1.55; }
.card { margin:16px 0; padding:20px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow); }
.eyebrow { color:var(--muted); font-size:12px; letter-spacing:.14em; }
.page-title { margin:8px 0 18px; font-size:31px; line-height:1.25; }
.btn { display:block; width:100%; margin-top:15px; padding:14px 18px; border:0; border-radius:999px; font-weight:800; }
.primary { color:#fff; background:var(--green); }.secondary { color:var(--green); border:1px solid #afbbb2; background:transparent; }
.between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.muted { color:var(--muted); }.footer { margin-top:20px; color:var(--muted); text-align:center; font-size:12px; }
.progress { height:7px; overflow:hidden; border-radius:99px; background:#e5ded3; }.progress > div { height:100%; border-radius:inherit; background:var(--green); }
.question { min-height:125px; margin:30px 0 21px; font-size:23px; font-weight:750; line-height:1.55; }
.option { display:flex; width:100%; min-height:58px; margin:10px 0; padding:13px 15px; gap:13px; align-items:center; border:1px solid #ded7cc; border-radius:15px; color:var(--ink); background:var(--paper); text-align:left; }
.option.selected { border-color:var(--green); color:#fff; background:var(--green); }.radio { display:flex; flex:0 0 27px; width:27px; height:27px; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50%; font-size:15px; }
.boundary-shell { display:flex; min-height:100vh; min-height:100dvh; flex-direction:column; justify-content:center; padding-top:calc(32px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom:calc(26px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.boundary-title { margin:0 0 13px; color:var(--ink); text-align:center; font-size:30px; line-height:1.2; }
.boundary-grid { display:grid; grid-template-columns:1fr; gap:7px; }
.notice { display:flex; min-height:86px; padding:10px 12px; gap:10px; align-items:center; border-radius:16px; }
.notice h3 { margin:0 0 3px; font-size:15px; line-height:1.3; }.notice p { margin:0; font-size:11px; line-height:1.5; }
.rule-number { display:flex; flex:0 0 24px; width:24px; height:24px; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-size:12px; font-weight:800; }
.rule-blue { border-left:4px solid var(--wolf); background:var(--wolf-bg); }.rule-blue .rule-number { background:var(--wolf); }.rule-yellow { border-left:4px solid var(--dog); background:var(--dog-bg); }.rule-yellow .rule-number { background:var(--dog); }.rule-pink { border-left:4px solid var(--pig); background:var(--pig-bg); }.rule-pink .rule-number { background:var(--pig); }.rule-green { border-left:4px solid var(--cat); background:var(--cat-bg); }.rule-green .rule-number { background:var(--cat); }
.boundary-start { margin-top:15px; }
.result-title { display:flex; min-height:54px; margin:7px 0 2px; align-items:center; gap:11px; color:var(--ink); font-size:34px; line-height:1.15; }
.stable-result-title { font-size:29px; }.state-animal { display:inline-block; font-size:26px; font-weight:900; white-space:nowrap; }.state-wolf { color:var(--wolf); }.state-dog { color:#895c12; }.state-pig { color:#a7404b; }.state-cat { color:var(--cat); }
.transition-arrow { display:inline-flex; width:48px; flex-direction:column; align-items:center; justify-content:center; color:#788078; line-height:1; }.transition-arrow em { font-size:11px; font-style:normal; font-weight:300; letter-spacing:.18em; }.transition-arrow b { margin-top:-1px; font-size:29px; font-weight:350; }
.map-wrap { margin:19px 0 10px; }.axis-caption { color:#526158; font-size:11px; font-weight:800; letter-spacing:.08em; }.axis-top,.axis-bottom { display:block; margin:0 auto; text-align:center; }.axis-top { margin-bottom:5px; color:var(--competence); }.axis-bottom { margin-top:5px; color:var(--pig); }
.map-frame { display:grid; grid-template-columns:26px minmax(0,1fr) 26px; gap:5px; align-items:stretch; }.axis-side { display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed; }.axis-left { color:var(--investment); }.axis-right { color:#5e8f55; }
.state-map { position:relative; height:314px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#f7f3ea; box-shadow:var(--shadow); }
.state-map::before { position:absolute; inset:0; content:""; background:linear-gradient(145deg,rgba(177,208,235,.9) 0%,rgba(224,237,247,.52) 48%,rgba(255,255,255,.1) 49%,rgba(247,224,176,.62) 100%); }
.quadrant { position:absolute; z-index:1; width:50%; height:50%; }
.quadrant img { position:absolute; width:66px; height:66px; object-fit:contain; filter:drop-shadow(0 4px 3px rgba(45,55,49,.16)); }
.q-wolf { top:0; left:0; background:linear-gradient(135deg,rgba(227,237,246,.95),rgba(185,208,231,.73)); }.q-wolf img { top:8px; left:8px; }
.q-cat { top:0; right:0; background:linear-gradient(225deg,rgba(220,239,213,.95),rgba(183,216,174,.73)); }.q-cat img { top:8px; right:8px; }
.q-dog { bottom:0; left:0; background:linear-gradient(45deg,rgba(247,231,182,.95),rgba(237,207,119,.73)); }.q-dog img { bottom:8px; left:8px; }
.q-pig { right:0; bottom:0; background:linear-gradient(315deg,rgba(248,216,216,.95),rgba(237,180,186,.73)); }.q-pig img { right:8px; bottom:8px; }
.axis-v,.axis-h { position:absolute; z-index:3; box-shadow:0 0 7px rgba(33,48,40,.22); }.axis-v { top:0; left:50%; width:3px; height:100%; background:linear-gradient(180deg,var(--competence),#f7f0df 50%,#d29c42); }.axis-h { top:50%; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--investment),#f7f0df 50%,#6fa768); }
.axis-v::before,.axis-v::after,.axis-h::before,.axis-h::after { position:absolute; width:0; height:0; content:""; border-style:solid; opacity:.78; }.axis-v::before { top:0; left:-6px; border-width:0 7px 10px; border-color:transparent transparent var(--competence); }.axis-v::after { bottom:0; left:-6px; border-width:10px 7px 0; border-color:#d29c42 transparent transparent; }.axis-h::before { top:-6px; left:0; border-width:7px 10px 7px 0; border-color:transparent var(--investment) transparent transparent; }.axis-h::after { top:-6px; right:0; border-width:7px 0 7px 10px; border-color:transparent transparent transparent #6fa768; }
.marker { position:absolute; z-index:5; width:23px; height:23px; transform:translate(-50%,-50%); border:5px solid #fff; border-radius:50%; background:#253b30; box-shadow:0 0 0 6px rgba(37,59,48,.18); }
.model-note { margin:12px 4px 17px; color:var(--muted); text-align:center; font-size:12px; line-height:1.7; }.model-link { display:inline; margin-left:3px; padding:0; border:0; border-bottom:1px solid var(--green); color:var(--green); background:transparent; font-size:12px; font-weight:800; }
.metric-card { margin-top:12px; padding:18px; }.metric-card h2 { display:table; margin:0 auto 13px; padding:3px 19px; border-radius:999px; color:#fff; background:var(--green); font-size:20px; line-height:1.35; }.metric { margin:9px 0; padding:12px 13px; border-radius:13px; }.metric-top { display:flex; gap:8px; align-items:baseline; justify-content:space-between; }.metric-name { font-size:16px; font-weight:850; }.metric-value { max-width:185px; text-align:right; font-size:14px; line-height:1.3; }.metric-help { margin:4px 0 0; color:#667069; font-size:11px; line-height:1.45; }
.tone-investment { color:var(--investment); background:#e4f0f9; }.tone-competence { color:var(--competence); background:#f9efd9; }.tone-health { color:var(--health); background:#e8f3de; }.tone-energy { color:var(--energy); background:#f5e3ed; }.tone-duration { color:var(--duration); background:#f2e8df; }
.deep-report { margin-top:18px; padding:19px 18px; }.deep-report > h2 { display:table; margin:0 auto 14px; padding:3px 19px; border-radius:999px; color:#fff; background:var(--green); font-size:20px; line-height:1.35; }.report-section { padding:15px 0; }.report-section + .report-section { border-top:1px solid var(--line); }.report-section h3 { display:flex; gap:9px; align-items:flex-start; margin:0 0 9px; color:var(--ink); font-size:16px; line-height:1.45; }.report-step { display:inline-flex; flex:0 0 24px; width:24px; height:24px; align-items:center; justify-content:center; border-radius:7px; color:#fff9e8; background:#d0a036; font-size:10px; font-weight:900; letter-spacing:.02em; line-height:1; }.report-title-text { flex:1; padding-top:1px; }.report-section p { margin:0 0 0 33px; color:#566158; font-size:13px; line-height:1.86; text-align:justify; }
.guide { position:relative; overflow:hidden; margin:22px 0 0; padding:23px 19px 19px; border:1px solid #e4c777; border-radius:23px; background:linear-gradient(145deg,#fffdf5 0%,#fbf0d2 100%); box-shadow:0 16px 32px rgba(164,124,37,.13); }.guide::after { position:absolute; top:-48px; right:-38px; width:140px; height:140px; border-radius:50%; content:""; background:rgba(255,255,255,.45); }.guide-kicker { position:relative; z-index:1; display:table; margin:0 auto 14px; padding:4px 19px; border-radius:8px; color:#fff9e8; background:#d0a036; font-size:22px; font-weight:900; letter-spacing:.08em; line-height:1.35; }.guide p { position:relative; z-index:1; margin:10px 0; color:#684d47; font-size:14px; line-height:1.8; }.report-badge { display:inline; margin:0 2px; padding:3px 6px; border-radius:6px; color:#6e4c09; background:#f6d976; font-weight:850; }.guide-footer { position:relative; margin-top:16px !important; padding:13px 8px 2px; border-top:1px dashed #d6b264; color:#9a6a18 !important; font-family:"STKaiti","KaiTi","FangSong",serif; font-size:16px !important; font-weight:800; letter-spacing:.08em; text-align:center; }.guide-footer::before,.guide-footer::after { display:inline-block; width:17px; height:1px; margin:0 8px 5px; content:""; background:#c89636; }.close-page { margin:16px auto 0; color:#795f2b; border-color:#cbb78d; background:#fffaf0; }
.toast { position:fixed; bottom:28px; left:50%; z-index:60; transform:translateX(-50%); padding:10px 17px; border-radius:99px; color:#fff; background:rgba(28,38,32,.93); font-size:13px; }
.save-sheet,.model-sheet { position:fixed; z-index:30; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:14px; background:rgba(31,42,36,.48); }.save-panel { width:min(680px,100%); max-height:92vh; overflow:auto; padding:22px 18px 25px; border-radius:24px 24px 12px 12px; background:var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.25); }.save-panel h2 { margin:0 0 5px; }.save-hint { margin:0 0 14px; color:var(--muted); font-size:13px; }.capture-card { padding:20px 15px; border:1px solid var(--line); border-radius:18px; background:#fff; }.capture-card h3 { margin:0 0 4px; font-size:24px; }.capture-card .capture-sub { margin:0 0 12px; color:var(--muted); font-size:12px; }.capture-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.capture-item { padding:10px; border-radius:12px; background:#f3f0e9; }.capture-item small { display:block; color:var(--muted); font-size:11px; }.capture-item strong { display:block; margin-top:2px; color:var(--green); font-size:15px; }
.model-sheet { align-items:center; padding:20px; }.model-panel { position:relative; width:min(720px,100%); max-height:91vh; overflow:auto; border-radius:20px; background:var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.3); }.model-panel img { display:block; width:100%; height:auto; }.model-close { position:sticky; top:10px; left:calc(100% - 48px); z-index:2; display:flex; width:36px; height:36px; margin:10px 10px -46px auto; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; color:#59625d; background:rgba(255,253,248,.94); font-size:25px; line-height:1; }
@media (max-width:500px) { .shell { padding-right:15px; padding-left:15px; }.animal-photo { height:88px; }.animal strong { font-size:10px; }.animal small { font-size:8px; }.question { font-size:21px; }.state-map { height:290px; }.quadrant img { width:56px; height:56px; }.result-title { font-size:31px; }.state-animal { font-size:24px; }.metric-card { padding:15px; }.metric-value { max-width:162px; font-size:13px; }.guide { padding:20px 15px; } }
@media (max-height:700px) { .home-shell { padding-top:calc(40px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom:calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }.hero { padding-top:5px; }.hero h1 { margin-top:14px; }.start-group { margin-top:19px; }.start-orb { width:168px; height:168px; }.start-orb::before { top:83px; }.start-orb::after { top:107px; }.start-orb span { top:35px; font-size:25px; }.start-orb span::before { top:59px; left:21px; }.animal-photo { height:80px; }.intro-card { margin-top:12px; padding:9px 11px; }.boundary-shell { padding-top:calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom:calc(18px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }.boundary-title { margin-bottom:9px; font-size:27px; }.notice { min-height:76px; padding:8px 10px; }.notice p { font-size:10px; }.boundary-start { margin-top:10px; padding:12px 16px; } }
@media print { body { background:#fff; }.shell { width:100%; padding:12px; }.save-sheet,.model-sheet { position:static; padding:0; background:#fff; }.save-panel,.model-panel { max-height:none; box-shadow:none; padding:0; }.save-panel > .save-hint,.save-panel > .btn,.model-close { display:none; } }