:root {
  --teal:#0E2A35; --teal2:#183340; --gold:#B5A24F; --gold2:#967F33;
  --cream:#FAF6EE; --paper:#FFFFFF; --slate:#475A65; --slate2:#76838B;
  --rule:#E5E0D2; --green:#3D7A4C; --red:#A8442C; --amber:#C58A2E;
  --shadow-sm:0 1px 2px rgba(14,42,53,0.06);
  --shadow-md:0 4px 16px rgba(14,42,53,0.08);
  --shadow-lg:0 12px 40px rgba(14,42,53,0.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--teal);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.shell{max-width:760px;margin:0 auto;padding:24px 20px 80px}
.brandbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:44px;width:auto;display:block}
@media (max-width:540px){.brand-logo{height:36px}}
.env-badge{font-size:10px;font-weight:700;letter-spacing:1px;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--teal)}
.env-badge:empty{display:none}
.progress-rail{background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--slate2);margin-bottom:24px}
.progress-bar{flex:1;margin:0 14px;height:4px;background:var(--rule);border-radius:999px;position:relative;overflow:hidden}
.progress-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold),var(--gold2));width:0%;transition:width 0.4s ease}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow-md)}
h1{font-size:26px;margin:0 0 8px;letter-spacing:-0.2px}
h2{font-size:20px;margin:0 0 14px}
h3{font-size:16px;margin:0 0 8px;color:var(--teal)}
p{margin:0 0 14px;color:var(--slate)}
.lede{font-size:17px;color:var(--slate);line-height:1.6}
.section-label{font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--gold2);text-transform:uppercase;margin-bottom:10px}
.time-note{background:linear-gradient(180deg,#fbf7ee 0%,#f6efd9 100%);border:1px solid #e8dfb7;color:var(--teal);font-weight:700;text-align:center;border-radius:10px;padding:14px 16px;margin:18px 0;font-size:18px}
.time-note strong{color:var(--gold2);font-weight:700}
.instr{background:rgba(181,162,79,0.08);border-left:3px solid var(--gold);padding:12px 14px;border-radius:6px;font-size:14px;color:var(--slate);margin:16px 0 22px}
.fc-block{display:grid;gap:10px;margin:18px 0 8px}
.fc-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--paper);border:1.5px solid var(--rule);border-radius:10px;padding:12px 14px;transition:border 0.15s,background 0.15s}
.fc-row.is-most{border-color:var(--green);background:#f3f8f4}
.fc-row.is-least{border-color:var(--red);background:#fbf2ee}
.fc-letter{width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.fc-text{color:var(--teal);font-size:14.5px;line-height:1.5}
.fc-buttons{display:flex;gap:6px}
.fc-btn{font-size:10.5px;font-weight:700;letter-spacing:0.6px;padding:6px 10px;border-radius:999px;border:1.5px solid var(--rule);background:var(--paper);color:var(--slate2);cursor:pointer;transition:all 0.12s}
.fc-btn:hover{border-color:var(--slate);color:var(--teal)}
.fc-btn.most.active{background:var(--green);border-color:var(--green);color:#fff}
.fc-btn.least.active{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:540px){.fc-row{grid-template-columns:1fr}.fc-letter{grid-row:1}.fc-text{grid-row:2}.fc-buttons{grid-row:3;justify-content:flex-end}}
.freq-q{font-size:15.5px;color:var(--teal);margin-bottom:12px;line-height:1.5}
.freq-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:6px}
.freq-opt{background:var(--paper);border:1.5px solid var(--rule);border-radius:10px;padding:10px 4px;text-align:center;cursor:pointer;transition:all 0.12s;font-size:12.5px;line-height:1.25;color:var(--slate);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.freq-opt:hover{border-color:var(--gold);background:#fdfaef}
.freq-opt.active{border-color:var(--teal);background:#eef3f5;color:var(--teal);font-weight:700}
.freq-opt-num{font-size:16px;font-weight:700;color:var(--teal);display:block;margin-bottom:2px}
@media (max-width:540px){.freq-scale{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.freq-opt{padding:8px 3px;font-size:10.5px;line-height:1.2;min-height:62px}.freq-opt-num{font-size:14px}}
.freq-na-row{display:flex;justify-content:flex-end;margin-top:6px}
.freq-na-btn{background:transparent;border:1px solid var(--rule);color:var(--slate2);font-size:12px;font-weight:600;letter-spacing:0.3px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:all 0.15s}
.freq-na-btn:hover{border-color:var(--slate);color:var(--teal)}
.freq-na-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.freq-batch-item{padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.freq-batch-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.sjt-scenario{background:rgba(14,42,53,0.03);border-radius:10px;padding:16px 18px;margin-bottom:18px;color:var(--teal);line-height:1.55;font-size:15px}
.sjt-options{display:grid;gap:10px}
.sjt-opt{background:var(--paper);border:1.5px solid var(--rule);border-radius:10px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.sjt-letter{width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.sjt-text{color:var(--teal);font-size:14.5px;line-height:1.5}
.sjt-rank{font-size:11px;font-weight:700;letter-spacing:0.6px;padding:6px 10px;border-radius:8px;border:1.5px solid var(--rule);background:var(--paper);color:var(--slate2);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2376838B' d='M6 8L2 4h8z'/></svg>");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;cursor:pointer}
.sjt-rank.set{border-color:var(--teal);color:var(--teal);font-weight:700}
.likert-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:center}
.likert-row:last-of-type{border-bottom:none}
.likert-q{color:var(--teal);font-size:14.5px;line-height:1.45}
.likert-scale{display:flex;gap:4px}
.likert-pt{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);color:var(--slate2);font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.12s}
.likert-pt:hover{border-color:var(--gold)}
.likert-pt.active{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:540px){.likert-row{grid-template-columns:1fr}.likert-scale{justify-content:flex-end;margin-top:6px}.likert-pt{width:32px;height:32px}}
.input-row{display:grid;gap:8px;margin-bottom:14px}
.input-row label{font-size:13px;font-weight:600;color:var(--teal)}
.input-row input,.input-row select{font:inherit;padding:11px 14px;border-radius:8px;border:1.5px solid var(--rule);background:var(--paper);color:var(--teal);outline:none;transition:border 0.15s}
.input-row input:focus,.input-row select:focus{border-color:var(--gold)}
.consent-block{background:#fafaf5;border:1px solid var(--rule);border-radius:10px;padding:16px 18px;margin:18px 0;font-size:13.5px;color:var(--slate);line-height:1.55}
.consent-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.consent-row input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:var(--teal);cursor:pointer}
.consent-row label{cursor:pointer;font-size:13.5px;color:var(--teal)}
.consent-row a{color:var(--gold2);text-decoration:underline}
.honey{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.actions{display:flex;gap:12px;margin-top:28px;align-items:center;flex-wrap:wrap}
button.primary{background:var(--teal);color:#fff;border:none;padding:14px 28px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:transform 0.06s,background 0.15s,box-shadow 0.15s;box-shadow:var(--shadow-sm)}
button.primary:hover{background:var(--teal2);box-shadow:var(--shadow-md)}
button.primary:disabled{background:#c4ccd0;color:#f0eee5;cursor:not-allowed;box-shadow:none}
button.ghost{background:transparent;color:var(--slate2);border:none;padding:12px 14px;font-size:14px;cursor:pointer}
button.ghost:hover{color:var(--teal)}
.warn{font-size:13px;color:var(--amber);margin-left:8px}
.success-card{background:linear-gradient(180deg,#ffffff 0%,#fbf7ee 100%);border:1px solid var(--rule);border-radius:16px;padding:36px 32px;box-shadow:var(--shadow-md);text-align:center}
.refid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;padding:8px 12px;background:var(--cream);border-radius:6px;color:var(--teal);display:inline-block;margin:8px 0}
.footer-note{font-size:12px;color:var(--slate2);text-align:center;margin-top:36px;line-height:1.6}
.footer-note strong{color:var(--slate);font-weight:700}
.link-btn{background:none;border:none;padding:0;margin:0;color:var(--gold2);text-decoration:underline;cursor:pointer;font:inherit;font-size:inherit;letter-spacing:inherit;display:inline}
.link-btn:hover{color:var(--teal);text-decoration:underline}
.link-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.modal-overlay{position:fixed;inset:0;background:rgba(14,42,53,0.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:99999;animation:fadeIn 0.18s ease}
.modal-panel{background:var(--paper);border-radius:14px;padding:28px 28px 22px;max-width:640px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative;animation:slideUp 0.22s ease}
.modal-panel h3{color:var(--teal);font-size:20px;margin:0 0 14px;letter-spacing:-0.2px}
.modal-panel p{color:var(--slate);font-size:14px;line-height:1.6;margin:0 0 12px}
.modal-panel p strong{color:var(--teal);font-weight:700}
.modal-panel ol{color:var(--slate);font-size:14px;line-height:1.6;padding-left:22px;margin:0 0 14px}
.modal-panel ol li{margin-bottom:6px}
.modal-panel ul{color:var(--slate);font-size:14px;line-height:1.6;padding-left:22px;margin:0 0 14px}
.modal-panel ul li{margin-bottom:6px}
.modal-panel h4{color:var(--teal);font-size:15px;margin:18px 0 6px;letter-spacing:-0.1px;font-weight:700}
.modal-panel h4:first-of-type{margin-top:14px}
.modal-panel a{color:var(--gold2);text-decoration:underline}
.modal-panel a:hover{color:var(--teal)}
.modal-panel .legal-meta{font-size:12px;color:var(--slate2);font-style:italic;margin-bottom:14px}
.modal-close{position:absolute;top:14px;right:14px;background:transparent;border:none;font-size:26px;color:var(--slate2);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.15s}
.modal-close:hover{background:var(--cream);color:var(--teal)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
</content>