Enhance UI and functionality across components

- AppHeader: Hide tab bar on home page and add a mobile dropdown for navigation.
- CanvasDeliverables: Add print/save as PDF functionality.
- CanvasWidgets: Introduce a shared empty-state component for consistent UI across widgets.
- CanvasPage: Implement a floating shortcut hint for keyboard shortcuts and enhance keyboard navigation.
- CSS: Add animations for widget transitions, improve focus styles, and implement print styles for cleaner output.

This update improves user experience by streamlining navigation and enhancing visual consistency across the application.

phd-advisor-frontend/src/components/AppHeader.js

@@ -64,12 +64,34 @@ const AppHeader = ({
         </div>
       </div>
 
-      <div className="canvas-tabs chat-view-tabs">
-        <button className={`tab ${isOnChat ? 'active' : ''}`} onClick={onNavigateToChat}>Chat</button>
-        <button className={`tab ${tabActive('insights') ? 'active' : ''}`} onClick={() => goToCanvas('insights')}>Insights</button>
-        <button className={`tab ${tabActive('workspace') ? 'active' : ''}`} onClick={() => goToCanvas('workspace')}>Workspace</button>
-        <button className={`tab ${tabActive('deliverables') ? 'active' : ''}`} onClick={() => goToCanvas('deliverables')}>Deliverables</button>
-      </div>
+      {/* Hide the view pill bar on the home page — home is a landing page,
+          not part of the chat ↔ canvas surface. */}
+      {!isOnHome && (
+        <div className="canvas-tabs chat-view-tabs">
+          <button className={`tab ${isOnChat ? 'active' : ''}`} onClick={onNavigateToChat}>Chat</button>
+          <button className={`tab ${tabActive('insights') ? 'active' : ''}`} onClick={() => goToCanvas('insights')}>Insights</button>
+          <button className={`tab ${tabActive('workspace') ? 'active' : ''}`} onClick={() => goToCanvas('workspace')}>Workspace</button>
+          <button className={`tab ${tabActive('deliverables') ? 'active' : ''}`} onClick={() => goToCanvas('deliverables')}>Deliverables</button>
+        </div>
+      )}
+
+      {/* Compact mobile dropdown — appears in place of the pill bar at narrow widths */}
+      {!isOnHome && (
+        <select
+          className="canvas-tabs-mobile"
+          value={isOnChat ? 'chat' : (canvasSub || 'workspace')}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (v === 'chat') onNavigateToChat();
+            else goToCanvas(v);
+          }}
+        >
+          <option value="chat">Chat</option>
+          <option value="insights">Insights</option>
+          <option value="workspace">Workspace</option>
+          <option value="deliverables">Deliverables</option>
+        </select>
+      )}
 
       <div className="header-right">
         {children}

phd-advisor-frontend/src/components/canvas/CanvasDeliverables.js

@@ -296,6 +296,7 @@ const DeliverablesView = ({ allStates }) => {
               <button onClick={() => exportAs('markdown')}>Markdown (.md)</button>
               <button onClick={() => exportAs('latex')}>LaTeX (.tex)</button>
               <button onClick={() => exportAs('html')}>HTML (.html)</button>
+              <button onClick={() => window.print()}>Print / Save as PDF</button>
             </div>
           </details>
         </div>

phd-advisor-frontend/src/components/canvas/CanvasWidgets.js

@@ -8,6 +8,18 @@ const fireToast = (msg, kind = 'success') =>
 const fireActivity = (source, msg) =>
   window.dispatchEvent(new CustomEvent('canvas-activity', { detail: { source, msg } }));
 
+// Shared empty-state block — every widget uses this so the look stays consistent.
+function EmptyState({ icon = 'sparkles', title, hint, action }) {
+  return (
+    <div className="widget-empty">
+      <div className="widget-empty-icon"><Icon name={icon} size={20}/></div>
+      <div className="widget-empty-title">{title}</div>
+      {hint && <div className="widget-empty-hint">{hint}</div>}
+      {action && <div className="widget-empty-action">{action}</div>}
+    </div>
+  );
+}
+
 // Cross-widget drag-drop helpers — one mime type, JSON payload tagged by `kind`.
 const X_MIME = 'application/x-canvas-item';
 const setDragPayload = (e, kind, payload) => {
@@ -142,9 +154,11 @@ export function BibliographyWidget({ state, setState, openModal }) {
           </div>
         ))}
         {sorted.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            No citations yet. Add one or drag a paper from the Reading Queue.
-          </div>
+          <EmptyState
+            icon="book"
+            title="No citations yet"
+            hint="Add one with the + button, paste a DOI, or drag a paper here from the Reading Queue."
+          />
         )}
       </div>
     </div>
