:root{--paper:#f4f0e7;--surface:#fbfaf6;--ink:#20251f;--muted:#6c7169;--line:#dcd5c8;--green:#174839;--soft:#e9eee8;--red:#a75243;--gold:#bea05f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 system-ui,-apple-system,"Noto Sans SC","Noto Sans TC","Noto Sans JP",sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #a7524340;outline-offset:3px}header{height:72px;padding:0 4vw;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);background:#fbfaf6ee;backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;white-space:nowrap}.brand i{width:38px;height:38px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-family:serif;font-style:normal}nav{display:flex;gap:28px;margin:auto}nav a{color:var(--muted);text-decoration:none}nav a:first-child{color:var(--green);font-weight:800}.tools{display:flex;gap:8px}.tools select{border:1px solid var(--line);border-radius:99px;background:var(--surface);padding:8px 12px}main{max-width:1440px;margin:auto;padding:40px 4vw 62px}.intro{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px}.intro small,.result small,.rubric small{color:var(--red);font-weight:800;letter-spacing:.13em;text-transform:uppercase}.intro h1{font:700 clamp(29px,3vw,42px)/1.25 ui-serif,"Noto Serif SC","Noto Serif TC","Noto Serif JP",serif;margin:5px 0}.intro p{margin:0;color:var(--muted)}.intro>span{color:var(--muted);white-space:nowrap}.intro em{font-style:normal}.intro>span b{color:var(--green)}.layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.72fr);gap:24px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 42px #372f2217}.assess{padding:27px}.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:27px}.step{border:0;border-top:3px solid #d8d2c6;background:none;padding:8px 1px 0;text-align:left;color:#858981;font-size:12px;white-space:nowrap}.step.done{border-color:var(--gold);color:#705c35}.step.current{border-color:var(--green);color:var(--green);font-weight:800}.stage{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(360px,1.22fr);gap:32px;align-items:center}figure{margin:0;min-height:390px;border-radius:14px;background:#e8e1d4;overflow:hidden;position:relative}figure:after{content:"";position:absolute;inset:15% 15%;border:1px solid #a7524350;border-radius:50%}figure img{position:absolute;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;z-index:1}figcaption{position:absolute;z-index:2;bottom:17px;left:0;right:0;text-align:center;letter-spacing:.23em}.copy>small{color:var(--red);font-weight:800;letter-spacing:.12em}.copy h2{font:700 34px ui-serif,serif;margin:2px 0 8px}.copy>p{color:#5d625b;margin:0}.copy aside{margin:18px 0;padding:11px 14px;border-left:3px solid var(--gold);background:#f0ebdd}.copy aside b{display:block;color:#715e36;font-size:12px}.score-title{display:flex;align-items:end;justify-content:space-between}.score-title output{font-size:35px;color:var(--green);font-weight:800}.scores{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:14px 0 8px}.score-btn{aspect-ratio:1;border:1px solid var(--line);border-radius:50%;background:none;color:var(--muted);min-width:30px}.score-btn:hover{border-color:var(--green)}.score-btn.selected{background:var(--green);border-color:var(--green);color:white;font-weight:800}.anchors{display:flex;justify-content:space-between;font-size:11px;color:#7d8179}.actions{display:flex;gap:10px;margin-top:25px}.lite,.primary,.save{border:1px solid #bdb6a9;border-radius:10px;background:transparent;padding:12px 17px}.primary{flex:1;border-color:var(--green);background:var(--green);color:#fff;font-weight:800}.lite:disabled{opacity:.35;cursor:not-allowed}.result{padding:24px;position:sticky;top:94px}.result-head{display:flex;justify-content:space-between}.result-head h2{margin:2px 0;font:700 25px ui-serif,serif}.result-head>b{background:var(--soft);color:var(--green);border-radius:99px;padding:5px 10px;height:max-content}.muted{color:var(--muted);margin:0}#radar{display:block;width:min(100%,310px);margin:4px auto}.grid{fill:none;stroke:#d7d1c5}.axis{stroke:#ddd7cb}.label{fill:#596159;font-size:11px;text-anchor:middle;dominant-baseline:middle}#shape{fill:#a752432b;stroke:var(--red);stroke-width:2;transition:.25s}.dot{fill:var(--red)}.insight{background:var(--soft);border-radius:12px;padding:14px}.insight small{display:block}.insight strong{display:block;font-size:17px}.insight p{margin:0;color:#5c665e;font-size:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.stats div{border:1px solid var(--line);border-radius:10px;padding:9px}.stats span{display:block;color:var(--muted);font-size:11px}.save{width:100%;margin-top:11px}.save:not(:disabled){border-color:var(--green);color:var(--green);font-weight:800}.save:disabled{opacity:.5}.rubric{display:grid;grid-template-columns:.5fr 1.5fr;gap:30px;margin-top:35px;padding:30px;border-top:1px solid var(--line)}.rubric h2{font:700 26px ui-serif,serif;margin:4px 0}.rubric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.rubric article{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fbfaf6aa}.rubric article>b{color:var(--red);font-size:19px}.rubric h3{margin:3px 0;font-size:14px}.rubric p{margin:0;color:var(--muted);font-size:12px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:22px 4vw;color:var(--muted);font-size:13px}footer a{color:var(--green)}.mobile-actions{display:none}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:white;padding:9px 16px;border-radius:99px;transition:.2s;z-index:50}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.stage{grid-template-columns:1fr}figure{min-height:250px}.layout{grid-template-columns:1.2fr .8fr}.rubric{grid-template-columns:1fr}.rubric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){body{padding-bottom:76px}header{height:59px;padding:0 15px}.brand i{width:32px;height:32px}nav,.tools .lite{display:none}.tools{margin-left:auto}.tools select{max-width:126px;padding:7px 9px}main{padding:22px 15px 42px}.intro{display:block}.intro h1{font-size:27px}.intro>span{display:block;margin-top:8px;font-size:12px}.layout{display:block}.assess{padding:16px}.steps{display:flex;overflow:auto;scrollbar-width:none;margin-bottom:19px}.step{min-width:62px}.stage{display:block}figure{min-height:215px;margin-bottom:19px}.copy h2{font-size:29px}.actions{display:none}.score-title{display:block}.score-title output{display:block}.scores{gap:4px}.score-btn{min-width:0;font-size:12px}.result{position:static;margin-top:16px;padding:18px}#radar{max-height:270px}.rubric{padding:27px 0 0}.stats{grid-template-columns:1fr 1fr}.stats div:last-child{grid-column:1/-1}.mobile-actions{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 15px calc(10px + env(safe-area-inset-bottom));gap:8px;background:#fbfaf6f5;border-top:1px solid var(--line)}.mobile-actions .primary{padding:12px 8px}.mobile-actions .lite{padding:12px}footer{display:block;padding:20px 15px}footer a{display:block;margin-top:4px}#toast{bottom:88px;white-space:nowrap;max-width:90vw}}
@media(max-width:390px){.rubric-grid{grid-template-columns:1fr}.assess{padding:13px}figure{min-height:190px}}