:root { --ink:#35172c; --paper:#fff3f8; --lime:#ff70aa; --muted:#8f6379; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 8% 16%,#ffd4e5 0,transparent 23%),radial-gradient(circle at 87% 83%,#f9c4dc 0,transparent 28%),var(--paper); font-family:Manrope,Arial,sans-serif; }
.shell { width:min(100% - 40px, 900px); margin:auto; padding:28px 0 34px; }
header { display:flex; align-items:center; justify-content:space-between; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1.8px; }
.brand { color:var(--ink); text-decoration:none; font-weight:500; font-size:18px; letter-spacing:3px; }.spark { color:#ed3985; font-size:21px; margin-right:5px; }.status { display:flex; align-items:center; gap:8px; }.status i { width:8px;height:8px;border-radius:50%;background:#ef4c94;box-shadow:0 0 0 4px #ffd1e5; }
.hero { padding:94px 0 42px; max-width:650px; }.eyebrow { color:#c32b70;font:500 11px 'DM Mono',monospace;letter-spacing:2px;margin:0 0 17px; }.hero h1 { font-size:clamp(46px,8vw,86px);line-height:.98;letter-spacing:-5px;margin:0;font-weight:800; }.hero em { font-family:Georgia,serif;font-weight:400;letter-spacing:-4px; }.intro { max-width:500px;font-size:16px;line-height:1.65;color:#80536b;margin:28px 0 0; }
.music-card { display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;margin:0 0 32px;padding:24px;background:#fff0f6;border:1px solid #f3b6d1;box-shadow:6px 6px 0 #f29ac2; }.music-card h2{margin:0;font-size:31px;letter-spacing:-1.5px}.music-card h2 em{font-family:Georgia,serif;font-weight:400}.music-card p:not(.eyebrow){color:#86536d;font-size:13px;line-height:1.5}.music-card iframe{border-radius:12px}.lock-in-card{grid-template-columns:1fr}.lock-in{justify-self:start;border:1px solid #8c1c53;background:#42102e;color:#fff5fa;padding:14px 16px;cursor:pointer;font:500 11px 'DM Mono',monospace;letter-spacing:1px;box-shadow:4px 4px 0 #ff75ae;white-space:nowrap}.lock-in span{color:#ff8fbe}.lock-in b{display:block;margin-top:4px;color:#ff8fbe;font-size:9px}.lock-in.active{background:#e93583;border-color:#e93583}.lock-content{display:grid;grid-template-columns:1fr 1.35fr;gap:25px;align-items:center;border-top:1px solid #f5b8d4;padding-top:20px}.lock-content[hidden]{display:none}.lock-playlist{min-width:0}.library-link{display:inline-block;margin-top:10px;color:#9a1f5d;font:500 10px 'DM Mono',monospace;letter-spacing:.6px}.queue-label{margin:8px 0 0!important;font:9px 'DM Mono',monospace!important;letter-spacing:.8px;color:#a65f82!important}
.chat-card { background:#fffafe; border:1px solid #f0cadb; box-shadow:7px 7px 0 #4c1837; }.chat-top { height:57px;border-bottom:1px solid #f3dde7;display:flex;justify-content:space-between;align-items:center;padding:0 20px;font:500 11px 'DM Mono',monospace;letter-spacing:1.7px; }.chat-top b { color:#df3981;font-size:16px;margin-right:6px; }.chat-top button { border:0;background:none;font:inherit;letter-spacing:1.2px;color:#925f78;cursor:pointer; }.chat-top button:hover { color:#35172c; }
.messages { height:340px;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:17px; }.message { display:flex;align-items:flex-start;gap:10px;max-width:78%; }.message > div { padding:12px 15px; }.reply-content { font-size:14px;line-height:1.7; }.reply-paragraph { margin:0 0 13px; }.reply-paragraph:last-child { margin-bottom:0; }.reply-heading { margin:0 0 9px;font-size:15px;line-height:1.35;color:#7e174c; }.reply-list { margin:0 0 13px;padding-left:20px; }.reply-list li { margin:5px 0; }.message time { display:block;margin-top:8px;color:#8b9492;font:9px 'DM Mono',monospace;letter-spacing:1px; }.avatar { flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;background:var(--lime);font-size:14px; }.user { align-self:flex-end;flex-direction:row-reverse; }.user > div { background:#20292b;color:white; }.user .avatar { background:#f3d0a5;color:#6b482d;font:11px 'DM Mono',monospace; }.user .reply-heading{color:#fff5fa}.typing .reply-content { color:#778080;letter-spacing:3px; }
.reply-content a{color:#b61f68;font-weight:700;text-decoration:underline;text-underline-offset:2px}.user .reply-content a{color:#fff5fa}
.message-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.message-tools button{border:1px solid #efbfd4;background:#fff7fb;color:#8e2d5a;padding:5px 7px;cursor:pointer;font:9px 'DM Mono',monospace;letter-spacing:.4px}.message-tools button:hover{background:#ffe0ee}.user .message-tools{justify-content:flex-end}.user .message-tools button{background:#344044;border-color:#617074;color:#fff}
.composer { margin:0 16px 16px;border:1px solid #e7b5cb;display:flex;padding:5px; }.composer input { min-width:0;flex:1;border:0;outline:0;padding:10px 11px;background:transparent;font:14px Manrope,sans-serif;color:var(--ink); }.composer button { width:41px;border:0;background:var(--lime);font-size:23px;line-height:1;cursor:pointer; }.composer button:hover { background:#f34f98; }
.composer .attach { flex:0 0 36px;width:36px;background:#ffe7f1;color:#874663;font-size:23px; }.composer .attach:hover { background:#ffd2e4; }.attachments { display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px; }.attachment { display:flex;align-items:center;gap:7px;max-width:100%;padding:6px 9px;background:#ffe9f2;border:1px solid #f6c9dc;font:10px 'DM Mono',monospace;color:#80536b; }.attachment span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px; }.attachment button { border:0;background:transparent;cursor:pointer;color:#80536b;font-size:15px;line-height:1; }.web-toggle { display:block;padding:0 20px 17px;color:#84546d;font:10px 'DM Mono',monospace;letter-spacing:.5px; }.web-toggle input { accent-color:#e9438c;vertical-align:middle; }
.nclex-toggle{display:flex;align-items:center;gap:9px;margin:0 16px 17px;padding:10px 12px;border:1px solid #f2b3d0;background:#fff0f6;color:#7e3458;font:10px 'DM Mono',monospace;letter-spacing:.4px;cursor:pointer}.nclex-toggle input{accent-color:#e9438c}.nclex-toggle b{display:block;color:#a21f5e;letter-spacing:1px}.nclex-toggle small{display:block;margin-top:4px;color:#88566e;font:9px Manrope,sans-serif;letter-spacing:0}
.study-plan{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}.study-plan label{font:9px 'DM Mono',monospace;letter-spacing:1px;color:#9a315d}.study-plan input{flex:1;min-width:180px;border:1px solid #efbad1;padding:9px;background:#fffafe;color:#4c1837;font:12px Manrope,sans-serif}.study-plan button{border:1px solid #e9438c;background:#e9438c;color:#fff;padding:10px 12px;font:9px 'DM Mono',monospace;letter-spacing:.6px;cursor:pointer}.study-focus{font-size:12px!important;color:#9b5274!important}
.scenario-card{margin:34px 0;padding:28px;background:#fff0f6;border:1px solid #f0b4ce;box-shadow:6px 6px 0 #d96b9d}.scenario-card h2{margin:0;font-size:32px;letter-spacing:-1.5px}.scenario-card h2 em{font-family:Georgia,serif;font-weight:400}.scenario-note{color:#85536b;font-size:12px;line-height:1.55}.scenario-step{color:#b3296b;font:10px 'DM Mono',monospace;letter-spacing:1px}.scenario-choices{display:grid;gap:8px;margin:16px 0}.scenario-choices button,.scenario-card>div>button{border:1px solid #ed9fc2;background:#fffafe;color:#4c1837;text-align:left;padding:12px;cursor:pointer;font:13px Manrope,sans-serif}.scenario-choices button:hover{background:#ffe0ed}.scenario-choices button[disabled]{cursor:default}.scenario-choices .correct{background:#ddf7e9;border-color:#79c89d}.scenario-choices .incorrect{background:#fff0f4;border-color:#ee8ba8}.scenario-feedback{padding:12px;background:#fffafe;border-left:3px solid #e9438c;font-size:13px;line-height:1.6}.scenario-card>div>button{margin-top:14px;background:#e9438c;color:#fff;text-align:center;font:10px 'DM Mono',monospace;letter-spacing:1px}
.medmath-toggle{display:flex;align-items:center;gap:9px;margin:0 16px 17px;padding:10px 12px;border:1px solid #d8b6e8;background:#fbf2ff;color:#5c3973;font:10px 'DM Mono',monospace;letter-spacing:.4px;cursor:pointer}.medmath-toggle input{accent-color:#8b4db2}.medmath-toggle b{display:block;color:#733b94;letter-spacing:1px}.medmath-toggle small{display:block;margin-top:4px;color:#76598a;font:9px Manrope,sans-serif;letter-spacing:0}
.saved-chats{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 16px 17px;padding:10px 12px;border-top:1px solid #f4c5db;color:#86536d;font:9px 'DM Mono',monospace;letter-spacing:.5px}.saved-chats select{min-width:170px;flex:1;border:1px solid #f1bdd4;background:#fffafe;padding:7px;color:#713654;font:10px Manrope,sans-serif}.saved-chats button{border:1px solid #8c1c53;background:#fffafe;color:#8c1c53;padding:7px;cursor:pointer;font:9px 'DM Mono',monospace}
.suggestions { display:flex;flex-wrap:wrap;gap:9px;margin-top:24px; }.suggestions button { background:rgba(255,255,255,.45);border:1px solid #cfd5c7;border-radius:20px;padding:9px 14px;cursor:pointer;color:#516064;font:11px 'DM Mono',monospace; }.suggestions button:hover { background:var(--lime);border-color:var(--lime);color:var(--ink); }
.study-tools{margin-top:28px;padding:24px;background:#fff0f6;border:1px solid #f3b6d1;box-shadow:6px 6px 0 #f29ac2}.study-tools h2{margin:0;font-size:30px}.study-tools h2 em{font-family:Georgia,serif;font-weight:400}.study-tools p:not(.eyebrow){color:#86536d;font-size:13px}.tool-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tool-actions button,footer button{border:1px solid #8c1c53;background:#42102e;color:#fff5fa;padding:10px;cursor:pointer;font:10px 'DM Mono',monospace;letter-spacing:.5px}.flashcard{margin-top:16px;padding:15px;background:#fffafe;border:1px solid #f4c5db;color:#713654;font-size:14px;line-height:1.55}
footer { width:min(100% - 40px,900px);margin:auto;padding-bottom:28px;color:#718076;font:10px 'DM Mono',monospace;letter-spacing:1.5px;line-height:2; }footer span { color:#749a25; }footer a,footer button{color:#8e2457;text-decoration:underline;background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media (max-width:550px) { .shell{width:min(100% - 28px,900px)}.hero{padding:70px 0 32px}.hero h1{letter-spacing:-3px}.music-card{grid-template-columns:1fr;padding:18px}.lock-in{width:100%}.lock-content{grid-template-columns:1fr}.messages{height:320px}.message{max-width:90%}footer{width:min(100% - 28px,900px);font-size:8px} }