@@ -595,7 +609,11 @@ export function DeadlinesWidget({ state, setState, openModal }) {
           );
         })}
         {enriched.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>No deadlines.</div>
+          <EmptyState
+            icon="calendar"
+            title="No deadlines yet"
+            hint="Track due dates and download them straight into your calendar as .ics files."
+          />
         )}
       </div>
       <button className="add-tiny" onClick={() => openModal('add-deadline', {
@@ -751,9 +769,11 @@ export function NotesWidget({ state, setState, openModal }) {
           </div>
         ))}
         {filtered.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            {notes.length === 0 ? 'No notes. Capture quick thoughts, paper claims, or ideas.' : `No notes match "${search}"`}
-          </div>
+          notes.length === 0 ? (
+            <EmptyState icon="notes" title="No notes yet" hint="Capture quick thoughts. Markdown supported. Type @ to mention citations, chapters, or tasks."/>
+          ) : (
+            <EmptyState icon="search" title={`No notes match "${search}"`} hint="Try a shorter query or clear the search box."/>
+          )
         )}
       </div>
       <button className="add-tiny" onClick={add}>+ New note</button>
@@ -816,7 +836,7 @@ export function HabitsWidget({ state, setState, openModal }) {
           );
         })}
         {habits.length === 0 && (
-          <div style={{ padding: 14, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>No habits yet.</div>
+          <EmptyState icon="flame" title="No habits yet" hint="Track daily research practices. Read 1 paper, write 30 min, lab notebook entry."/>
         )}
       </div>
       <button className="add-tiny" onClick={add}>+ New habit</button>
@@ -855,7 +875,7 @@ export function GoalsWidget({ state, setState, openModal }) {
           </div>
         ))}
         {goals.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>No goals yet.</div>
+          <EmptyState icon="bullseye" title="No goals yet" hint="Quarterly OKRs, dissertation milestones, anything you want to track."/>
         )}
       </div>
       <button className="add-tiny" onClick={add}>+ New goal</button>
@@ -888,9 +908,7 @@ export function MeetingsWidget({ state, setState, openModal }) {
           </div>
         ))}
         {meetings.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            No meetings logged.
-          </div>
+          <EmptyState icon="message" title="No meetings logged" hint="Capture decisions, action items, and last contact for each stakeholder."/>
         )}
       </div>
       <button className="add-tiny" onClick={add}>+ Log meeting</button>
