@font-face{
  font-family:"Comum Sans";
  src:url("assets/fonts/ComumSans-Regular.ttf") format("truetype");
  font-weight:400;
}

/* Phone board, visual reset: compact Pinterest-like tiles, never desktop windows. */
@media (max-width:760px){
  .user-board-page.is-mobile-list .canvas-shell{padding-top:calc(64px + var(--board-safe-top))!important;padding-bottom:calc(82px + var(--board-safe-bottom))!important;background:#eef1ef!important}
  .user-board-page.is-mobile-list .board-world{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row dense!important;align-items:start!important;gap:12px!important;padding:12px 14px 110px!important}
  .user-board-page.is-mobile-list .today-route-card{grid-column:1/-1!important;min-height:176px!important;padding:20px!important;border-radius:26px!important;background:#101312!important;color:#fff!important;box-shadow:none!important}
  .user-board-page.is-mobile-list .today-route-header h2{font-size:30px!important;color:#fff!important}.user-board-page.is-mobile-list .today-route-header strong{width:48px!important;height:48px!important;border-radius:15px!important;background:#ff6f51!important;color:#101312!important}
  .user-board-page.is-mobile-list .today-route-copy p{font-size:14px!important;line-height:1.45!important;color:rgba(255,255,255,.7)!important}.user-board-page.is-mobile-list .today-route-actions{margin-top:16px!important}.user-board-page.is-mobile-list .today-route-actions button{min-height:44px!important;border-radius:999px!important;background:#ff6f51!important;color:#101312!important}.user-board-page.is-mobile-list .today-route-actions button+button{display:none!important}
  .user-board-page.is-mobile-list .board-object,.user-board-page.is-mobile-list .board-browser-window,.user-board-page.is-mobile-list .board-text-note,.user-board-page.is-mobile-list .board-image-object{grid-column:auto!important;width:100%!important;height:auto!important;min-height:142px!important;margin:0!important;border:0!important;border-radius:24px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important}
  .user-board-page.is-mobile-list .board-object:nth-of-type(3n+1){min-height:184px!important}.user-board-page.is-mobile-list .board-object:nth-of-type(4n+2){min-height:158px!important;background:#f7d8cf!important}
  .user-board-page.is-mobile-list .board-object{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;padding:18px!important}.user-board-page.is-mobile-list .board-object .folder-art{width:52px!important;height:52px!important;filter:grayscale(1) contrast(.9)!important;opacity:.82!important}.user-board-page.is-mobile-list .board-object .desktop-label h3{font-size:17px!important;line-height:1.1!important;color:#101312!important}
  .user-board-page.is-mobile-list .board-object.note-launcher{background:#ff6f51!important;color:#101312!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui{position:static!important;display:flex!important;min-height:106px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;text-align:left!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui span{width:42px!important;height:42px!important;margin:0!important;border-radius:50%!important;background:#101312!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui span::before,.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui span::after{background:#fff!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui h3{margin:0!important;color:#101312!important;font-size:17px!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui p{display:none!important}
  .user-board-page.is-mobile-list .board-browser-window{min-height:118px!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-frame{display:flex!important;min-height:118px!important;flex-direction:column!important;justify-content:flex-end!important;border:0!important;border-radius:24px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important}.user-board-page.is-mobile-list .board-browser-window:nth-of-type(odd) .browser-window-frame{min-height:168px!important;background:#dce8e4!important}
  .user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar{display:flex!important;min-height:0!important;flex:0 0 auto!important;padding:18px!important;background:transparent!important;border:0!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar .browser-dot{display:none!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar span{margin:0!important;color:#101312!important;font-size:16px!important;font-weight:800!important;text-align:left!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar::after{content:"↗";margin-left:auto;color:#101312;font-size:17px}
  .user-board-page.is-mobile-list .board-browser-window .browser-window-live-page,.user-board-page.is-mobile-list .board-browser-window iframe{display:none!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-preview-target{inset:0!important}
  .user-board-page.is-mobile-list .board-account-chip{top:calc(10px + var(--board-safe-top))!important;left:16px!important;height:44px!important;padding:0!important;background:transparent!important;box-shadow:none!important}.user-board-page.is-mobile-list .board-toolbar{right:14px!important;bottom:calc(14px + var(--board-safe-bottom) + var(--board-keyboard-offset))!important}.user-board-page.is-mobile-list .board-toolbar .control-pill{min-height:48px!important;padding:4px!important;border-radius:17px!important;box-shadow:0 12px 28px rgba(16,19,18,.12)!important}.user-board-page.is-mobile-list .control-tool-map,.user-board-page.is-mobile-list .board-add-button{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:13px!important}
}

/* Study-first board layer */
.control-tool-command{font-weight:950}

.user-board-page.is-focused .board-context-panel,
.user-board-page.is-focused .board-assistant-stream,
.user-board-page.is-focused .board-recent-strip,
.user-board-page.is-focused .board-window-dock,
.user-board-page.is-focused .board-toolbar,
.user-board-page.is-focused .board-account-chip,
.user-board-page.is-focused .trash-drop-target,
.user-board-page.is-focused .voice-companion{
  opacity:0;
  pointer-events:none;
}

.user-board-page.has-primary-window .board-context-panel,
.user-board-page.has-primary-window .board-assistant-stream{
  opacity:0;
  pointer-events:none;
}

.board-context-panel{
  position:fixed;
  top:104px;
  right:20px;
  z-index:70;
  width:min(292px, calc(100vw - 40px));
  display:grid;
  gap:14px;
  border:1px solid rgba(16,19,18,.1);
  border-radius:18px;
  background:rgba(255,255,252,.86);
  box-shadow:0 24px 70px rgba(18,22,20,.12);
  backdrop-filter:blur(22px);
  padding:16px;
  color:#101312;
}

.board-context-panel header{display:grid;gap:4px}

.board-context-panel header span,
.board-context-panel footer span,
.board-assistant-stream header span,
.board-recent-strip > span,
.board-command-card header span{
  color:rgba(16,19,18,.5);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.board-context-panel h2,
.board-assistant-stream h2{
  margin:0;
  color:#101312;
  font-size:24px;
  line-height:1;
}

.board-context-panel p,
.board-context-panel footer,
.assistant-message p,
.board-recent-strip p{
  margin:0;
  color:rgba(16,19,18,.62);
  font-size:13px;
  font-weight:750;
  line-height:1.32;
}

.context-quick-actions,
.context-more{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.context-quick-actions button,
.context-more button,
.context-more-toggle,
.assistant-message-actions button,
.assistant-capture button,
.board-command-results button,
.board-toast button{
  min-height:38px;
  border:0;
  border-radius:999px;
  background:#101312;
  color:#fff;
  padding:0 12px;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.context-more button,
.context-more-toggle{
  background:#eef1ef;
  color:#101312;
}

.context-more-toggle{
  justify-self:start;
  min-width:86px;
}

.board-context-panel footer{
  display:grid;
  gap:3px;
  border-top:1px solid rgba(16,19,18,.08);
  padding-top:12px;
}

.board-context-panel footer b{
  color:#101312;
  font-size:14px;
}

.board-assistant-stream{
  position:fixed;
  left:24px;
  bottom:132px;
  z-index:65;
  width:min(330px, calc(100vw - 48px));
  display:grid;
  gap:12px;
  border:1px solid rgba(16,19,18,.1);
  border-radius:18px;
  background:rgba(255,255,252,.88);
  box-shadow:0 24px 70px rgba(18,22,20,.12);
  backdrop-filter:blur(22px);
  padding:14px;
}

.board-assistant-stream header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.board-assistant-stream header button{
  min-height:34px;
  border:0;
  border-radius:999px;
  background:#101312;
  color:#fff;
  padding:0 14px;
  font:inherit;
  font-size:12px;
  font-weight:900;
}

.assistant-message{display:grid;gap:10px}
.assistant-message-actions{display:flex;flex-wrap:wrap;gap:7px}
.assistant-message-actions button{background:#eef1ef;color:#101312}

.assistant-capture{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.assistant-capture input,
.board-command-card input{
  min-width:0;
  height:42px;
  border:0;
  border-radius:999px;
  background:#eef1ef;
  color:#101312;
  padding:0 14px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  outline:none;
}

.board-recent-strip{
  position:fixed;
  left:50%;
  bottom:16px;
  z-index:68;
  transform:translateX(-50%);
  width:min(620px, calc(100vw - 300px));
  min-height:44px;
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(16,19,18,.09);
  border-radius:999px;
  background:rgba(255,255,252,.88);
  box-shadow:0 14px 38px rgba(18,22,20,.09);
  backdrop-filter:blur(18px);
  padding:6px 9px;
}

.board-recent-strip > span{
  flex:0 0 auto;
  padding:0 5px;
  font-size:10px;
}

.board-recent-strip button,
.board-window-dock button{
  min-width:0;
  border:0;
  border-radius:999px;
  background:#eef1ef;
  color:#101312;
  padding:6px 10px;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.board-recent-strip button b,
.board-window-dock button b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:900;
}

.board-recent-strip button small,
.board-window-dock button span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(16,19,18,.52);
  font-size:9px;
  font-weight:850;
}

.board-window-dock{
  position:fixed;
  left:50%;
  bottom:82px;
  z-index:68;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  max-width:min(720px, calc(100vw - 280px));
  overflow:auto;
  padding:4px;
}

.board-command-palette{
  position:fixed;
  inset:0;
  z-index:2147482500;
}

.board-command-scrim{
  position:absolute;
  inset:0;
  background:rgba(246,245,242,.62);
  backdrop-filter:blur(8px);
}

.board-command-card{
  position:absolute;
  top:min(118px, 12vh);
  left:50%;
  transform:translateX(-50%);
  width:min(680px, calc(100vw - 32px));
  display:grid;
  gap:14px;
  border-radius:22px;
  background:#fffefc;
  box-shadow:0 36px 110px rgba(18,22,20,.22);
  padding:18px;
}

.board-command-card header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.board-command-card header button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#eef1ef;
  color:#101312;
  font:inherit;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}

.board-command-card label{display:grid;gap:7px}

.board-command-card label span{
  color:rgba(16,19,18,.5);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.board-command-results{display:grid;gap:8px}

.board-command-results button{
  display:grid;
  justify-items:start;
  height:auto;
  min-height:56px;
  border-radius:14px;
  background:#f0f2ef;
  color:#101312;
  padding:10px 12px;
}

.board-command-results button b{font-size:14px}

.board-command-results button span{
  color:rgba(16,19,18,.58);
  font-size:12px;
  font-weight:800;
}

.board-toast-region{
  position:fixed;
  right:22px;
  bottom:24px;
  z-index:2147482000;
  display:grid;
  gap:8px;
  width:min(360px, calc(100vw - 44px));
  pointer-events:none;
}

.board-toast{
  display:grid;
  gap:8px;
  border-radius:18px;
  background:#101312;
  color:#fff;
  box-shadow:0 22px 70px rgba(18,22,20,.24);
  padding:14px;
  pointer-events:auto;
}

.board-toast p{
  margin:0;
  font-size:13px;
  font-weight:900;
}

.board-toast div{display:flex;flex-wrap:wrap;gap:7px}
.board-toast button{min-height:32px;background:#fff;color:#101312}

.browser-window-titlebar{gap:8px}

.browser-window-titlebar .browser-dot{
  flex:0 0 auto;
  border:0;
  padding:0;
  cursor:pointer;
}

.browser-window-titlebar span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.board-embedded-page{
  position:relative;
  padding:0;
}

.board-embedded-page iframe{
  width:100%;
  height:100%;
  border:0;
  background:#f6f5f2;
}

.board-resources-page main{
  width:100%;
  height:100%;
  align-content:start;
  padding:clamp(28px,4vw,54px);
}

.board-resources-page h2{max-width:620px}

.board-resource-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.board-resource-grid button{
  min-height:104px;
  border:1px solid rgba(16,19,18,.1);
  border-radius:10px;
  background:#fffefc;
  color:#101312;
  padding:14px;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.board-resource-grid button b,
.board-resource-grid button small{display:block}

.board-resource-grid button b{
  font-size:18px;
  font-weight:950;
}

.board-resource-grid button small{
  margin-top:6px;
  color:rgba(16,19,18,.56);
  font-size:13px;
  font-weight:800;
  line-height:1.25;
}

.vocab-card-window-controls{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  display:flex;
  gap:6px;
}

.vocab-card-window-controls button{
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#101312;
  box-shadow:0 8px 22px rgba(16,19,18,.1);
  font:900 16px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
}

@media(max-width:920px){
  .board-context-panel{
    top:92px;
    right:10px;
    bottom:auto;
    width:min(300px, calc(100vw - 24px));
    max-height:min(46vh, 390px);
    overflow:auto;
    padding:14px;
    border-radius:16px;
  }

  .board-assistant-stream{
    display:none;
  }

  .board-recent-strip{
    left:12px;
    right:12px;
    bottom:10px;
    transform:none;
    width:auto;
    max-width:none;
    overflow:auto;
    border-radius:20px;
    padding-right:76px;
  }

  .board-window-dock{
    left:12px;
    right:12px;
    bottom:78px;
    transform:none;
    max-width:none;
  }

  .board-resource-grid{
    grid-template-columns:1fr;
  }

  .trash-drop-target{
    right:8px;
    bottom:58px;
    transform:scale(.72);
    transform-origin:bottom right;
  }

  .trash-drop-target.is-active{
    transform:scale(.78);
  }
}

@font-face{
  font-family:"Comum Sans";
  src:url("assets/fonts/ComumSans-Bold.ttf") format("truetype");
  font-weight:700;
}

:root{
  --ink:#101312;
  --canvas:#eef1ef;
  --canvas-soft:#f1f3f1;
  --white:#fbfbf7;
  --warm:#f7f4ec;
  --dark:#29302d;
  --dark-2:#111614;
  --note:#ff6f51;
}

*{
  box-sizing:border-box;
  font-family:"Comum Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:"Comum Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

button,
input,
textarea,
select{
  font:inherit;
  font-family:inherit;
}

.user-board-page{
  position:relative;
  width:100vw;
  height:100vh;
  padding:0;
  overflow:hidden;
}

.welcome-screen{
  position:fixed;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  background:#f7f8f6;
  color:#050505;
  transition:opacity .48s cubic-bezier(.2,.82,.18,1), transform .48s cubic-bezier(.2,.82,.18,1);
}

.welcome-screen[hidden]{
  display:none!important;
}

.welcome-screen.is-hidden{
  opacity:0;
  transform:scale(1.015);
  pointer-events:none;
}

.welcome-admin-open{
  position:absolute;
  top:max(22px,env(safe-area-inset-top));
  right:max(24px,env(safe-area-inset-right));
  min-height:38px;
  border:1px solid rgba(16,19,18,.16);
  border-radius:999px;
  padding:0 16px;
  background:rgba(255,255,252,.72);
  color:#101312;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.welcome-admin-dialog{
  width:min(420px,calc(100vw - 28px));
  border:0;
  border-radius:24px;
  padding:0;
  background:#fbfcfa;
  color:#101312;
  box-shadow:0 28px 90px rgba(16,19,18,.24);
}
.welcome-admin-dialog::backdrop{background:rgba(16,19,18,.42);backdrop-filter:blur(8px)}
.welcome-admin-form{display:grid;gap:16px;padding:24px}
.welcome-admin-form header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.welcome-admin-form header span,.welcome-admin-form label span{display:block;color:rgba(16,19,18,.52);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.welcome-admin-form h2{margin:5px 0 0;font-size:30px;line-height:1}
.welcome-admin-form header button{width:36px;height:36px;border:0;border-radius:50%;background:#eef1ef;color:#101312;font-size:22px;cursor:pointer}
.welcome-admin-form label{display:grid;gap:7px}
.welcome-admin-form input{min-height:46px;border:1px solid rgba(16,19,18,.14);border-radius:12px;padding:0 13px;background:#fff;color:#101312;outline:0}
.welcome-admin-form input:focus{border-color:#ff6f51;box-shadow:0 0 0 3px rgba(255,111,81,.12)}
.welcome-admin-status{min-height:18px;margin:0;color:#6a736f;font-size:12px;line-height:1.4}
.welcome-admin-submit{min-height:44px;border:0;border-radius:999px;background:#101312;color:#fff;font-weight:850;cursor:pointer}
.welcome-admin-submit:disabled{opacity:.5;cursor:wait}

.welcome-name-form{
  width:min(88vw,980px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:24px;
}

.welcome-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
  color:#050505;
  font-size:92px;
  line-height:1;
  font-weight:400;
  letter-spacing:0;
}

.welcome-line input{
  flex:1 1 340px;
  width:min(48vw,520px);
  min-width:0;
  max-width:520px;
  height:1.08em;
  border:3px dashed rgba(255,111,81,.28);
  border-radius:.22em;
  padding:0 .38em;
  background:transparent;
  color:#ff6f51;
  font:inherit;
  font-family:"Comum Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing:0;
  outline:0;
  caret-color:#ff6f51;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.welcome-line input::placeholder{
  color:#ff6f51;
  opacity:.95;
}

.welcome-line input:focus{
  border-color:rgba(255,111,81,.48);
  background:rgba(255,255,255,.18);
  box-shadow:0 16px 42px rgba(255,111,81,.1);
}

.welcome-submit{
  min-width:132px;
  min-height:42px;
  border:1px solid #050505;
  border-radius:999px;
  padding:9px 22px;
  background:#050505;
  color:#f7f8f6;
  cursor:pointer;
  font-size:13px;
  font-weight:850;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}

.welcome-submit:hover{
  transform:translateY(-1px);
  background:#ff6f51;
  border-color:#ff6f51;
}

.welcome-setup-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:10px;
  width:min(86vw,760px);
  color:#101312;
}

.welcome-setup-grid label{
  display:grid;
  gap:5px;
  min-width:0;
}

.welcome-setup-grid span{
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  color:rgba(16,19,18,.55);
}

.welcome-setup-grid select{
  width:100%;
  height:36px;
  border:1px solid rgba(16,19,18,.1);
  border-radius:8px;
  background:rgba(255,255,252,.72);
  color:#101312;
  padding:0 10px;
  font:800 12px/1 "Comum Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

.welcome-diagnostic-choice{
  grid-column:1 / -1;
  display:flex!important;
  grid-template-columns:none!important;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px!important;
  margin-top:2px;
}

.welcome-diagnostic-choice input{
  width:14px;
  height:14px;
  accent-color:#ff6f51;
}

.welcome-diagnostic-choice span{
  text-transform:none;
  font-size:12px;
  color:rgba(16,19,18,.5);
}

@media (max-width:760px){
  .welcome-admin-open{top:max(12px,env(safe-area-inset-top));right:14px;min-height:36px;padding:0 13px}
  .welcome-name-form{
    width:min(92vw,520px);
    gap:24px;
  }

  .welcome-line{
    gap:16px;
    font-size:56px;
  }

  .welcome-line input{
    order:2;
    flex-basis:100%;
    width:100%;
    max-width:100%;
  }

  .welcome-setup-grid{
    grid-template-columns:1fr;
    width:100%;
  }

  .welcome-diagnostic-choice{
    justify-content:flex-start;
  }
}

/* Phone workspace: an app surface, not a scaled desktop canvas. */
@media (max-width:760px){
  .user-board-page{
    --mobile-bar-height:64px;
    background:var(--canvas);
  }

  .canvas-shell{
    inset:0;
    padding-top:calc(72px + env(safe-area-inset-top));
    padding-bottom:calc(92px + env(safe-area-inset-bottom));
    cursor:default;
  }

  .board-account-chip{
    top:calc(16px + env(safe-area-inset-top));
    left:18px;
    max-width:142px;
    height:44px;
  }

  .board-account-chip span{font-size:15px}

  .board-toolbar{
    top:auto;
    right:50%;
    bottom:calc(12px + env(safe-area-inset-bottom));
    transform:translateX(50%);
    z-index:110;
  }

  .board-toolbar .control-pill{
    min-height:58px;
    gap:2px;
    padding:6px;
    border:1px solid rgba(16,19,18,.09);
    border-radius:22px;
    background:rgba(251,251,247,.94);
    box-shadow:0 18px 48px rgba(16,19,18,.2);
    backdrop-filter:blur(22px);
  }

  .control-grip,.control-tool-layout{display:none}
  .control-tool,.board-add-button{
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    border-radius:16px;
  }
  .control-tool.is-active{
    background:#101312;
    color:#fff;
  }

  .board-add-menu{
    top:auto;
    right:12px;
    bottom:calc(82px + env(safe-area-inset-bottom));
    width:calc(100vw - 24px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:12px;
    border-radius:24px;
  }
  .board-add-menu button{
    height:52px;
    border-radius:16px;
    background:#eef1ef;
    text-align:center;
  }
  .board-add-menu button:last-child{grid-column:1/-1}

  .board-context-panel,.board-assistant-stream,.board-recent-strip,.board-window-dock,.board-footer{
    display:none!important;
  }

  .voice-companion{
    left:auto;
    right:16px;
    top:calc(14px + env(safe-area-inset-top));
    bottom:auto;
  }

  .trash-drop-target{
    right:50%;
    bottom:calc(88px + env(safe-area-inset-bottom));
    width:72px;
    height:82px;
    opacity:0;
    transform:translateX(50%) scale(.8);
  }
  .trash-drop-target.is-active{
    opacity:1;
    transform:translateX(50%) scale(1);
  }

  .board-command-card{
    top:calc(12px + env(safe-area-inset-top));
    left:12px;
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform:none;
    border-radius:24px;
    padding:16px;
  }
  .board-command-card input{height:52px;font-size:16px}
  .board-command-results button{min-height:54px}

  .user-board-page.is-mobile-list .canvas-shell{
    overflow-y:auto;
    overflow-x:hidden;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }
  .user-board-page.is-mobile-list .board-world{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    transform:none!important;
    padding:12px 14px 24px;
  }
  .user-board-page.is-mobile-list .board-object,
  .user-board-page.is-mobile-list .board-note,
  .user-board-page.is-mobile-list .board-browser-window,
  .user-board-page.is-mobile-list .today-route-card,
  .user-board-page.is-mobile-list [data-board-image]{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    height:112px!important;
    min-height:112px!important;
    transform:none!important;
    flex:0 0 auto;
    order:20;
  }
  .user-board-page.is-mobile-list .today-route-card{
    order:0;
    height:auto!important;
    min-height:292px!important;
    padding:20px;
    border-radius:24px;
    cursor:pointer;
  }
  .user-board-page.is-mobile-list .today-route-header h2{font-size:42px}
  .user-board-page.is-mobile-list .today-route-header strong{width:58px;height:58px;border-radius:18px;font-size:20px}
  .user-board-page.is-mobile-list .today-route-copy p{font-size:18px}
  .user-board-page.is-mobile-list .today-route-steps{display:none}
  .user-board-page.is-mobile-list .today-route-actions button{min-width:0;min-height:48px;padding:0 18px}

  .user-board-page.is-mobile-list .board-object{
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid rgba(16,19,18,.09);
    border-radius:22px;
    background:rgba(251,251,247,.92);
    box-shadow:0 12px 32px rgba(16,19,18,.07);
    padding:14px;
    cursor:pointer;
  }
  .user-board-page.is-mobile-list .board-object .folder-art{position:relative;width:78px;height:78px;object-fit:contain}
  .user-board-page.is-mobile-list .board-object .desktop-label{position:relative;inset:auto;text-align:left}
  .user-board-page.is-mobile-list .board-object .desktop-label h3{font-size:19px}
  .user-board-page.is-mobile-list .board-object:hover{transform:none}

  .user-board-page.is-mobile-list .board-browser-window{
    height:136px!important;
    min-height:136px!important;
  }
  .user-board-page.is-mobile-list .browser-window-frame{border-radius:22px;box-shadow:0 12px 32px rgba(16,19,18,.08)}
  .user-board-page.is-mobile-list .browser-window-titlebar{flex-basis:50px;padding:0 16px}
  .user-board-page.is-mobile-list .browser-window-live-page{overflow:hidden;padding:14px 18px}
  .user-board-page.is-mobile-list .browser-window-preview-target{top:0}
  .user-board-page.is-mobile-list .browser-resize-zone{display:none}

  .user-board-page.is-mobile-map .board-window-resize,
  .user-board-page.is-mobile-map .browser-resize-zone{display:none!important}

  .user-board-page.is-focused .focus-layer{inset:0!important;background:#eef1ef}
  .user-board-page.is-focused .focus-card{
    left:0!important;
    top:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    padding-top:env(safe-area-inset-top)!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    box-shadow:none!important;
  }
  .focus-back-button{
    top:calc(10px + env(safe-area-inset-top))!important;
    left:12px!important;
    width:48px!important;
    height:48px!important;
    z-index:30;
  }
  .focus-window-surface,.focus-folder-open,.focus-account-surface{
    border-radius:0!important;
    overscroll-behavior:contain;
  }
}

@media (max-height:620px){
  .welcome-name-form{
    gap:18px;
  }

  .welcome-line{
    font-size:64px;
  }
}

.canvas-shell{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:0;
  background:
    radial-gradient(circle at 49% 42%,rgba(255,255,255,.78),transparent 48%),
    linear-gradient(180deg,var(--canvas-soft),var(--canvas));
  box-shadow:none;
  cursor:grab;
  touch-action:none;
}

.canvas-shell.is-panning{cursor:grabbing}

.board-toolbar,
.learner-chip,
.zoom-controls,
.board-footer{
  position:fixed;
  z-index:80;
}

.board-toolbar{
  top:20px;
  right:22px;
  display:flex;
  align-items:center;
  gap:10px;
}

.board-account-chip{
  position:fixed;
  top:28px;
  left:32px;
  z-index:82;
  min-width:0;
  max-width:220px;
  height:auto;
  display:flex;
  align-items:center;
  border:0;
  border-radius:8px;
  padding:0;
  background:transparent;
  color:#111413;
  box-shadow:none;
  appearance:none;
  text-decoration:none;
  cursor:pointer;
  transition:color .16s ease, opacity .16s ease;
}

.board-account-chip:hover,
.board-account-chip:focus-visible{
  color:#000;
  outline:2px solid rgba(17,22,20,.18);
  outline-offset:6px;
}

.board-account-chip span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  font-weight:900;
  letter-spacing:.01em;
}

.control-round,
.control-pill{
  height:46px;
  border:1px solid rgba(17,22,20,.12);
  border-radius:999px;
  background:rgba(246,248,246,.92);
  box-shadow:0 16px 42px rgba(22,27,24,.16), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
}

.control-round{
  width:46px;
  color:#121816;
  font-size:19px;
  font-weight:850;
  cursor:pointer;
}

.control-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
}

.control-pill button{
  width:34px;
  height:34px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.46);
  color:#2c3431;
  font-size:17px;
  font-weight:850;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(17,22,20,.045);
  transition:background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.control-pill button:hover,
.control-pill button:focus-visible,
.control-round:hover,
.control-round:focus-visible{
  background:#fff;
  color:#080d0b;
  box-shadow:0 8px 20px rgba(22,27,24,.12), inset 0 0 0 1px rgba(17,22,20,.08);
  outline:none;
}

.control-pill button:active,
.control-round:active{
  transform:translateY(1px);
}

.control-grip{
  display:grid;
  grid-template-columns:repeat(2,4px);
  grid-auto-rows:4px;
  gap:4px;
  width:12px;
  margin:0 2px 0 1px;
  opacity:.54;
}

.control-grip::before,
.control-grip::after{
  content:"";
  display:block;
  width:4px;
  height:16px;
  border-radius:999px;
  background:repeating-linear-gradient(to bottom,#7b8380 0 4px,transparent 4px 8px);
}

.control-tool-list,
.control-tool-map,
.control-tool-layout{
  position:relative;
}

.control-tool-list::after,
.control-tool-map::after{
  content:"";
  position:absolute;
  right:-5px;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(17,22,20,.12);
}

.control-tool-add{
  background:#101312!important;
  color:#fff!important;
  font-size:22px!important;
  box-shadow:0 10px 20px rgba(16,19,18,.18)!important;
}

.control-tool-add:hover,
.board-add-launcher.is-open .control-tool-add{
  background:#234c42!important;
  color:#fff!important;
}

.control-tool-layout{
  color:#5e4d20!important;
}

.text-format-toolbar{
  display:flex;
  align-items:center;
  gap:5px;
  height:32px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(224,227,227,.92);
  box-shadow:0 10px 24px rgba(30,28,22,.08);
}

.text-format-toolbar[hidden]{
  display:none;
}

.text-format-toolbar button{
  min-width:24px;
  height:24px;
  padding:0 6px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#353937;
  cursor:pointer;
  font-size:13px;
  line-height:1;
}

.text-format-toolbar button:hover,
.text-format-toolbar button.is-active{
  background:rgba(255,255,255,.72);
}

.text-size-control{
  display:flex;
  align-items:center;
  gap:3px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  color:#4b504d;
  font-size:11px;
}

.text-color-control{
  display:flex;
  align-items:center;
  gap:5px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  color:#353937;
  font-size:11px;
  font-weight:700;
}

.text-color-control input{
  width:18px;
  height:18px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}

.text-size-control input{
  width:42px;
  border:0;
  outline:0;
  background:transparent;
  color:#2f3432;
  font:700 12px/1 "Comum Sans", Inter, sans-serif;
}

.board-upload-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.board-add-launcher{
  position:relative;
  z-index:2;
}

.board-add-button{
  width:34px;
  height:34px;
  border:0;
  border-radius:12px;
  background:#101312;
  color:#fff;
  box-shadow:0 10px 20px rgba(16,19,18,.18);
  cursor:pointer;
  font-size:22px;
  font-weight:850;
  line-height:1;
  display:grid;
  place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.board-add-button:hover,
.board-add-launcher.is-open .board-add-button{
  transform:none;
  box-shadow:0 12px 24px rgba(35,76,66,.2);
  background:#234c42;
  color:#fff;
}

.board-add-menu{
  position:fixed;
  right:18px;
  top:58px;
  z-index:140;
  display:flex;
  flex-direction:column;
  gap:2px;
  width:190px;
  padding:8px;
  border-radius:20px;
  background:rgba(251,251,247,.94);
  box-shadow:0 24px 70px rgba(31,34,33,.16);
  backdrop-filter:blur(18px);
}

.board-add-menu[hidden]{
  display:none;
}

.board-add-menu button{
  width:100%;
  height:38px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#202322;
  text-align:left;
  padding:0 12px;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
}

.board-add-menu button:hover{
  background:rgba(16,19,18,.06);
}

.learner-chip{
  display:none;
  top:76px;
  right:38px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(238,240,240,.82);
  color:#4e514f;
  font:700 11px/1 "Courier New", monospace;
  letter-spacing:.02em;
}

.trash-drop-target{
  position:fixed;
  right:24px;
  bottom:34px;
  z-index:85;
  display:grid;
  grid-template-rows:1fr auto;
  gap:6px;
  place-items:center;
  width:94px;
  height:118px;
  transform:scale(1);
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
  pointer-events:none;
}

.trash-drop-target img{
  display:block;
  width:100%;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(20,24,22,.04));
  opacity:.5;
  transition:opacity .18s ease;
  pointer-events:none;
}

.trash-drop-target span{
  color:#202322;
  font-size:18px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:0;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  pointer-events:none;
}

.trash-drop-target.is-active{
  transform:scale(1.06);
  filter:drop-shadow(0 12px 26px rgba(20,24,22,.12));
}

.trash-drop-target.is-active img{
  opacity:1;
}

.voice-companion{
  position:fixed;
  left:44px;
  bottom:44px;
  z-index:88;
  font-family:"Comum Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

.voice-orb{
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}

.voice-orb:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 16px 22px rgba(16,19,18,.08));
}

.voice-ring,
.voice-core{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.voice-ring{
  inset:8px;
  border:2px solid rgba(16,19,18,.14);
  opacity:.85;
}

.ring-two{
  inset:18px;
  border-color:rgba(16,19,18,.22);
}

.voice-core{
  width:48px;
  height:48px;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.52),transparent 34%),
    radial-gradient(circle at 62% 68%,#101312,#232826 68%,#0d0f0e);
  box-shadow:
    0 16px 34px rgba(16,19,18,.16),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

.voice-companion.is-listening .ring-one,
.voice-companion.is-speaking .ring-one{
  animation:voiceOuterPulse 1.35s ease-in-out infinite;
}

.voice-companion.is-listening .ring-two,
.voice-companion.is-speaking .ring-two{
  animation:voiceInnerPulse .9s ease-in-out infinite;
}

.voice-companion.is-thinking .voice-core{
  animation:voiceThink 1s linear infinite;
}

.voice-companion.is-listening .voice-core{
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 34%),
    radial-gradient(circle at 62% 68%,#0f6f5d,#152d29 68%,#0a1311);
}

.voice-companion.is-speaking .voice-core{
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.58),transparent 34%),
    radial-gradient(circle at 62% 68%,#2538c8,#101830 68%,#080b14);
}

.voice-companion.is-fallback .ring-one{
  border-style:dashed;
}

.voice-companion.is-unavailable .voice-core{
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.52),transparent 34%),
    radial-gradient(circle at 62% 68%,#6a3029,#2f1715 68%,#140908);
}

@keyframes voiceOuterPulse{
  0%,100%{inset:8px; opacity:.72; border-color:rgba(16,19,18,.14)}
  50%{inset:0; opacity:.22; border-color:rgba(16,19,18,.34)}
}

@keyframes voiceInnerPulse{
  0%,100%{transform:scale(.94); opacity:.68}
  50%{transform:scale(1.08); opacity:.28}
}

@keyframes voiceThink{
  to{transform:rotate(360deg)}
}

.voice-status{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.board-footer{
  display:none;
  left:32px;
  right:32px;
  bottom:72px;
  z-index:20;
  display:flex;
  justify-content:space-between;
  color:#7d817f;
  font:10px/1 "Courier New", monospace;
  text-transform:uppercase;
  letter-spacing:.03em;
  pointer-events:none;
}

.board-world{
  position:absolute;
  left:0;
  top:0;
  width:2600px;
  height:1800px;
  transform-origin:0 0;
  transition:filter .42s ease, opacity .42s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}

.user-board-page.is-focused .board-world{
  opacity:.24;
  filter:blur(8px);
  pointer-events:none;
}

.user-board-page.is-focused.is-unfocusing .board-world{
  opacity:.68;
  filter:blur(3px);
}

.board-object,
.board-note{
  position:absolute;
  width:var(--w);
  height:var(--h);
  user-select:none;
  touch-action:none;
}

.board-object{
  cursor:grab;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}

.board-object:hover{
  transform:translateY(-3px);
}

.board-object.is-dragging{
  cursor:grabbing;
  transform:translateY(-5px) scale(1.012);
  transition:none;
}

.board-object.is-hidden-for-focus,
.board-browser-window.is-hidden-for-focus{
  opacity:0;
}

.today-route-card{
  position:absolute;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  gap:18px;
  box-sizing:border-box;
  border:1px solid rgba(16,19,18,.11);
  border-radius:28px;
  background:rgba(255,255,252,.94);
  box-shadow:0 38px 96px rgba(16,19,18,.16);
  cursor:grab;
  padding:30px;
  user-select:none;
  touch-action:none;
}

.today-route-card.is-dragging{
  cursor:grabbing;
  box-shadow:0 44px 110px rgba(16,19,18,.22);
}

.today-route-header{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:18px;
}

.today-route-header span,
.today-route-copy small{
  color:rgba(16,19,18,.48);
  font-size:15px;
  font-weight:850;
  text-transform:uppercase;
}

.today-route-header h2{
  margin:4px 0 0;
  color:#101312;
  font-size:62px;
  line-height:.96;
  letter-spacing:0;
}

.today-route-header strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:92px;
  height:92px;
  border-radius:24px;
  background:#101312;
  color:#fff;
  font-size:27px;
  font-weight:900;
}

.today-route-progress{
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:#e5e9e6;
}

.today-route-progress i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#ff6f51;
}

.today-route-copy{
  display:grid;
  gap:8px;
}

.today-route-copy p{
  margin:0;
  color:rgba(16,19,18,.72);
  font-size:24px;
  font-weight:750;
  line-height:1.34;
}

.today-route-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.today-route-steps button{
  display:grid;
  gap:5px;
  align-content:center;
  min-width:0;
  min-height:100px;
  border:1px solid rgba(16,19,18,.08);
  border-radius:18px;
  background:#eef1ef;
  color:#101312;
  cursor:pointer;
  padding:16px;
  text-align:left;
}

.today-route-steps button.is-next{
  border-color:rgba(255,111,81,.48);
  background:#fff0eb;
}

.today-route-steps button.is-started:not(.is-complete){
  background:#f6f1ec;
  border-color:rgba(16,19,18,.16);
}

.today-route-steps button.is-complete{
  background:#101312;
  color:#fff;
}

.today-route-steps b{
  font-size:20px;
  line-height:1;
}

.today-route-steps span{
  color:currentColor;
  opacity:.62;
  font-size:14px;
  font-weight:800;
  line-height:1.1;
}

.today-route-actions{
  display:flex;
  gap:18px;
  align-items:center;
}

.today-route-actions button{
  min-height:48px;
  border:0;
  border-radius:999px;
  background:#101312;
  color:#fff;
  cursor:pointer;
  padding:0 22px;
  font-size:15px;
  font-weight:900;
}

.today-route-actions button + button{
  background:#eef1ef;
  color:#101312;
}

.board-browser-window{
  position:absolute;
  container-type:size;
  min-width:720px;
  min-height:480px;
  user-select:none;
  touch-action:none;
  transition:box-shadow .18s ease, transform .18s ease;
}

.board-browser-window:hover{
  z-index:30;
}

.board-browser-window.is-dragging,
.board-browser-window.is-resizing{
  transition:none;
}

.board-vocab-card{
  min-width:1160px;
  min-height:780px;
  width:1540px;
  height:940px;
  overflow:visible;
  filter:drop-shadow(0 18px 38px rgba(88,79,18,.09));
}

.vocab-card-art{
  position:absolute;
  inset:-19% -12% -12%;
  width:124%;
  height:130%;
  object-fit:fill;
  pointer-events:none;
}

.vocab-card-drag-region{
  position:absolute;
  inset:0;
  z-index:1;
  cursor:grab;
}

.board-vocab-card.is-dragging .vocab-card-drag-region{
  cursor:grabbing;
}

.vocab-card-live{
  position:absolute;
  left:5.6%;
  right:5.6%;
  top:13%;
  bottom:2.8%;
  z-index:2;
  container-type:size;
  pointer-events:none;
}

.vocab-card-live a,
.vocab-card-live button{
  pointer-events:auto;
}

.browser-window-frame{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(19,22,20,.08);
  border-radius:14px;
  background:#f8f8f6;
  overflow:hidden;
  box-shadow:
    0 26px 60px rgba(21,25,23,.12),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.embedded-window-focus-target{
  position:absolute;
  inset:0;
  z-index:2;
  cursor:zoom-in;
}

.browser-window-preview-target{
  position:absolute;
  left:0;
  right:0;
  top:clamp(50px,4.5vw,68px);
  bottom:0;
  z-index:6;
  cursor:zoom-in;
  background:transparent;
  border:0;
  padding:0;
}

.browser-window-preview-target:focus-visible{
  outline:3px solid rgba(47,102,246,.72);
  outline-offset:-5px;
  border-radius:0 0 12px 12px;
}

.browser-window-titlebar{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 clamp(50px,4.5vw,68px);
  padding:0 clamp(18px,2vw,30px);
  border-bottom:1px solid rgba(20,23,22,.08);
  background:linear-gradient(180deg,#f8f8f8,#eceeec);
  color:#69706c;
  cursor:grab;
}

.board-browser-window.is-dragging .browser-window-titlebar{
  cursor:grabbing;
}

.browser-window-titlebar span{
  position:absolute;
  left:50%;
  max-width:44%;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#6c716e;
  font-size:clamp(13px,1.1vw,18px);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transform:translateX(-50%);
}

.browser-dot{
  position:relative;
  flex:0 0 18px;
  width:18px;
  height:18px;
  border:0;
  border-radius:50%;
  padding:0;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
  cursor:pointer;
}

.browser-dot::after{
  content:"";
  position:absolute;
  inset:-13px;
  border-radius:999px;
}

.browser-dot.red{background:#ff5f57}
.browser-dot.yellow{background:#febc2e}
.browser-dot.green{background:#6d7cff}

.browser-dot:focus-visible,
.focus-back-button:focus-visible{
  outline:3px solid rgba(47,102,246,.72);
  outline-offset:3px;
}

.browser-window-live-page{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center start;
  padding:5.6cqw 6.4cqw;
  background:
    radial-gradient(circle at 76% 13%,rgba(145,198,235,.18),transparent 34%),
    linear-gradient(180deg,#fbfbf8,#f1f2ef);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.browser-window-live-page.board-embedded-page{
  display:block;
  padding:0!important;
  background:#eef1ef!important;
  overflow:hidden;
}

.browser-window-live-page.board-embedded-page iframe{
  display:block;
  width:100%!important;
  height:100%!important;
  border:0;
  background:#eef1ef;
}

.browser-window-live-page main{
  width:min(100%,86cqw);
  max-width:1500px;
}

.browser-window-live-page span{
  display:block;
  margin-bottom:1.25cqw;
  color:#6e7571;
  font-size:clamp(24px,3.1cqw,54px);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.browser-window-live-page h2{
  max-width:11ch;
  margin:0;
  color:#111413;
  font-size:clamp(116px,13.5cqw,270px);
  line-height:.86;
  letter-spacing:-.055em;
}

.browser-window-live-page p{
  max-width:42em;
  margin:2.2cqw 0 0;
  color:#5a605d;
  font-size:clamp(32px,3.7cqw,68px);
  line-height:1.22;
}

.browser-window-progress{
  width:min(100%,70cqw);
  height:clamp(18px,1.8cqw,34px);
  margin:3cqw 0 1.5cqw;
  border-radius:999px;
  background:rgba(17,20,19,.08);
  overflow:hidden;
}

.browser-window-progress i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:#111413;
}

.browser-window-live-page small{
  display:block;
  color:#69706c;
  font-size:clamp(24px,2.7cqw,48px);
  font-weight:700;
}

.browser-window-live-page a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(68px,6.2cqw,116px);
  margin-top:2.8cqw;
  padding:0 clamp(34px,4cqw,70px);
  border-radius:999px;
  background:#111413;
  color:#fff;
  font-size:clamp(24px,2.7cqw,46px);
  font-weight:700;
  text-decoration:none;
}

.browser-window-live-page a:hover{
  background:#2b302e;
}

.board-saved-page,
.board-account-page{
  place-items:start;
  padding:30px;
  background:linear-gradient(180deg,#fbfbf8,#eef1ef);
}

.board-saved-page main,
.board-account-page main{
  width:100%;
  max-width:none;
  display:grid;
  gap:22px;
}

.board-window-page-header{
  display:grid;
  grid-template-columns:minmax(220px,420px) minmax(260px,1fr);
  gap:14px 28px;
  align-items:end;
}

.board-window-page-header span{
  grid-column:1 / -1;
  margin:0;
  color:rgba(16,19,18,.48);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.board-window-page-header h2{
  max-width:12ch;
  margin:0;
  color:#101312;
  font-size:clamp(42px,5.2cqw,78px);
  line-height:.9;
  letter-spacing:0;
}

.board-window-page-header p{
  max-width:520px;
  margin:0 0 6px;
  color:rgba(16,19,18,.62);
  font-size:15px;
  font-weight:760;
  line-height:1.28;
}

.saved-window-layout{
  display:grid;
  grid-template-columns:minmax(160px,220px) minmax(0,1fr);
  gap:18px;
  min-height:0;
}

.saved-window-categories{
  display:grid;
  align-content:start;
  gap:8px;
}

.saved-window-categories button{
  min-height:58px;
  border:1px solid rgba(16,19,18,.08);
  border-radius:14px;
  background:rgba(255,255,252,.75);
  color:#101312;
  padding:12px;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.saved-window-categories button.is-active{
  background:#101312;
  color:#fff;
}

.saved-window-categories b,
.saved-window-categories span{
  display:block;
  margin:0;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
}

.saved-window-categories span{
  margin-top:3px;
  color:rgba(16,19,18,.52);
  font-weight:800;
}

.saved-window-categories .is-active span{
  color:rgba(255,255,255,.64);
}

.saved-window-content{
  min-width:0;
  display:grid;
  gap:16px;
}

.board-saved-page .saved-category-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.board-saved-page .saved-category-tools p{
  margin:0;
  font-size:14px;
}

.board-saved-page .saved-category-tools label{
  flex:0 1 340px;
  margin:0;
}

.board-saved-page .saved-item-list{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}

.board-saved-page .saved-item-card{
  min-height:190px;
  border-radius:16px;
  padding:18px;
  animation:none;
  opacity:1;
  transform:none;
  box-shadow:0 18px 48px rgba(22,25,23,.07), inset 0 0 0 1px rgba(17,20,19,.055);
}

.board-saved-page .saved-item-card span,
.board-saved-page .saved-empty-state span{
  margin-bottom:24px;
  font-size:11px;
}

.board-saved-page .saved-item-card strong{
  font-size:22px;
  letter-spacing:0;
}

.board-saved-page .saved-item-card p,
.board-saved-page .saved-empty-state p{
  font-size:14px;
}

.board-saved-page .saved-empty-state{
  min-height:250px;
  border-radius:18px;
  padding:22px;
}

.board-saved-page .saved-empty-state h3{
  margin:0;
  font-size:34px;
  line-height:1;
}

.board-account-page .account-dashboard{
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:16px;
  width:100%;
  max-width:none;
  margin-top:0;
}

.board-account-page .account-auth-panel,
.board-account-page .account-profile-card,
.board-account-page .account-loading{
  min-height:0;
  border-radius:18px;
  padding:24px;
}

.board-account-page .account-form input{
  height:54px;
  border-radius:14px;
  font-size:17px;
}

.board-account-page .account-form button,
.board-account-page .account-secondary-action,
.board-account-page .account-mode-toggle{
  height:52px;
}

.upload-live-page .upload-preview{
  width:min(100%,960px);
  height:clamp(260px,58cqh,720px);
  margin-top:22px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(244,245,242,.72);
  overflow:hidden;
}

.upload-live-page .upload-preview img,
.upload-live-page .upload-preview iframe{
  width:100%;
  height:100%;
  border:0;
  object-fit:contain;
}

.upload-file-icon{
  display:grid;
  place-items:center;
  gap:14px;
  color:#202322;
}

.upload-file-icon b{
  min-width:86px;
  padding:18px 20px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 16px 44px rgba(30,31,28,.1);
  text-align:center;
  font-size:22px;
}

.upload-file-icon span{
  max-width:520px;
  color:#6f7672;
  font-size:18px;
  font-weight:700;
  text-align:center;
  overflow-wrap:anywhere;
}

.vocab-live-page{
  place-items:stretch;
  padding:4.4cqw;
  background:
    radial-gradient(circle at 78% 16%,rgba(255,228,90,.22),transparent 30%),
    linear-gradient(180deg,#fffdf0,#f5f1d4);
}

.vocab-live-shell{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:3cqw;
  width:100%;
  height:100%;
  max-width:none;
}

.vocab-card-live .vocab-live-shell{
  grid-template-rows:minmax(0,1fr) auto;
  gap:1.5cqw;
}

.vocab-live-shell header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2cqw;
}

.vocab-live-shell header span{
  margin:0;
  color:#6f6723;
  font-size:clamp(22px,2.4cqw,44px);
}

.vocab-live-shell header a{
  min-height:clamp(46px,4cqw,74px);
  margin:0;
  padding:0 clamp(22px,2.5cqw,42px);
  background:#111413;
  color:#fff;
  font-size:clamp(16px,1.7cqw,28px);
  white-space:nowrap;
}

.vocab-card-live .vocab-live-shell header span{
  font-size:clamp(16px,1.55cqw,28px);
}

.vocab-card-live .vocab-live-shell header a{
  min-height:clamp(34px,2.8cqw,50px);
  padding:0 clamp(18px,1.9cqw,32px);
  border-radius:0;
  font-size:clamp(13px,1.15cqw,20px);
  text-decoration:underline;
}

.vocab-live-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:0;
  border-radius:clamp(24px,3cqw,48px);
  background:rgba(255,255,255,.78);
  box-shadow:
    0 24px 48px rgba(88,79,18,.12),
    inset 0 0 0 1px rgba(17,20,19,.07);
  overflow:hidden;
}

.vocab-card-live .vocab-live-card{
  align-self:stretch;
  min-height:0;
  transform:translateY(.2cqw);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.vocab-live-front,
.vocab-live-back{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(36px,5cqw,86px);
}

.vocab-live-front{
  background:linear-gradient(180deg,#fff7a0,#ffe86a);
}

.vocab-card-live .vocab-live-front{
  background:transparent;
}

.vocab-live-front small,
.vocab-live-back span{
  color:#6f6723;
  font-size:clamp(24px,2.25cqw,42px);
  font-weight:700;
  text-transform:uppercase;
}

.vocab-live-front b{
  margin:.6cqw 0;
  color:#111413;
  font-size:clamp(118px,15cqw,290px);
  line-height:.9;
  font-weight:700;
}

.vocab-card-live .vocab-live-front,
.vocab-card-live .vocab-live-back{
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:clamp(30px,3.3cqw,68px);
  text-align:center;
}

.vocab-card-live .vocab-live-front{
  transform:translate(-1.2cqw,-2.2cqw);
}

.vocab-card-live .vocab-live-back{
  transform:translate(-2.4cqw,-2.2cqw);
}

.vocab-card-live .vocab-live-front small,
.vocab-card-live .vocab-live-back span{
  display:block;
  margin:0 0 clamp(28px,3.4cqw,56px);
}

.vocab-card-live .vocab-live-front b{
  margin:0;
  display:block;
  max-width:94%;
  font-size:clamp(126px,13.6cqw,270px);
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:center;
  transform:translateX(.4cqw);
}

.vocab-card-live .vocab-live-back strong{
  margin:0;
  display:block;
  max-width:92%;
  font-size:clamp(70px,7.2cqw,138px);
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:center;
}

.vocab-card-live .vocab-live-front b.vocab-fit-medium{
  max-width:96%;
  font-size:clamp(104px,11.2cqw,220px);
}

.vocab-card-live .vocab-live-front b.vocab-fit-long{
  max-width:98%;
  font-size:clamp(72px,8cqw,158px);
  line-height:.95;
}

.vocab-card-live .vocab-live-front b.vocab-fit-xlong{
  max-width:97%;
  font-size:clamp(58px,6.6cqw,132px);
  line-height:1;
}

.vocab-card-live .vocab-live-front b.vocab-fit-xxlong{
  max-width:98%;
  font-size:clamp(44px,5.2cqw,104px);
  line-height:1.04;
}

.vocab-card-live .vocab-live-back strong.vocab-fit-medium{
  max-width:94%;
  font-size:clamp(60px,6.1cqw,118px);
}

.vocab-card-live .vocab-live-back strong.vocab-fit-long{
  max-width:94%;
  font-size:clamp(48px,5cqw,98px);
  line-height:1;
}

.vocab-card-live .vocab-live-back strong.vocab-fit-xlong{
  max-width:96%;
  font-size:clamp(38px,4.1cqw,82px);
  line-height:1.04;
}

.vocab-card-live .vocab-live-back strong.vocab-fit-xxlong{
  max-width:97%;
  font-size:clamp(30px,3.4cqw,68px);
  line-height:1.08;
}

.vocab-card-live .vocab-live-back p{
  font-size:clamp(24px,2.8cqw,50px);
}

.vocab-live-front em{
  color:#3e3b25;
  font-size:clamp(34px,4cqw,76px);
  font-style:normal;
  font-weight:700;
}

.vocab-live-back{
  opacity:.035;
  filter:blur(26px);
  transition:opacity .2s ease, filter .2s ease;
}

.vocab-live-card.is-revealed .vocab-live-back{
  opacity:1;
  filter:none;
}

.vocab-live-back strong{
  display:block;
  margin:.8cqw 0 1.8cqw;
  color:#111413;
  font-size:clamp(72px,8cqw,150px);
  line-height:.95;
}

.vocab-live-back p{
  max-width:100%;
  margin:0;
  color:#4d4b37;
  font-size:clamp(34px,4cqw,72px);
  line-height:1.28;
}

.vocab-live-actions{
  display:flex;
  justify-content:center;
  gap:1.2cqw;
  margin-top:1.9cqw;
  transform:translateY(2.1cqw);
}

.vocab-live-actions button{
  min-width:clamp(130px,13cqw,230px);
  min-height:clamp(62px,5.6cqw,106px);
  border:0;
  border-radius:999px;
  background:#111413;
  color:#fff;
  cursor:pointer;
  font-size:clamp(24px,2.5cqw,46px);
  font-weight:700;
}

.vocab-card-live .vocab-live-actions button{
  min-width:clamp(170px,14cqw,260px);
  min-height:clamp(64px,5.5cqw,100px);
  font-size:clamp(24px,2.35cqw,42px);
}

.vocab-live-actions button:hover{
  background:#2b302e;
}

.vocab-reveal-button{
  min-width:clamp(220px,22cqw,380px);
}

.browser-resize-zone{
  position:absolute;
  z-index:3;
  display:block;
  border:0;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  box-shadow:none;
  opacity:0;
  padding:0;
  font-size:0;
  color:transparent;
}

.browser-resize-zone:focus,
.browser-resize-zone:focus-visible,
.browser-resize-zone:active{
  outline:0;
  box-shadow:none;
}

.resize-nw{left:-7px;top:-7px;width:24px;height:24px;cursor:nwse-resize}
.resize-n{left:18px;right:18px;top:-7px;height:14px;cursor:ns-resize}
.resize-ne{right:-7px;top:-7px;width:24px;height:24px;cursor:nesw-resize}
.resize-e{right:-7px;top:18px;bottom:18px;width:14px;cursor:ew-resize}
.resize-se{right:-8px;bottom:-8px;width:28px;height:28px;cursor:nwse-resize}
.resize-s{left:18px;right:18px;bottom:-7px;height:14px;cursor:ns-resize}
.resize-sw{left:-8px;bottom:-8px;width:28px;height:28px;cursor:nesw-resize}
.resize-w{left:-7px;top:18px;bottom:18px;width:14px;cursor:ew-resize}

.folder-art{
  display:block;
  width:100%;
  height:calc(100% - 36px);
  object-fit:contain;
  filter:none;
  pointer-events:none;
}

.desktop-label{
  position:absolute;
  left:50%;
  bottom:0;
  max-width:96%;
  padding:2px 10px 4px;
  border-radius:9px;
  color:#202322;
  text-align:center;
  transform:translateX(-50%);
  pointer-events:none;
}

.desktop-label h3{
  margin:0;
  font-size:30px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:0;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  white-space:nowrap;
}

.board-object:hover .desktop-label,
.board-object.is-dragging .desktop-label{
  background:rgba(68,132,205,.16);
}

.board-object.note-launcher{
  display:grid;
  place-items:center;
  padding:0;
}

.add-note-board-ui{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:1fr auto auto;
  justify-items:center;
  gap:6px;
  padding:12px 12px 18px;
  color:#202322;
  pointer-events:none;
}

.add-note-board-ui span{
  position:relative;
  width:76%;
  height:100%;
  min-height:150px;
  border:1px solid rgba(23,28,26,.1);
  border-radius:7px;
  background:#fffdfa;
  box-shadow:0 18px 38px rgba(31,36,34,.12);
  transform:rotate(-1.2deg);
}

.add-note-board-ui span::before,
.add-note-board-ui span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:5px;
  border-radius:999px;
  background:rgba(32,35,34,.3);
  transform:translate(-50%,-50%);
}

.add-note-board-ui span::after{
  width:5px;
  height:34px;
}

.add-note-board-ui h3{
  margin:2px 0 0;
  font-size:28px;
  line-height:1.05;
}

.add-note-board-ui p{
  margin:0;
  color:rgba(32,35,34,.58);
  font-size:14px;
  font-weight:700;
}

.board-text-note{
  position:absolute;
  min-width:140px;
  max-width:none;
  min-height:44px;
  padding:6px 8px;
  border-radius:8px;
  color:#1f2221;
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
  resize:none;
  box-sizing:border-box;
}

.board-text-note.is-paper-note{
  min-width:320px;
  min-height:260px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
  padding:22px 24px 24px;
  border:1px solid rgba(22,27,25,.08);
  border-radius:10px;
  background:#fffefa;
  box-shadow:0 24px 56px rgba(30,33,31,.12);
}

.text-note-title{
  min-width:0;
  overflow:hidden;
  color:#1c211f;
  font-size:24px;
  font-weight:800;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.board-text-note::before{
  content:"";
  position:absolute;
  inset:-3px;
  border:2.5px solid rgba(28,127,255,.86);
  border-radius:3px;
  opacity:0;
  pointer-events:none;
}

.board-text-note:hover,
.board-text-note:focus-within{
  background:rgba(255,255,255,.18);
}

.board-text-note.is-dragging{
  cursor:grabbing;
  transform:translateY(-2px);
  background:rgba(255,255,255,.22);
}

.board-text-note.is-editing{
  cursor:text;
  user-select:text;
  background:rgba(255,255,255,.16);
}

.board-text-note.is-resizing{
  background:rgba(255,255,255,.2);
}

.board-text-note:hover::before,
.board-text-note:focus-within::before,
.board-text-note.is-resizing::before,
.board-text-note.is-editing::before,
.board-text-note.is-selected::before{
  opacity:1;
}

.text-note-content{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:auto;
  box-sizing:border-box;
  outline:0;
  font-size:34px;
  line-height:1.14;
  font-weight:700;
  letter-spacing:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  cursor:grab;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}

.board-text-note.is-paper-note .text-note-content{
  overflow:hidden;
  color:#2c302f;
  font-weight:500;
  line-height:1.38;
  text-shadow:none;
}

.board-text-note.is-paper-note .text-note-content:empty::before{
  content:"Click to write";
}

.board-text-note.is-editing .text-note-content{
  cursor:text;
}

.board-image-object{
  position:absolute;
  min-width:80px;
  min-height:80px;
  user-select:none;
  touch-action:none;
  cursor:grab;
  box-sizing:border-box;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
  transform:translateZ(0);
}

.board-image-object img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:none;
  box-shadow:none;
}

.board-image-object.is-dragging{
  cursor:grabbing;
}

.board-image-object.is-dragging .text-note-handle{
  opacity:0;
  pointer-events:none;
}

.board-image-object::before{
  content:"";
  position:absolute;
  inset:0;
  outline:3px solid rgba(28,127,255,.94);
  outline-offset:0;
  opacity:0;
  pointer-events:none;
  z-index:2;
}

.board-image-object:hover::before,
.board-image-object.is-selected::before,
.board-image-object.is-resizing::before,
.board-image-object.is-dragging::before{
  opacity:1;
}

.text-note-content ul,
.text-note-content ol{
  margin:0;
  padding-left:1.15em;
}

.text-note-content li{
  margin:.08em 0;
  padding-left:.05em;
}

.text-note-content:empty::before{
  content:"Type here";
  color:rgba(31,34,33,.32);
}

.text-note-handle{
  position:absolute;
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  opacity:0;
  z-index:3;
  padding:0;
  pointer-events:none;
}

.text-note-handle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2.5px rgba(28,127,255,.94);
  transform:translate(-50%,-50%);
}

.board-text-note:hover .text-note-handle,
.board-text-note:focus-within .text-note-handle,
.board-text-note.is-resizing .text-note-handle,
.board-text-note.is-editing .text-note-handle,
.board-text-note.is-selected .text-note-handle,
.board-image-object:hover .text-note-handle,
.board-image-object.is-resizing .text-note-handle,
.board-image-object.is-selected .text-note-handle{
  opacity:1;
  pointer-events:auto;
}

.handle-nw{left:-14px;top:-14px;cursor:nwse-resize}
.handle-n{left:50%;top:-16px;width:72px;transform:translateX(-50%);cursor:ns-resize}
.handle-ne{right:-14px;top:-14px;cursor:nesw-resize}
.handle-e{right:-16px;top:50%;height:72px;transform:translateY(-50%);cursor:ew-resize}
.handle-se{right:-14px;bottom:-14px;cursor:nwse-resize}
.handle-s{left:50%;bottom:-16px;width:72px;transform:translateX(-50%);cursor:ns-resize}
.handle-sw{left:-14px;bottom:-14px;cursor:nesw-resize}
.handle-w{left:-16px;top:50%;height:72px;transform:translateY(-50%);cursor:ew-resize}

.board-note{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:3px;
  padding:18px 16px;
  border-radius:15px;
  background:var(--note);
  color:#2a1712;
  box-shadow:0 24px 48px rgba(33,24,20,.2);
  transform:rotate(-1.4deg);
  pointer-events:none;
}

.board-note b,
.board-note span{
  display:block;
}

.board-note b{
  margin-bottom:11px;
  font-size:12px;
  line-height:1;
}

.board-note span{
  font-size:11px;
  line-height:1.16;
  opacity:.78;
}

.note-editor-layer{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(238,241,239,.62);
  backdrop-filter:blur(8px);
}

.note-editor-card{
  width:min(1180px,94vw);
  height:min(860px,92vh);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  border:1px solid rgba(19,22,20,.08);
  border-radius:18px;
  background:#f6f7f5;
  box-shadow:0 44px 90px rgba(22,27,24,.18);
  overflow:hidden;
}

.note-editor-topbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:62px;
  padding:0 18px;
  border-bottom:1px solid rgba(22,26,24,.08);
  background:linear-gradient(180deg,#f9faf8,#eef0ed);
}

.note-editor-window-dots{
  display:flex;
  gap:8px;
}

.note-window-dot{
  width:13px;
  height:13px;
  border:0;
  border-radius:50%;
  padding:0;
  background:#febc2e;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}

button.note-window-dot{
  cursor:pointer;
}

.note-window-close{background:#ff5f57}
.note-editor-window-dots i:nth-of-type(2){background:#6d7cff}

.note-editor-title{
  width:100%;
  min-width:0;
  height:42px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#171b1a;
  font-size:22px;
  font-weight:800;
  outline:0;
  text-align:center;
}

.note-editor-title::placeholder{
  color:rgba(23,27,26,.38);
}

.note-editor-actions{
  display:flex;
  gap:10px;
}

.note-editor-actions button,
.note-editor-formatbar button{
  border:0;
  background:#fff;
  color:#171b1a;
  cursor:pointer;
  font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(20,24,22,.08);
}

.note-editor-actions button{
  min-height:38px;
  border-radius:999px;
  padding:0 16px;
  font-size:14px;
}

.note-editor-actions button[data-note-editor-save]{
  background:#171b1a;
  color:#fff;
}

.note-editor-formatbar{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:8px 22px;
  border-bottom:1px solid rgba(22,26,24,.07);
  background:#f9faf8;
}

.note-editor-formatbar button{
  width:38px;
  height:38px;
  border-radius:8px;
  font-size:17px;
}

.note-editor-formatbar button:hover,
.note-editor-actions button:hover{
  transform:translateY(-1px);
}

.note-editor-workspace{
  min-height:0;
  display:grid;
  place-items:start center;
  padding:34px;
  overflow:auto;
  background:#e7e9e5;
}

.note-editor-page{
  width:min(820px,100%);
  min-height:980px;
  padding:72px 82px;
  border:1px solid rgba(24,28,26,.08);
  background:#fffefa;
  color:#202322;
  outline:0;
  box-shadow:0 26px 58px rgba(30,33,31,.16);
  font-size:21px;
  line-height:1.58;
  font-weight:500;
  overflow-wrap:anywhere;
}

.note-editor-page:empty::before{
  content:"Start writing...";
  color:rgba(32,35,34,.36);
}

.note-editor-page ul,
.note-editor-page ol{
  padding-left:1.3em;
}

@media (max-width:760px){
  .note-editor-layer{
    padding:12px;
  }

  .note-editor-card{
    width:100%;
    height:100%;
    border-radius:14px;
  }

  .note-editor-topbar{
    grid-template-columns:1fr auto;
  }

  .note-editor-window-dots{
    display:none;
  }

  .note-editor-title{
    text-align:left;
    font-size:18px;
  }

  .note-editor-workspace{
    padding:18px;
  }

  .note-editor-page{
    min-height:760px;
    padding:42px 28px;
    font-size:18px;
  }
}

.focus-layer{
  position:fixed;
  inset:0;
  z-index:50;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}

.focus-layer.is-open{
  opacity:1;
  pointer-events:auto;
}

.focus-ghost{
  position:absolute;
  inset:0;
  background:rgba(238,241,239,.42);
  backdrop-filter:blur(4px);
  transition:opacity .42s ease, backdrop-filter .42s ease;
}

.focus-layer.is-closing .focus-ghost{
  opacity:.08;
  backdrop-filter:blur(.75px);
}

.focus-card{
  position:fixed;
  border-radius:28px;
  filter:drop-shadow(0 42px 70px rgba(28,27,23,.14));
  overflow:hidden;
  transform-origin:0 0;
  will-change:transform, filter;
  transition:filter .42s ease, opacity .32s ease;
  contain:layout paint;
}

.focus-card.is-closing{
  pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(28,27,23,.1));
}

.focus-card.is-closing > *{
  transition:opacity .28s ease;
  opacity:.72;
}

.focus-back-button{
  position:fixed;
  left:24px;
  top:22px;
  z-index:4;
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:rgba(247,248,246,.86);
  color:#151817;
  cursor:pointer;
  font-size:28px;
  font-weight:800;
  line-height:1;
  box-shadow:0 18px 40px rgba(28,32,30,.12);
  backdrop-filter:blur(12px);
}

.focus-back-button:hover{
  background:#fff;
  transform:translateX(-2px);
}

.focus-window-card{
  overflow:hidden;
  border-radius:0;
  background:#fbfbf8;
}

.focus-account-card{
  border-radius:0;
  filter:none;
}

.focus-window-surface{
  position:absolute;
  inset:0;
  display:flex;
  min-width:0;
  min-height:0;
  border-radius:inherit;
  overflow:hidden;
  background:#fbfbf8;
  box-shadow:inset 0 0 0 1px rgba(18,22,20,.07);
}

.focus-window-surface .browser-window-live-page{
  flex:1 1 auto;
}

.focus-vocab-shell{
  position:absolute;
  inset:0;
  padding:4vw 5vw;
  container-type:size;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(circle at 72% 20%,rgba(255,232,108,.16),transparent 34%),
    linear-gradient(180deg,#fbfbf7,#eef1ef);
}

.focus-vocab-shell .vocab-live-shell{
  height:100%;
}

.focus-doc-surface{
  display:grid;
  place-items:center start;
  padding:8vw 8vw calc(8vw + 96px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.focus-doc-surface main{
  max-width:980px;
}

.focus-doc-surface span{
  display:block;
  margin-bottom:20px;
  color:#6b706c;
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
}

.focus-doc-surface h2{
  margin:0;
  color:#111413;
  font-size:clamp(76px,9vw,156px);
  line-height:.9;
  letter-spacing:-.06em;
}

.focus-doc-surface p{
  max-width:760px;
  margin:30px 0 0;
  color:#5e6460;
  font-size:28px;
  line-height:1.25;
}

.focus-doc-surface a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:130px;
  min-height:54px;
  margin-top:36px;
  border-radius:999px;
  background:#111413;
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

.focus-saved-surface{
  display:block;
  padding:clamp(72px,7vw,118px) clamp(54px,7vw,128px) clamp(96px,9vw,150px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(circle at 76% 18%,rgba(210,236,243,.46),transparent 32%),
    linear-gradient(180deg,rgba(252,252,248,.96),rgba(239,243,241,.94));
}

.saved-category-view{
  max-width:1420px;
}

.saved-category-header{
  display:grid;
  grid-template-columns:minmax(260px,520px) minmax(260px,480px);
  gap:clamp(34px,7vw,110px);
  align-items:end;
  margin-bottom:clamp(44px,5vw,76px);
}

.saved-category-header span{
  grid-column:1 / -1;
  color:rgba(17,20,19,.48);
  font-size:17px;
  font-weight:850;
  letter-spacing:.02em;
}

.saved-category-header h2{
  margin:0;
  color:#101312;
  font-size:clamp(72px,9vw,138px);
  line-height:.88;
  letter-spacing:-.065em;
}

.saved-category-tools{
  display:grid;
  gap:18px;
  align-self:end;
}

.saved-category-header p{
  max-width:520px;
  margin:0 0 10px;
  color:rgba(17,20,19,.58);
  font-size:clamp(19px,2vw,28px);
  font-weight:750;
  line-height:1.16;
}

.saved-category-tools label{
  display:flex;
  align-items:center;
  gap:12px;
  width:min(100%,460px);
  min-height:52px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,252,.76);
  box-shadow:inset 0 0 0 1px rgba(17,20,19,.07);
}

.saved-category-tools label span{
  margin:0;
  color:rgba(17,20,19,.4);
  font-size:13px;
  white-space:nowrap;
}

.saved-category-tools input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#111413;
  font:inherit;
  font-size:16px;
  font-weight:800;
}

.saved-category-tools input::placeholder{
  color:rgba(17,20,19,.28);
}

.saved-item-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,2.2vw,36px);
}

.saved-item-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:clamp(230px,18vw,320px);
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,252,.94);
  box-shadow:
    0 26px 74px rgba(22,25,23,.08),
    inset 0 0 0 1px rgba(17,20,19,.055);
  transform:translateY(18px);
  opacity:0;
  animation:docRise .44s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--delay) * 38ms);
}

.saved-item-card span,
.saved-empty-state span{
  display:block;
  margin-bottom:clamp(44px,5vw,72px);
  color:rgba(17,20,19,.4);
  font-size:14px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.saved-item-card strong{
  display:block;
  color:#111413;
  font-size:clamp(23px,2.2vw,34px);
  line-height:1.02;
  letter-spacing:-.04em;
}

.saved-item-card p{
  display:-webkit-box;
  max-width:100%;
  margin:14px 0 0;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  color:rgba(17,20,19,.56);
  font-size:16px;
  font-weight:750;
  line-height:1.2;
}

.saved-item-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:28px;
}

.saved-item-card a,
.saved-item-card button,
.saved-empty-state a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-width:104px;
  min-height:42px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:#101312;
  color:#fff;
  font-size:14px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
}

.saved-item-card button{
  min-width:92px;
  background:rgba(17,20,19,.07);
  color:rgba(17,20,19,.6);
}

.saved-empty-state a{
  margin-top:28px;
}

.saved-empty-state{
  max-width:760px;
  min-height:360px;
  padding:34px;
  border-radius:28px;
  background:rgba(255,255,252,.9);
  box-shadow:
    0 30px 90px rgba(22,25,23,.08),
    inset 0 0 0 1px rgba(17,20,19,.055);
}

.saved-empty-state h3{
  margin:0;
  color:#111413;
  font-size:clamp(44px,5vw,78px);
  line-height:.94;
  letter-spacing:-.055em;
}

.saved-empty-state p{
  max-width:560px;
  margin:22px 0 0;
  color:rgba(17,20,19,.58);
  font-size:clamp(18px,1.5vw,22px);
  font-weight:750;
  line-height:1.2;
}

.focus-account-surface{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1320px) 1fr;
  gap:0;
  align-items:start;
  justify-items:start;
  padding:clamp(64px,7vw,104px) clamp(56px,6vw,104px) calc(clamp(64px,7vw,104px) + 120px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(circle at 84% 18%,rgba(185,211,225,.32),transparent 34%),
    linear-gradient(180deg,#fbfbf8,#eef1ef);
  color:#101312;
}

.account-heading{
  align-self:start;
  display:grid;
  grid-template-columns:minmax(280px,430px) minmax(360px,620px);
  align-items:end;
  gap:clamp(42px,5vw,78px);
  width:100%;
  max-width:1120px;
}

.account-heading h2{
  max-width:none;
  font-size:clamp(62px,6vw,104px);
  line-height:.82;
}

.account-heading p{
  margin:0 0 8px;
  max-width:520px;
  font-size:18px;
  line-height:1.22;
}

.account-dashboard{
  display:grid;
  grid-template-columns:minmax(340px,420px) minmax(560px,1fr);
  gap:20px;
  width:100%;
  max-width:1320px;
  grid-column:1;
  margin-top:54px;
}

.account-auth-panel,
.account-profile-card,
.account-loading{
  width:100%;
  min-height:0;
  border-radius:34px;
  background:rgba(255,255,252,.78);
  box-shadow:0 28px 72px rgba(28,32,30,.08);
  padding:44px;
}

.account-auth-panel,
.account-loading{
  min-height:520px;
}

.account-loading{
  display:grid;
  place-items:center;
  color:rgba(16,19,18,.52);
  font-size:18px;
  font-weight:700;
}

.account-form{
  display:grid;
  gap:22px;
}

.account-form label{
  display:grid;
  gap:8px;
  color:rgba(16,19,18,.56);
  font-size:13px;
  font-weight:800;
}

.account-form input{
  width:100%;
  height:68px;
  border:0;
  border-radius:22px;
  background:#eef1ef;
  color:#101312;
  padding:0 18px;
  font:inherit;
  font-size:22px;
  font-weight:700;
  outline:none;
}

.account-form input:focus{
  box-shadow:0 0 0 3px rgba(28,127,255,.78);
}

.account-form button,
.account-secondary-action,
.account-mode-toggle{
  height:64px;
  border:0;
  border-radius:999px;
  background:#080d0b;
  color:#fff;
  padding:0 24px;
  font:inherit;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

.account-mode-toggle,
.account-secondary-action{
  margin-top:18px;
  background:#eef1ef;
  color:#101312;
}

.account-profile-card{
  display:flex;
  flex-direction:column;
  grid-row:span 2;
  min-height:420px;
}

.account-profile-card > span{
  color:rgba(16,19,18,.48);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}

.account-profile-card h3{
  margin:22px 0 8px;
  font-size:clamp(58px,6vw,92px);
  line-height:.92;
  letter-spacing:0;
}

.account-profile-card p{
  margin:0;
  color:rgba(16,19,18,.58);
  font-size:20px;
  font-weight:700;
}

.account-plan-panel{
  display:grid;
  grid-template-columns:minmax(220px,.82fr) minmax(300px,1fr);
  gap:16px;
  align-items:stretch;
  border-radius:30px;
  background:rgba(255,255,252,.78);
  box-shadow:0 22px 62px rgba(28,32,30,.07);
  padding:24px;
}

.account-auth-panel .account-plan-panel{
  grid-template-columns:1fr;
  margin-bottom:28px;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0 0 28px;
  border-bottom:1px solid rgba(16,19,18,.08);
}

.account-plan-current{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
}

.account-plan-current > span,
.account-plan-option > span{
  color:rgba(16,19,18,.48);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}

.account-plan-current h3{
  margin:0;
  color:#101312;
  font-size:clamp(36px,3.8vw,58px);
  line-height:.92;
}

.account-plan-current p,
.account-plan-option p{
  margin:0;
  color:rgba(16,19,18,.58);
  font-size:14px;
  font-weight:700;
  line-height:1.36;
}

.account-plan-current .account-plan-status{
  color:#101312;
  font-weight:850;
}

.account-ai-allowance{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0 14px;
  align-items:center;
  margin-top:8px;
  border-radius:20px;
  background:#eef1ef;
  padding:16px;
}

.account-ai-allowance b{
  grid-row:span 2;
  color:#101312;
  font-size:46px;
  line-height:.88;
}

.account-ai-allowance span{
  color:#101312;
  font-size:14px;
  font-weight:850;
}

.account-ai-allowance small{
  color:rgba(16,19,18,.48);
  font-size:12px;
  font-weight:800;
}

.account-plan-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.account-auth-panel .account-plan-options{
  grid-template-columns:1fr 1fr;
}

.account-plan-option{
  display:grid;
  gap:10px;
  align-content:start;
  min-height:176px;
  border-radius:22px;
  background:#eef1ef;
  padding:18px;
}

.account-plan-option b{
  color:#101312;
  font-size:34px;
  line-height:.96;
}

.account-plan-option.is-pro{
  background:#101312;
  color:#fff;
}

.account-plan-option.is-pro > span,
.account-plan-option.is-pro p{
  color:rgba(255,255,255,.62);
}

.account-plan-option.is-pro b{
  color:#fff;
}

.account-plan-option a,
.account-plan-option button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:38px;
  margin-top:4px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#101312;
  cursor:pointer;
  padding:0 16px;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
  font-family:inherit;
}

.account-billing-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  grid-column:1 / -1;
  padding-top:4px;
}

.account-billing-links a{
  color:rgba(16,19,18,.58);
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  text-transform:uppercase;
}

.account-billing-links a:hover{
  color:#101312;
}

.account-analytics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  grid-column:1 / -1;
}

.account-metric{
  display:grid;
  align-content:center;
  gap:10px;
  min-height:122px;
  border-radius:24px;
  background:#eef1ef;
  padding:22px;
  color:rgba(16,19,18,.5);
  box-shadow:inset 0 0 0 1px rgba(16,19,18,.035);
}

.account-metric span{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}

.account-metric b{
  color:#101312;
  font-size:clamp(30px,3.4vw,48px);
  line-height:.95;
}

.account-insight-panel,
.account-route-panel{
  min-height:260px;
  border-radius:30px;
  background:rgba(255,255,252,.74);
  box-shadow:0 22px 62px rgba(28,32,30,.07);
  padding:28px;
}

.account-insight-panel > span,
.account-route-panel > span{
  display:block;
  margin-bottom:20px;
  color:rgba(16,19,18,.48);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}

.account-insight-list{
  display:grid;
  gap:12px;
}

.account-insight-list div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 16px;
  align-items:baseline;
  padding:14px 0;
  border-top:1px solid rgba(16,19,18,.075);
}

.account-insight-list div:first-child{
  border-top:0;
}

.account-insight-list b{
  color:#101312;
  font-size:20px;
  line-height:1.05;
}

.account-insight-list strong{
  color:#101312;
  font-size:20px;
}

.account-insight-list small{
  grid-column:1 / -1;
  color:rgba(16,19,18,.52);
  font-size:13px;
  font-weight:700;
}

.account-route-panel{
  grid-column:1 / -1;
  min-height:210px;
  background:#101312;
  color:#fff;
}

.account-route-panel > span{
  color:rgba(255,255,255,.52);
}

.account-route-panel h3{
  margin:0;
  color:#fff;
  font-size:clamp(36px,4vw,62px);
  line-height:.92;
}

.account-route-panel p{
  max-width:780px;
  margin:18px 0 0;
  color:rgba(255,255,255,.66);
  font-size:18px;
  line-height:1.32;
}

.account-message{
  position:absolute;
  left:clamp(58px,8vw,118px);
  right:clamp(58px,8vw,118px);
  bottom:34px;
  margin:0;
  color:rgba(16,90,48,.72);
  font-size:15px;
  font-weight:800;
}

.account-message.is-error{
  color:#b23627;
}

.focus-account-surface{
  display:block;
  width:100%;
  height:100%;
}

.account-profile-facts{
  display:grid;
  gap:10px;
  margin:30px 0 8px;
}

.account-profile-facts div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  min-height:54px;
  border-radius:18px;
  background:#eef1ef;
  padding:12px 16px;
}

.account-profile-facts dt{
  color:rgba(16,19,18,.48);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}

.account-profile-facts dd{
  margin:0;
  color:#101312;
  font-size:15px;
  font-weight:850;
  text-align:right;
}

.account-main-analytics{
  display:grid;
  gap:22px;
  min-width:0;
}

.account-insight-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.account-route-panel a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:24px;
  border-radius:999px;
  background:#fff;
  color:#101312;
  padding:0 20px;
  font-size:14px;
  font-weight:850;
  text-decoration:none;
}

@media (max-width: 1080px){
  .account-heading,
  .account-dashboard,
  .account-insight-columns{
    grid-template-columns:1fr;
  }

  .account-dashboard{
    max-width:720px;
  }

  .account-analytics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .account-plan-panel,
  .account-auth-panel .account-plan-options{
    grid-template-columns:1fr;
  }

  .account-profile-card{
    grid-row:auto;
  }
}

.focus-folder-card{
  overflow:visible;
  background:transparent;
  filter:none;
}

.focus-folder-open{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(58px,7vh,92px);
  padding:clamp(70px,7vw,112px) clamp(72px,8vw,136px) clamp(130px,12vh,180px);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.focus-folder-heading{
  display:grid;
  grid-template-columns:minmax(280px,520px) minmax(320px,560px);
  align-items:end;
  gap:clamp(48px,7vw,120px);
  max-width:1240px;
}

.focus-folder-heading span{
  display:block;
  color:rgba(16,19,18,.48);
  font-size:13px;
  font-weight:800;
  letter-spacing:.03em;
}

.focus-folder-heading h2{
  margin:8px 0 0;
  color:#111413;
  font-size:clamp(58px,6vw,104px);
  line-height:.86;
  letter-spacing:-.055em;
}

.focus-folder-heading p{
  max-width:560px;
  margin:0;
  color:rgba(16,19,18,.56);
  font-size:clamp(16px,1.35vw,22px);
  font-weight:700;
  line-height:1.25;
}

.focus-doc-grid{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  align-items:flex-start;
  gap:clamp(42px,5vw,82px);
  max-width:1540px;
  padding:8px 8px 72px;
}

.focus-doc-page{
  position:relative;
  flex:0 0 clamp(210px,15vw,286px);
  min-height:clamp(252px,22vw,348px);
  padding:32px 28px 28px;
  border:0;
  border-radius:24px;
  background:rgba(255,255,251,.92);
  color:#1b1f1d;
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 28px 74px rgba(24,27,24,.09),
    inset 0 0 0 1px rgba(17,20,19,.07);
  transform:translateY(16px);
  opacity:0;
  animation:docRise .46s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--delay) * 45ms);
  transition:box-shadow .22s ease, transform .22s ease, background .22s ease;
}

.focus-doc-page:hover{
  transform:translateY(-4px);
  background:#fff;
  box-shadow:
    0 34px 90px rgba(24,27,24,.12),
    inset 0 0 0 1px rgba(17,20,19,.08);
}

.focus-doc-page .doc-top-mark{
  display:block;
  width:48px;
  height:7px;
  margin-bottom:clamp(82px,9vw,132px);
  border-radius:999px;
  background:rgba(17,20,19,.08);
}

.focus-doc-page strong{
  display:block;
  max-width:210px;
  font-size:clamp(18px,1.55vw,24px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.03em;
}

.focus-doc-page small{
  display:block;
  margin-top:10px;
  color:rgba(16,19,18,.48);
  font-size:clamp(13px,1vw,16px);
  font-weight:800;
}

@keyframes docRise{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:900px){
  .focus-folder-open{
    padding:76px 28px 120px;
  }

  .focus-folder-heading{
    grid-template-columns:1fr;
    gap:18px;
  }

  .focus-doc-grid{
    gap:28px;
  }

  .focus-doc-page{
    flex-basis:min(44vw,260px);
  }
}

.focus-object-back,
.focus-object-page,
.focus-object-front{
  position:absolute;
}

.focus-object-back{
  inset:24px -32px -16px 36px;
  border-radius:36px;
  background:#111614;
  box-shadow:0 44px 90px rgba(25,24,20,.14);
}

.focus-object-page{
  right:-18px;
  top:72px;
  width:70px;
  height:calc(100% - 144px);
  border-radius:24px;
  background:#f8f8f4;
  box-shadow:0 18px 42px rgba(0,0,0,.12);
}

.focus-object-front{
  inset:0;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 178px;
  gap:24px;
  padding:36px;
  border-radius:34px;
  background:rgba(252,251,246,.98);
  box-shadow:0 44px 120px rgba(25,24,20,.12);
  overflow:hidden;
}

.focus-dark-folder .focus-object-front,
.focus-dark-hero-folder .focus-object-front{
  background:rgba(41,48,45,.99);
  color:#fff;
}

.focus-dots{
  display:grid;
  align-content:start;
  gap:10px;
  padding-top:5px;
}

.focus-dots i{
  width:13px;
  height:13px;
  border-radius:50%;
  background:#dfe1de;
}

.focus-dots i:nth-child(2){background:#9c9182}
.focus-dots i:nth-child(3){background:#3f3027}

.focus-main{
  min-width:0;
}

.focus-main h2{
  margin:0;
  font-size:62px;
  line-height:.92;
  letter-spacing:-.045em;
}

.focus-main .subtitle{
  margin:14px 0 0;
  color:#6a665e;
  font-size:18px;
}

.focus-main .description{
  max-width:560px;
  margin:16px 0 0;
  color:#777166;
  font-size:15px;
  line-height:1.42;
}

.focus-dark-folder .subtitle,
.focus-dark-folder .description,
.focus-dark-hero-folder .subtitle,
.focus-dark-hero-folder .description{
  color:rgba(255,255,255,.7);
}

.focus-children{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}

.focus-child{
  min-height:82px;
  padding:14px;
  border:1px solid rgba(25,25,20,.08);
  border-radius:13px;
  background:rgba(255,255,255,.62);
  color:#4d4942;
  font-size:14px;
  box-shadow:0 12px 24px rgba(30,28,22,.06);
}

.focus-dark-folder .focus-child,
.focus-dark-hero-folder .focus-child{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.08);
  color:#fff;
}

.focus-meta{
  display:grid;
  align-content:start;
  gap:10px;
  font-family:"Courier New", monospace;
  font-size:12px;
}

.focus-meta div{
  padding:10px 0;
}

.focus-meta span{
  display:block;
  color:#817b71;
  font-size:10px;
  text-transform:uppercase;
}

.focus-meta b{
  display:block;
  margin-top:5px;
  font-size:13px;
}

.focus-dark-folder .focus-meta span,
.focus-dark-hero-folder .focus-meta span{
  color:rgba(255,255,255,.45);
}

.action-pill{
  position:absolute;
  left:50%;
  bottom:24px;
  display:flex;
  gap:4px;
  padding:6px;
  border-radius:999px;
  background:#141411;
  transform:translateX(-50%);
}

.action-pill button,
.action-pill a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:9px 13px;
  background:transparent;
  color:#f7f5ed;
  cursor:pointer;
  font-size:13px;
  text-decoration:none;
}

.action-pill button:hover,
.action-pill a:hover{
  background:rgba(255,255,255,.14);
}

@media (max-width:760px){
  .learner-chip{display:none}
  .focus-object-front{
    grid-template-columns:1fr;
    padding:24px;
  }
  .focus-dots{
    display:flex;
  }
  .focus-meta{
    grid-template-columns:1fr 1fr;
  }
  .focus-main h2{
    font-size:44px;
  }
}

/* Mobile focus polish: keep focused documents clear of fixed board chrome. */
@media (max-width:760px){
  .user-board-page.is-focused .board-toolbar,
  .user-board-page.is-focused .trash-drop-target,
  body:has(.user-board-page.is-focused) .voice-companion{
    opacity:0;
    pointer-events:none;
  }

  .user-board-page.is-focused .focus-layer{
    inset:0!important;
  }

  .user-board-page.is-focused .focus-card{
    left:12px!important;
    top:12px!important;
    right:auto!important;
    width:calc(100vw - 24px)!important;
    height:calc(100vh - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
    transform:none!important;
  }

  .focus-account-surface{
    padding-bottom:112px!important;
  }

  .board-browser-window{
    min-width:300px;
    min-height:360px;
  }

  /* The spatial board is scaled on phones. Size controls in board coordinates
     so their transformed pointer area still clears a 44px touch target. */
  .today-route-steps button,
  .today-route-actions button{
    min-width:88px;
    min-height:88px;
    padding:18px 16px;
  }

  .board-browser-window .browser-window-content a,
  .board-browser-window [data-window-primary-action]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    min-height:88px;
    padding:16px 18px;
  }

  .browser-window-titlebar{padding-inline:18px;gap:26px}
  .browser-dot{flex-basis:18px}

  .resize-nw,.resize-ne,.resize-se,.resize-sw{width:44px;height:44px}
  .resize-nw{left:-14px;top:-14px}
  .resize-ne{right:-14px;top:-14px}
  .resize-se{right:-14px;bottom:-14px}
  .resize-sw{left:-14px;bottom:-14px}
  .resize-n,.resize-s{left:30px;right:30px;height:44px}
  .resize-n{top:-22px}
  .resize-s{bottom:-22px}
  .resize-e,.resize-w{top:30px;bottom:30px;width:44px}
  .resize-e{right:-22px}
  .resize-w{left:-22px}

  .board-window-resize{
    opacity:0;
    pointer-events:none;
  }

  .board-browser-window:hover .board-window-resize,
  .board-browser-window:focus-within .board-window-resize{
    opacity:1;
    pointer-events:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .board-browser-window,
  .focus-card,
  .focus-layer,
  .board-world{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}

/* Final phone overrides live last so legacy board sizing cannot reintroduce
   desktop-window geometry on an app-sized screen. */
@media (max-width:760px){
  .user-board-page{
    --board-safe-top:var(--shell-safe-top, env(safe-area-inset-top));
    --board-safe-bottom:var(--shell-safe-bottom, env(safe-area-inset-bottom));
    --board-keyboard-offset:var(--shell-keyboard-offset, 0px);
  }

  .user-board-page.is-mobile-list .board-toolbar{
    right:16px;
    bottom:calc(14px + var(--board-safe-bottom) + var(--board-keyboard-offset));
    transform:none;
  }
  .user-board-page.is-mobile-list .board-toolbar .control-pill{
    min-height:56px;
    border-radius:20px;
  }
  .user-board-page.is-mobile-list .control-tool-command,
  .user-board-page.is-mobile-list .control-tool-list,
  .user-board-page.is-mobile-list .control-tool-layout{display:none!important}
  .user-board-page.is-mobile-list .control-tool-map{
    display:grid;
    width:44px;
    min-width:44px;
    background:transparent;
    color:#101312;
  }
  .user-board-page.is-mobile-list .board-add-button{
    width:48px;
    min-width:48px;
    height:48px;
    min-height:48px;
    border-radius:16px;
  }
  .user-board-page.is-mobile-map .control-tool-map{display:none}
  .user-board-page.is-mobile-map .control-tool-list{display:grid}

  .user-board-page .board-add-menu{
    bottom:calc(82px + var(--board-safe-bottom) + var(--board-keyboard-offset));
  }
  .user-board-page .board-account-chip{top:calc(16px + var(--board-safe-top))}
  .user-board-page .voice-companion{top:calc(14px + var(--board-safe-top))}

  .user-board-page.is-mobile-list .board-text-note,
  .user-board-page.is-mobile-list .board-image-object{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:112px!important;
    transform:none!important;
    flex:0 0 auto;
    order:20;
    overflow:hidden;
    border-radius:22px;
  }

  .user-board-page.is-mobile-list .board-object,
  .user-board-page.is-mobile-list .board-browser-window{
    min-width:0!important;
    min-height:112px!important;
    touch-action:pan-y;
  }

  .user-board-page.is-mobile-list .board-browser-window{min-height:136px!important}

  .user-board-page.is-focused .focus-card{
    left:0!important;
    top:0!important;
    right:auto!important;
    width:100vw!important;
    height:calc(100dvh - var(--board-keyboard-offset))!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:0!important;
  }

  .user-board-page.is-focused .focus-back-button{top:calc(10px + var(--board-safe-top))!important}

  .user-board-page.is-focused .focus-account-surface{padding-bottom:calc(32px + env(safe-area-inset-bottom))!important}
  .user-board-page.is-focused .board-window-resize,
  .user-board-page.is-mobile-map .board-window-resize{display:none!important}
}

/* Authoritative phone masonry pass. */
@media (max-width:760px){
  html.synaptx-shell-page .voice-companion{display:none!important}
  .user-board-page.is-mobile-list .board-world{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row dense!important;align-items:start!important;gap:12px!important;padding:12px 14px 110px!important}
  .user-board-page.is-mobile-list .today-route-card{grid-column:1/-1!important;min-height:176px!important;padding:20px!important;border-radius:26px!important;background:#101312!important;color:#fff!important;box-shadow:none!important}
  .user-board-page.is-mobile-list .today-route-header h2{font-size:30px!important;color:#fff!important}.user-board-page.is-mobile-list .today-route-header strong{width:48px!important;height:48px!important;border-radius:15px!important;background:#ff6f51!important;color:#101312!important}.user-board-page.is-mobile-list .today-route-copy p{font-size:14px!important;line-height:1.45!important;color:rgba(255,255,255,.7)!important}.user-board-page.is-mobile-list .today-route-actions button{min-height:44px!important;border-radius:999px!important;background:#ff6f51!important;color:#101312!important}.user-board-page.is-mobile-list .today-route-actions button+button{display:none!important}
  .user-board-page.is-mobile-list .board-object,.user-board-page.is-mobile-list .board-browser-window,.user-board-page.is-mobile-list .board-text-note,.user-board-page.is-mobile-list .board-image-object{grid-column:auto!important;width:100%!important;height:auto!important;min-height:142px!important;margin:0!important;border:0!important;border-radius:24px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important}
  .user-board-page.is-mobile-list .board-object:nth-of-type(3n+1){min-height:184px!important}.user-board-page.is-mobile-list .board-object:nth-of-type(4n+2){min-height:158px!important;background:#f7d8cf!important}
  .user-board-page.is-mobile-list .board-object{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;padding:18px!important}.user-board-page.is-mobile-list .board-object .folder-art{width:52px!important;height:52px!important;filter:grayscale(1) contrast(.9)!important;opacity:.82!important}.user-board-page.is-mobile-list .board-object .desktop-label h3{font-size:17px!important;color:#101312!important}
  .user-board-page.is-mobile-list .board-object.note-launcher{background:#ff6f51!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui{position:static!important;display:flex!important;min-height:106px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;text-align:left!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui span{width:42px!important;height:42px!important;margin:0!important;border-radius:50%!important;background:#101312!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui h3{margin:0!important;color:#101312!important;font-size:17px!important}.user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui p{display:none!important}
  .user-board-page.is-mobile-list .board-browser-window{min-height:118px!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-frame{display:flex!important;min-height:118px!important;flex-direction:column!important;justify-content:flex-end!important;border:0!important;border-radius:24px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important}.user-board-page.is-mobile-list .board-browser-window:nth-of-type(odd) .browser-window-frame{min-height:168px!important;background:#dce8e4!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar{display:flex!important;min-height:0!important;flex:0 0 auto!important;padding:18px!important;background:transparent!important;border:0!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar .browser-dot{display:none!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar span{margin:0!important;color:#101312!important;font-size:16px!important;font-weight:800!important;text-align:left!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar::after{content:"↗";margin-left:auto}.user-board-page.is-mobile-list .board-browser-window .browser-window-live-page,.user-board-page.is-mobile-list .board-browser-window iframe{display:none!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-preview-target{inset:0!important}
  .user-board-page.is-mobile-list .board-account-chip{top:calc(10px + var(--board-safe-top))!important;left:16px!important;height:44px!important;padding:0!important;background:transparent!important;box-shadow:none!important}.user-board-page.is-mobile-list .board-toolbar .control-pill{min-height:48px!important;padding:4px!important;border-radius:17px!important;box-shadow:0 12px 28px rgba(16,19,18,.12)!important}
  .user-board-page.is-mobile-list .board-object .desktop-label{position:static!important;inset:auto!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;transform:none!important;overflow:visible!important;text-align:left!important}.user-board-page.is-mobile-list .board-object .desktop-label h3{margin:0!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important}
  .user-board-page.is-mobile-list .board-object.note-launcher .add-note-board-ui span{flex:0 0 42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;aspect-ratio:1!important;box-sizing:border-box!important}
  .user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar{position:relative!important;inset:auto!important;width:100%!important;box-sizing:border-box!important;opacity:1!important;visibility:visible!important;transform:none!important}.user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar span{display:block!important;opacity:1!important;visibility:visible!important;white-space:normal!important}
  .user-board-page.is-mobile-list .board-toolbar{top:calc(8px + var(--board-safe-top))!important;right:12px!important;bottom:auto!important}.user-board-page.is-mobile-list .board-toolbar .control-pill{min-height:44px!important;padding:2px!important;border:0!important;background:transparent!important;box-shadow:none!important}.user-board-page.is-mobile-list .control-tool-map{display:none!important}.user-board-page.is-mobile-list .board-add-button{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;border-radius:14px!important;box-shadow:0 8px 20px rgba(16,19,18,.12)!important}
  .user-board-page.is-mobile-list .board-account-chip{display:none!important}
  .user-board-page.is-mobile-list .today-route-card{display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
  .user-board-page.is-mobile-list .today-route-card>*{display:none!important}
  .user-board-page.is-mobile-list .today-route-card::before{content:"Today";display:block;margin-bottom:auto;color:rgba(255,255,255,.52);font-size:12px;font-weight:800;text-transform:uppercase}
  .user-board-page.is-mobile-list .today-route-card::after{content:"Continue learning  →";display:block;max-width:9ch;color:#fff;font-size:30px;font-weight:800;line-height:.94;letter-spacing:-.04em}
  .user-board-page.is-mobile-list .board-browser-window{position:relative!important;display:flex!important;align-items:flex-end!important;padding:18px!important;box-sizing:border-box!important}
  .user-board-page.is-mobile-list .board-browser-window::before{content:attr(data-window-title);position:relative;z-index:2;display:block;max-width:12ch;color:#101312;font-size:16px;font-weight:800;line-height:1.08}
  .user-board-page.is-mobile-list .board-browser-window::after{content:"↗";position:absolute;right:18px;bottom:16px;color:#101312;font-size:17px}
  .user-board-page.is-mobile-list .board-browser-window .browser-window-frame{position:absolute!important;inset:0!important;min-height:0!important;background:transparent!important}
  .user-board-page.is-mobile-list .board-browser-window .browser-window-titlebar{display:none!important}
  .user-board-page.is-mobile-list .board-browser-window:nth-of-type(odd){background:#dce8e4!important}
  .user-board-page.is-mobile-list .board-object .folder-art{display:none!important}
  .user-board-page.is-mobile-list .board-object{justify-content:flex-end!important}
}

/* Study is a focused mobile hub, not a miniature copy of the desktop board. */
@media (max-width:760px){
  .user-board-page.is-mobile-study-hub .canvas-shell{
    padding-top:calc(18px + var(--board-safe-top))!important;
  }
  .user-board-page.is-mobile-study-hub .board-toolbar,
  .user-board-page.is-mobile-study-hub .board-add-launcher,
  .user-board-page.is-mobile-study-hub .today-route-card,
  .user-board-page.is-mobile-study-hub .board-browser-window,
  .user-board-page.is-mobile-study-hub .board-text-note,
  .user-board-page.is-mobile-study-hub .board-image-object,
  .user-board-page.is-mobile-study-hub .object-add-note{
    display:none!important;
  }
  .user-board-page.is-mobile-study-hub .board-world{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start!important;
    gap:12px!important;
    padding:0 14px 108px!important;
  }
  .user-board-page.is-mobile-study-hub .board-world::before{
    content:"Study";
    grid-column:1/-1;
    display:block;
    margin:4px 0 12px;
    color:#101312;
    font:800 38px/1 Inter,system-ui,sans-serif;
    letter-spacing:-.045em;
  }
  .user-board-page.is-mobile-study-hub .board-object{
    min-height:154px!important;
    padding:18px!important;
    border-radius:24px!important;
    background:#fff!important;
  }
  .user-board-page.is-mobile-list.is-mobile-study-hub .board-object.object-resources{
    grid-column:1/-1!important;
    order:10!important;
    min-height:190px!important;
    background:#101312!important;
  }
  .user-board-page.is-mobile-list.is-mobile-study-hub .board-object.object-resources .desktop-label h3{
    color:#fff!important;
    font-size:26px!important;
  }
  .user-board-page.is-mobile-list.is-mobile-study-hub .board-object.object-review{background:#f7d8cf!important}
  .user-board-page.is-mobile-list.is-mobile-study-hub .board-object.object-notes{background:#dce8e4!important}
  .user-board-page.is-mobile-study-hub .board-object .desktop-label h3{
    font-size:18px!important;
    line-height:1.05!important;
  }
}