@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900;1000&display=swap');
#q404-concept { --q-bg:light-dark(#f7f5ef,#181b20);--q-surface:light-dark(#fffefa,#23272e);--q-text:light-dark(#252c34,#f6f5ee);--q-muted:light-dark(#68717c,#abb5c0);--q-line:light-dark(#e4e4de,#373d45);--q-accent:#ffca45;--q-radius:23px; font-family: 'Segoe UI',Arial,sans-serif; color:var(--q-text);max-width:450px;margin:0 auto; }
#q404-concept * {box-sizing:border-box}
#q404-concept button {font:inherit}
#q404-concept .q-app {background:var(--q-bg);border:1px solid var(--q-line);border-radius:30px;overflow:hidden}
#q404-concept .q-header {display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--q-line);background:var(--q-surface)}
#q404-concept .q-brand {display:flex;align-items:baseline;gap:9px;font-size:17px;font-weight:600}
#q404-concept .q-logo {font-size:32px;font-weight:850;letter-spacing:-2px;line-height:1}
#q404-concept .q-logo span {font-size:17px;color:#e99821;margin-left:3px}
#q404-concept .q-avatar {display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:light-dark(#dcece8,#294c45);font-weight:650}
#q404-concept main {padding:23px 20px 26px;min-height:610px}
#q404-concept h1 {font-size:30px;line-height:1.12;letter-spacing:-1px;margin:0 0 9px;font-weight:750}
#q404-concept h2 {font-size:19px;line-height:1.3;margin:0;font-weight:650}
#q404-concept p {font-size:15px;line-height:1.5;margin:0;color:var(--q-muted)}
#q404-concept .q-intro {margin-bottom:21px}
#q404-concept .q-progress-card {padding:22px;border-radius:var(--q-radius);background:light-dark(#fff0bc,#423b26);margin-bottom:23px}
#q404-concept .q-eyebrow {font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:650;margin-bottom:10px}
#q404-concept .q-count {display:flex;gap:9px;align-items:baseline}
#q404-concept .q-count strong {font-size:48px;line-height:1.1;letter-spacing:-2px;font-weight:750}
#q404-concept .q-count span {font-size:16px;color:var(--q-muted)}
#q404-concept .q-track {height:7px;border-radius:10px;background:light-dark(#e8dcae,#605637);margin:16px 0;overflow:hidden}
#q404-concept .q-fill {height:100%;background:light-dark(#43857b,#73bdae);border-radius:10px}
#q404-concept .q-action {display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;width:100%;padding:13px 16px;border:0;border-radius:14px;background:var(--q-accent);color:#292710;font-size:15px;font-weight:700;margin-top:17px}
#q404-concept .q-section {display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:13px}
#q404-concept .q-section small {font-size:13px;color:var(--q-muted)}
#q404-concept .q-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#q404-concept .q-topic {text-align:left;padding:15px 13px;border:1px solid var(--q-line);border-radius:18px;background:var(--q-surface);color:var(--q-text);min-height:124px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#q404-concept .q-topic:hover {border-color:light-dark(#99aaa6,#8ea39a)}
#q404-concept .q-topic strong {font-size:14px;font-weight:650;line-height:1.3}
#q404-concept .q-topic small {font-size:12px;color:var(--q-muted)}
#q404-concept .q-icon {width:33px;height:33px;display:grid;place-items:center;border-radius:11px;background:var(--topic-bg);color:var(--topic-fg)}
#q404-concept .q-nav {display:flex;border-top:1px solid var(--q-line);padding:10px 6px 13px;background:var(--q-surface)}
#q404-concept .q-nav button {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--q-muted);font-size:12px;min-height:48px;border-radius:13px;padding:6px 2px}
#q404-concept .q-nav button[aria-current="page"] {color:var(--q-text);background:light-dark(#f6eccc,#413b28);font-weight:650}
#q404-concept .q-caption {font-size:12px;text-align:center;color:var(--q-muted);padding:12px 0}
#q404-concept .q-back {display:flex;gap:8px;align-items:center;border:0;color:var(--q-muted);background:transparent;padding:0;min-height:44px;margin-bottom:20px;font-size:14px}
#q404-concept .q-question {background:var(--q-surface);padding:24px 20px;border:1px solid var(--q-line);border-radius:var(--q-radius)}
#q404-concept .q-question h2 {font-size:25px;line-height:1.25;letter-spacing:-.6px;margin:14px 0 24px}
#q404-concept .q-options {display:grid;gap:10px}
#q404-concept .q-option {text-align:left;color:var(--q-text);background:var(--q-bg);border:1px solid var(--q-line);border-radius:14px;padding:15px;font-size:15px;min-height:52px}
#q404-concept .q-option[aria-pressed="true"] {background:light-dark(#e1eee9,#28483e);border-color:light-dark(#559889,#7fb4a6)}
#q404-concept .q-note {margin-top:15px;font-size:13px}
#q404-concept .q-person {padding:20px;margin-top:14px;border:1px solid var(--q-line);border-radius:var(--q-radius);background:var(--q-surface)}
#q404-concept .q-person-head {display:flex;gap:12px;align-items:center;margin-bottom:15px}
#q404-concept .q-person .q-avatar {width:46px;height:46px;background:light-dark(#e9e1f7,#49395f)}
#q404-concept .q-person h2 {margin-bottom:3px}
#q404-concept .q-tags {display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
#q404-concept .q-tag {font-size:12px;background:light-dark(#edf1ea,#303f35);padding:6px 9px;border-radius:9px}
#q404-concept .q-match {font-size:30px;font-weight:750;color:light-dark(#347569,#8fd3c2);letter-spacing:-1px}
#q404-concept .q-state {padding:17px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;margin-top:20px}
@media(max-width:360px) {#q404-concept main {padding:20px 14px}#q404-concept .q-header {padding:20px}#q404-concept h1 {font-size:27px}#q404-concept .q-topic {padding:12px 10px}}
/* Second direction: saturated conversation cards and softer, expressive type. */
#q404-concept {--q-bg:light-dark(#f0e9ff,#281e42);--q-surface:light-dark(#fffaf5,#3b2b55);--q-text:light-dark(#392653,#fff6e9);--q-muted:light-dark(#735e87,#d7c6e8);--q-line:transparent;--q-accent:#ffdc63;--q-radius:30px;font-family:'Nunito','Trebuchet MS','Segoe UI',sans-serif;max-width:450px}
#q404-concept .q-app {border:0;border-radius:32px;padding-bottom:14px}
#q404-concept .q-header {background:transparent;border:0;padding:23px 24px 12px}
#q404-concept .q-brand {align-items:center;gap:13px;font-size:12px;line-height:1.15;font-weight:800}
#q404-concept .q-logo {font-size:42px;font-weight:1000;letter-spacing:-3px;position:relative}
#q404-concept .q-logo span {display:inline-block;font-size:24px;color:light-dark(#ee744e,#ff9c78);margin-left:5px;vertical-align:top;transform:rotate(12deg)}
#q404-concept .q-avatar {background:light-dark(#ffdf72,#ffdf72);width:44px;height:44px;font-size:27px;border-radius:18px;transform:rotate(7deg)}
#q404-concept main {padding:14px 22px 22px;min-height:550px}
#q404-concept h1 {font-size:42px;line-height:1.02;letter-spacing:-1.8px;font-weight:1000}
#q404-concept h2 {font-weight:900;font-size:21px}
#q404-concept p {font-size:15px;font-weight:600}
#q404-concept .q-intro {margin:12px 0 24px}
#q404-concept .q-intro p {margin-top:12px}
#q404-concept .q-hello {margin:5px 0 23px;position:relative}
#q404-concept .q-hello h1 {max-width:320px;margin-bottom:14px}
#q404-concept .q-sticker {display:inline-block;color:#4a305f;background:#dac6fc;border-radius:9px;padding:5px 11px;font-size:14px;font-weight:900;transform:rotate(-3deg);margin-left:4px}
#q404-concept .q-deck {position:relative;padding-top:9px;margin:0 3px 24px;isolation:isolate}
#q404-concept .q-deck:before {content:'';position:absolute;inset:0 5px 6px;border-radius:var(--q-radius);background:light-dark(#f299b9,#aa5c80);transform:rotate(3deg);z-index:-1}
#q404-concept .q-invitation {background:light-dark(#ffd1b6,#ffc6a7);color:#492c46;border-radius:var(--q-radius);padding:21px 23px 22px;transform:rotate(-1deg)}
#q404-concept .q-invitation-top {display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:800}
#q404-concept .q-invitation-top > span:first-child {background:#fff0dd;padding:5px 10px;border-radius:20px}
#q404-concept .q-invitation h2 {font-size:29px;line-height:1.13;letter-spacing:-.7px;margin:22px 0 8px;font-weight:1000}
#q404-concept .q-invitation p {color:#725064;font-size:14px}
#q404-concept .q-action {border-radius:18px;min-height:52px;font-size:16px;font-weight:900;color:#432f3d;background:var(--q-accent);box-shadow:0 4px 0 #cf9e35;margin-top:19px}
#q404-concept .q-action:active {transform:translateY(2px);box-shadow:0 2px 0 #cf9e35}
#q404-concept .q-invitation .q-action {background:#7045d6;color:#fff9ed;box-shadow:0 4px 0 #503091}
#q404-concept .q-mini-progress {display:flex;gap:12px;align-items:center;margin:0 3px 24px}
#q404-concept .q-mini-progress .q-track {flex:1;margin:0;height:9px;background:light-dark(#dcd1ee,#493663)}
#q404-concept .q-mini-progress .q-fill {background:light-dark(#9872db,#c6a0ff)}
#q404-concept .q-mini-progress span {font-size:12px;font-weight:800;white-space:nowrap}
#q404-concept .q-section {margin-bottom:15px}
#q404-concept .q-section small {font-weight:700;font-size:12px}
#q404-concept .q-grid {gap:12px;align-items:start}
#q404-concept .q-topic {min-height:142px;border:0;border-radius:25px;padding:15px 17px;position:relative;gap:5px;color:#38284e;background:var(--q-tile);transition:transform .15s ease}
#q404-concept .q-topic:nth-child(4n+1) {transform:rotate(-1.5deg)}
#q404-concept .q-topic:nth-child(4n+2) {transform:rotate(1.5deg);margin-top:7px}
#q404-concept .q-topic:hover {transform:translateY(-3px) rotate(0)}
#q404-concept .q-topic strong {font-size:17px;font-weight:900;letter-spacing:-.3px;line-height:1.15;max-width:130px}
#q404-concept .q-topic small {font-size:12px;color:#665476;font-weight:700}
#q404-concept .q-emoji {font-size:33px;line-height:1.15;margin:0 0 4px;display:block}
#q404-concept .q-all {display:flex;align-items:center;justify-content:center;gap:7px;margin:15px 0 0;width:100%;min-height:44px;background:transparent;border:0;color:var(--q-text);font-size:14px;font-weight:800}
#q404-concept .q-nav {margin:0 15px;padding:7px;background:light-dark(#fffcf7,#46325f);border:0;border-radius:25px;gap:3px;box-shadow:0 6px 18px light-dark(#5733870d,#160b271f)}
#q404-concept .q-nav button {font-size:11px;border-radius:19px;min-height:57px;font-weight:800;gap:5px}
#q404-concept .q-nav button[aria-current="page"] {background:#dcc8fa;color:#4c2d73;font-weight:900}
#q404-concept .q-question {background:light-dark(#ffdabf,#ffcbaa);color:#4c3049;border:0;padding:23px;border-radius:30px;box-shadow:5px 6px 0 light-dark(#d8b8f1,#765497)}
#q404-concept .q-question .q-eyebrow {font-size:13px;letter-spacing:0;text-transform:none;background:#fff0df;border-radius:20px;width:fit-content;padding:6px 11px;margin:0}
#q404-concept .q-question h2 {font-size:29px;font-weight:1000;line-height:1.13;margin:24px 0}
#q404-concept .q-option {border:2px solid transparent;background:#fff8ed;color:#503750;border-radius:18px;font-weight:800;padding:14px 16px}
#q404-concept .q-option[aria-pressed="true"] {background:#dfcdfc;color:#492d73;border-color:#8056be}
#q404-concept .q-question .q-note {color:#795064}
#q404-concept .q-back {font-weight:800;margin-bottom:12px}
#q404-concept .q-progress-card {background:light-dark(#ccebd9,#325649);border-radius:30px;padding:25px;border:0}
#q404-concept .q-eyebrow {text-transform:none;font-size:15px;letter-spacing:0;font-weight:800}
#q404-concept .q-count strong {font-size:64px;font-weight:1000}
#q404-concept .q-person {border:0;border-radius:30px;background:light-dark(#fbd3e2,#624054);padding:23px;margin:18px 2px;transform:rotate(-1deg)}
#q404-concept .q-person:nth-of-type(2) {background:light-dark(#d6ead2,#36523b);transform:rotate(1deg)}
#q404-concept .q-person .q-avatar {background:#ffeed6;width:54px;height:54px;border-radius:21px;color:#5f3d79;transform:rotate(-8deg);font-size:27px}
#q404-concept .q-person h2 {font-size:26px}
#q404-concept .q-match {font-size:40px;font-weight:1000;color:var(--q-text)}
#q404-concept .q-tag {background:light-dark(#fffcf5,#493154);border-radius:12px;font-weight:700;padding:7px 10px}
#q404-concept .q-state {border:0;border-radius:24px;padding:20px}
#q404-concept .q-handle {display:block;font-size:16px;font-weight:800;color:light-dark(#654098,#ebd9ff);margin-top:2px}
#q404-concept .q-custom {margin-top:22px;display:grid;gap:9px}
#q404-concept .q-custom label {font-size:15px;font-weight:900}
#q404-concept .q-custom input {width:100%;font:inherit;font-size:16px;min-height:52px;border:2px solid #e9a986;border-radius:17px;background:#fffaf0;color:#503750;padding:12px 14px}
#q404-concept .q-custom button {border:0;min-height:44px;padding:10px 15px;border-radius:15px;background:#dfcdfc;color:#492d73;font-weight:900}
@media(max-width:360px) {#q404-concept main{padding:12px 17px 22px}#q404-concept h1{font-size:37px}#q404-concept .q-topic{padding:14px;min-height:139px}#q404-concept .q-topic strong{font-size:16px}#q404-concept .q-invitation{padding:20px}#q404-concept .q-invitation h2{font-size:26px}}
@media(prefers-reduced-motion:reduce) {#q404-concept .q-topic{transition:none}}