@@ -935,9 +953,7 @@ export function OutlineWidget({ state, setState }) {
     <>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         {items.length === 0 ? (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            Empty outline. Click + to add the first node.
-          </div>
+          <EmptyState icon="list" title="Empty outline" hint="Click + Node below. Use Tab/Shift+Tab to indent, Enter for a sibling."/>
         ) : items.map((it, i) => {
           const hasChildren = items[i + 1] && items[i + 1].depth > it.depth;
           const isCollapsed = !!expanded[it.id] && hasChildren;
@@ -1054,9 +1070,7 @@ export function HighlightsWidget({ state, setState }) {
           </div>
         ))}
         {items.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            No quotes yet. Paste one above.
-          </div>
+          <EmptyState icon="cite" title="No quotes yet" hint="Paste a quote above with citation key and page; copy formatted with one click."/>
         )}
       </div>
     </>
@@ -1203,12 +1217,18 @@ export function CalendarWidget({ state, setState, allStates = {} }) {
   const monthLabel = first.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
   const today = new Date().toISOString().slice(0, 10);
 
+  const goToToday = () => setState({ ...state, viewMonth: new Date().toISOString().slice(0, 7) });
+  const isCurrentMonth = monthStr === new Date().toISOString().slice(0, 7);
+
   return (
     <>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <button className="icon-btn" onClick={() => shiftMonth(-1)}><Icon name="chevron" size={14} style={{ transform: 'rotate(180deg)' }}/></button>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <button className="icon-btn" onClick={() => shiftMonth(-1)} title="Previous month"><Icon name="chevron" size={14} style={{ transform: 'rotate(180deg)' }}/></button>
         <div style={{ flex: 1, fontWeight: 600, fontSize: 13 }}>{monthLabel}</div>
-        <button className="icon-btn" onClick={() => shiftMonth(1)}><Icon name="chevron" size={14}/></button>
+        {!isCurrentMonth && (
+          <button className="chip" onClick={goToToday} title="Jump to today" style={{ fontSize: 10.5 }}>Today</button>
+        )}
+        <button className="icon-btn" onClick={() => shiftMonth(1)} title="Next month"><Icon name="chevron" size={14}/></button>
       </div>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 3, fontSize: 10, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.06em', textAlign: 'center', fontFamily: 'var(--canvas-mono)' }}>
         {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <div key={i}>{d}</div>)}
@@ -1292,9 +1312,7 @@ export function ActivityWidget({ state, setState }) {
     <>
       <div className="note-list">
         {events.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            No activity yet. Edits across widgets will show up here.
-          </div>
+          <EmptyState icon="graph" title="No activity yet" hint="Edits across your widgets will show up here as you work."/>
         )}
         {events.map(e => (
           <div key={e.id} className="note-row" style={{ padding: '7px 9px' }}>
@@ -1413,24 +1431,52 @@ export function DocumenterWidget({ state, setState }) {
           </div>
         ))}
         {entries.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
-            No entries yet. Drop a quick line about today.
-          </div>
+          <EmptyState icon="pencil" title="No entries yet" hint="Drop a line about today. Hit ⌘↵ to log it. Tap Weekly summary anytime."/>
         )}
       </div>
     </>
   );
 }
 
-// ===== Stub =====
+// ===== Stub — roadmap preview card =====
+// Shows what's coming for this widget type so adding it from the palette
+// doesn't feel like a dead end.
+const STUB_PLANS = {
+  'concept-map': ['Drag papers as nodes', 'Connect by theme', 'Auto-cluster by citation overlap'],
+  'highlights': ['Pull quotes with auto-citation', 'Search across all notes'],
+  'paper-tldr': ['Drop a PDF', 'Get claim / method / limits / gaps', 'Save to Bibliography in one click'],
+  'outline': ['Collapsible tree', 'Drop Insights into slots', 'Promote to Deliverable section'],
+  'latex': ['Render math as you type', 'Snippet library', 'Copy as image / TeX'],
+  'draft-locker': ['Versioned chapter drafts', 'Diff between versions', 'Roll back any change'],
+  'gantt': ['Proposal → IRB → defense timeline', 'Critical-path highlighting', 'Drag to reschedule'],
+  'mood': ['Daily slider', 'Trend graph', 'Correlate with productive days'],
+  'sleep': ['Sleep duration vs. word output', 'Energy heatmap', 'Apple Health import'],
+  'focus': ['Curated ambient playlists', 'Focus session timer', 'Auto-pause on Pomodoro break'],
+  'cfp': ['CFP deadlines by venue', 'Fit score by topic', 'Submission status pipeline'],
+  'grants': ['Grant deadlines + amounts', 'Award log', 'Generate budget justification'],
+  'crm': ['Collaborators with last touch', 'Quick-add from Meeting Log', 'Reminders for cold contacts'],
+  'cv': ['Track outputs over time', 'Auto-generate CV from Bibliography', 'Highlight by impact factor'],
+  'datasets': ['Public datasets by domain', 'Saved searches', 'License + access notes'],
+  'methods': ['When to use what test', 'Examples + citations', 'Saved templates per chapter'],
+  'discounts': ['Software & services with edu pricing', 'Discount expiration tracking'],
+  'assumption': ['Names hidden assumptions', 'Asks "what if wrong?"', 'Logs to a hypothesis tree'],
+  'whats-missing': ['Gap analysis on lit review', 'Compares to top venues', 'Suggests targeted reads'],
+  'calibrator': ['Challenges every "results show" claim', 'Asks for the prior', 'Flags p-hacking patterns'],
+};
+
 export function StubWidget({ meta }) {
+  const plan = STUB_PLANS[meta.type] || [];
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--canvas-text-3)', textAlign: 'center', padding: '20px 16px' }}>
-      <div style={{ width: 38, height: 38, borderRadius: 9, background: 'var(--canvas-surface-2)', display: 'grid', placeItems: 'center', color: 'var(--canvas-text-4)' }}>
-        <Icon name={meta.icon} size={18}/>
-      </div>
-      <div style={{ fontSize: 11, color: 'var(--canvas-text-4)', fontFamily: 'var(--canvas-mono)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Coming soon</div>
-      <div style={{ fontSize: 11.5, color: 'var(--canvas-text-3)', maxWidth: 220 }}>{meta.desc}</div>
+    <div className="widget-stub">
+      <div className="widget-stub-icon"><Icon name={meta.icon} size={18}/></div>
+      <div className="widget-stub-tag">Coming soon</div>
+      <div className="widget-stub-title">{meta.name}</div>
+      <div className="widget-stub-desc">{meta.desc}</div>
+      {plan.length > 0 && (
+        <ul className="widget-stub-plan">
+          {plan.map((p, i) => <li key={i}>{p}</li>)}
+        </ul>
+      )}
     </div>
   );
 }

phd-advisor-frontend/src/pages/CanvasPage.js

@@ -432,7 +432,8 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
     openModal('global-search', { states: widgetStates });
   }, [openModal, widgetStates]);
 
-  // Esc closes modal, ⌘K opens command palette, ⌘/ opens global content search
+  // Esc closes modal, ⌘K opens command palette, ⌘/ opens global content search,
+  // ? opens the welcome tour for help (matches the icon in the topbar).
   useEffect(() => {
     const k = (e) => {
       if (e.key === 'Escape') closeModal();
@@ -444,6 +445,11 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
         e.preventDefault();
         openGlobalSearch();
       }
+      // ? key (Shift+/) — only when the user isn't typing in an input
+      if (e.key === '?' && !['INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
+        e.preventDefault();
+        setTourForceShow(n => n + 1);
+      }
     };
     window.addEventListener('keydown', k);
     return () => window.removeEventListener('keydown', k);
@@ -510,8 +516,30 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
       <ModalRouter modal={modal} onClose={closeModal}/>
       <ToastStack/>
       <CanvasWelcomeTour key={tourForceShow} forceShow={tourForceShow > 0}/>
+      <ShortcutHint/>
     </div>
   );
 };
 
+// Subtle floating hint bar showing the most-used keyboard shortcuts.
+// Auto-hides on small screens and after the first 12s, until the user hovers.
+function ShortcutHint() {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(false), 12000);
+    return () => clearTimeout(t);
+  }, []);
+  return (
+    <div
+      className={`canvas-shortcut-hint ${visible ? 'visible' : ''}`}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      <span><kbd>⌘</kbd><kbd>K</kbd> commands</span>
+      <span><kbd>⌘</kbd><kbd>/</kbd> search</span>
+      <span><kbd>?</kbd> help</span>
+    </div>
+  );
+}
+
 export default CanvasPage;

phd-advisor-frontend/src/styles/CanvasPage.css

@@ -88,6 +88,54 @@
 
 .canvas-page-with-sidebar *, .canvas-modal-backdrop *, .toast-stack * { box-sizing: border-box; }
 
+/* Standardized motion tokens */
+.canvas-page-with-sidebar, .canvas-modal-backdrop {
+  --canvas-ease: cubic-bezier(0.2, 0, 0, 1);
+  --canvas-fast: 120ms var(--canvas-ease);
+  --canvas-base: 180ms var(--canvas-ease);
+  --canvas-slow: 280ms var(--canvas-ease);
+}
+
+/* Widgets fade + slight rise on mount */
+@keyframes canvas-widget-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}
+.canvas-page-with-sidebar .widget {
+  animation: canvas-widget-in 240ms var(--canvas-ease);
+}
+
+/* Smooth content view transitions */
+@keyframes canvas-view-in {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 1; transform: none; }
+}
+.canvas-content > * {
+  animation: canvas-view-in 220ms var(--canvas-ease);
+}
+
+/* Improved focus rings — accent halo, no harsh outline */
+.canvas-page-with-sidebar :focus-visible,
+.canvas-modal-backdrop :focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--canvas-accent-glow);
+  border-radius: 4px;
+}
+.canvas-page-with-sidebar input:focus-visible,
+.canvas-page-with-sidebar textarea:focus-visible,
+.canvas-modal-backdrop input:focus-visible,
+.canvas-modal-backdrop textarea:focus-visible {
+  outline: none;
+  border-color: var(--canvas-accent);
+  box-shadow: 0 0 0 3px var(--canvas-accent-glow);
+}
+
+/* Respect users who don't want motion */
+@media (prefers-reduced-motion: reduce) {
+  .canvas-page-with-sidebar .widget,
+  .canvas-content > * { animation: none; }
+}
+
 .canvas-page-with-sidebar button {
   font-family: inherit;
   cursor: pointer;
@@ -192,8 +240,19 @@
   top: 50%;
   transform: translate(-50%, -50%);
 }
+.canvas-tabs-mobile { display: none; }
 @media (max-width: 900px) {
   .floating-header > .chat-view-tabs { display: none; }
+  .canvas-tabs-mobile {
+    display: inline-block;
+    background: var(--canvas-surface, var(--bg-tertiary, #f3f4f6));
+    border: 1px solid var(--canvas-border, var(--border-primary, #e5e7eb));
+    color: var(--canvas-text, var(--text-primary, #111827));
+    font-family: inherit;
+    font-size: 13px;
+    padding: 6px 10px;
+    border-radius: 7px;
+  }
 }
 
 /* Shared view-tabs pill bar — used on both Canvas and Chat pages.
@@ -1839,6 +1898,88 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
   background: rgba(0, 0, 0, 0.04);
 }
 
+/* "Coming soon" stub widget — roadmap-preview card, not a dead end */
+.canvas-page-with-sidebar .widget-stub {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 18px 4px 8px;
+}
+.canvas-page-with-sidebar .widget-stub-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 7px;
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text-3);
+  display: grid;
+  place-items: center;
+}
+.canvas-page-with-sidebar .widget-stub-tag {
+  font-size: 9.5px;
+  font-family: var(--canvas-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--canvas-text-4);
+  font-weight: 600;
+  margin-top: 8px;
+}
+.canvas-page-with-sidebar .widget-stub-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .widget-stub-desc {
+  font-size: 12px;
+  color: var(--canvas-text-3);
+  line-height: 1.5;
+}
+.canvas-page-with-sidebar .widget-stub-plan {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 12px;
+  color: var(--canvas-text-3);
+  line-height: 1.6;
+}
+.canvas-page-with-sidebar .widget-stub-plan li::marker { color: var(--canvas-accent); }
+
+/* Shared empty-state block inside widgets (Notion-style: airy, single CTA) */
+.canvas-page-with-sidebar .widget-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 28px 16px;
+  text-align: center;
+  color: var(--canvas-text-3);
+  flex: 1;
+}
+.canvas-page-with-sidebar .widget-empty-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text-3);
+  display: grid;
+  place-items: center;
+  margin-bottom: 4px;
+}
+.canvas-page-with-sidebar .widget-empty-title {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--canvas-text-2);
+}
+.canvas-page-with-sidebar .widget-empty-hint {
+  font-size: 12px;
+  color: var(--canvas-text-3);
+  max-width: 240px;
+  line-height: 1.5;
+}
+.canvas-page-with-sidebar .widget-empty-action {
+  margin-top: 8px;
+}
+
 /* Cross-widget drop overlay — shows over the target widget body during drag */
 .canvas-page-with-sidebar .canvas-drop-overlay {
   position: absolute;
@@ -1907,6 +2048,94 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
   outline: none;
 }
 
+/* Print: just the Notion page itself, no chrome */
+@media print {
+  .canvas-sidebar,
+  .canvas-page-with-sidebar .floating-header,
+  .canvas-page-with-sidebar .canvas-tabs,
+  .canvas-page-with-sidebar .notion-toc,
+  .canvas-page-with-sidebar .deliverable-insertables,
+  .canvas-page-with-sidebar .canvas-shortcut-hint,
+  .canvas-page-with-sidebar .page-header > div:last-child,
+  .toast-stack,
+  .canvas-modal-backdrop {
+    display: none !important;
+  }
+  .canvas-page-with-sidebar,
+  .canvas-main-area,
+  .canvas-app-shell,
+  .canvas-content,
+  .canvas-page-with-sidebar .notion-deliverable-grid,
+  .canvas-page-with-sidebar .notion-page-wrap {
+    display: block !important;
+    overflow: visible !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #ffffff !important;
+    color: #000 !important;
+  }
+  .canvas-page-with-sidebar .notion-page {
+    background: #ffffff !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    max-width: none !important;
+  }
+  .canvas-page-with-sidebar .notion-page-title { font-size: 28px; color: #000 !important; }
+  .canvas-page-with-sidebar .notion-h2 { color: #000 !important; }
+  .canvas-page-with-sidebar .notion-text { color: #000 !important; padding: 0 !important; margin: 0 !important; }
+  .canvas-page-with-sidebar .check-pill,
+  .canvas-page-with-sidebar .notion-callout { display: none !important; }
+}
+
+/* Floating shortcut hint — subtle, hides itself, hover-revealed */
+.canvas-shortcut-hint {
+  position: fixed;
+  bottom: 16px;
+  right: 20px;
+  z-index: 50;
+  display: flex;
+  gap: 14px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  box-shadow: var(--canvas-shadow);
+  font-size: 11.5px;
+  color: var(--canvas-text-3);
+  font-family: 'Inter', sans-serif;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.25s var(--canvas-ease), transform 0.25s var(--canvas-ease);
+  pointer-events: none;
+}
+.canvas-shortcut-hint.visible {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+.canvas-shortcut-hint:not(.visible):hover {
+  opacity: 0.6;
+  transform: none;
+  pointer-events: auto;
+}
+.canvas-shortcut-hint kbd {
+  display: inline-block;
+  font-family: var(--canvas-mono);
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--canvas-surface-2);
+  border: 1px solid var(--canvas-border-2);
+  color: var(--canvas-text-2);
+  margin-right: 2px;
+  min-width: 14px;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .canvas-shortcut-hint { display: none; }
+}
+
 /* Toast */
 .toast-stack {
   position: fixed;