:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #333633;
  background: #fafaf9;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { display: flow-root; position: relative; isolation: isolate; margin: 0; min-width: 280px; min-height: 100svh; }
body::before {
  content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 480px 300px at calc(50% - 190px) -60px, #d6e8ed70, transparent),
    radial-gradient(ellipse 400px 240px at calc(50% + 190px) 30px, #e4ebdd80, transparent);
}
button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.notes { width: min(100% - 40px, 640px); margin: 32px auto 64px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.toolbar-actions { display: flex; gap: 8px; }
.toolbar-button, .account-button, .login-submit {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid #ffffffb8; border-radius: 999px;
  background: linear-gradient(160deg, #ffffffbd, #ffffff52 60%, #e8f0ee66);
  color: #3e504b; font-size: 14px; font-weight: 500;
  box-shadow: 0 5px 18px #314d5212, 0 1px 3px #314d5208, inset 0 1px 0 #fffffff0, inset 0 -1px 0 #ffffff66;
  -webkit-backdrop-filter: blur(18px) saturate(1.65);
  backdrop-filter: blur(18px) saturate(1.65);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms, background 180ms, opacity 180ms;
  cursor: pointer; touch-action: manipulation;
}
.toolbar-button::before, .account-button::before, .login-submit::before {
  content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(140deg, #fff 2%, #ffffff26 42%, #ffffffc9 78%, #ffffff40) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.toolbar-button svg { width: 18px; height: 18px; }
.toolbar-button:disabled, .account-button:disabled, .login-submit:disabled { opacity: .42; cursor: default; box-shadow: 0 2px 8px #314d5208, inset 0 1px 0 #ffffffb3; }
.toolbar-button:not(:disabled):active, .account-button:not(:disabled):active, .login-submit:not(:disabled):active {
  transform: scale(.96); background: linear-gradient(160deg, #ffffff99, #e3ede766);
  box-shadow: 0 2px 6px #314d5210, inset 0 1px 3px #314d520a;
}
@media (hover: hover) {
  .toolbar-button:hover:not(:disabled), .account-button:hover:not(:disabled), .login-submit:hover:not(:disabled) {
    background: linear-gradient(160deg, #ffffffeb, #ffffff85 60%, #e8f0ee80);
    box-shadow: 0 7px 22px #314d521a, 0 2px 4px #314d5208, inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff99;
    transform: translateY(-1px);
  }
}
.account-button { white-space: nowrap; }
.workspace-tabs {
  position: relative; isolation: isolate; display: flex; gap: 4px;
  margin-bottom: 22px; padding: 5px; border: 1px solid #ffffffbd; border-radius: 999px;
  background: linear-gradient(160deg, #ffffff75, #e1eae44d);
  box-shadow: 0 7px 24px #314d520c, inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #ffffff4d;
  -webkit-backdrop-filter: blur(24px) saturate(1.65);
  backdrop-filter: blur(24px) saturate(1.65);
}
.workspace-tabs::before {
  content: ""; position: absolute; z-index: 0; left: 6px; top: 6px;
  width: calc((100% - 16px) / 2); height: calc(100% - 12px);
  border: 1px solid #ffffffeb; border-radius: 999px;
  background: linear-gradient(155deg, #ffffffed, #ffffff85 58%, #eef5f1a6);
  box-shadow: 0 3px 9px #314d5212, inset 0 1px 1px #fff, inset 0 -1px 1px #ffffffa6;
  transition: transform 300ms cubic-bezier(.2,.85,.2,1); pointer-events: none;
}
.workspace-tabs[data-active="shared"]::before { transform: translateX(calc(100% + 4px)); }
.workspace-tab {
  position: relative; z-index: 1; flex: 1; min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: 999px; color: #6d7e77; background: transparent;
  font-size: 14px; font-weight: 500; cursor: pointer; touch-action: manipulation;
  transition: color 180ms, transform 180ms;
}
.workspace-tab[aria-selected="true"] { color: #30483d; }
.workspace-tab:active:not(:disabled) { background: transparent; transform: scale(.97); }
.workspace-tab:disabled { opacity: .45; cursor: default; }
.sync-status { margin: -4px 0 16px; color: #8b9385; font-size: 12px; line-height: 1.6; }
.sharing-login { padding: 28px 18px; text-align: center; border: 1px dashed #dfe3d9; border-radius: 14px; }
.sharing-login p { margin: 0 0 16px; color: #88917f; font-size: 13px; line-height: 1.8; }
.login-dialog { width: min(360px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 26px; border: 1px solid #e5e6e2; border-radius: 18px; color: #333633; background: #fafaf9; box-shadow: 0 16px 70px #1e291d26; }
.login-dialog::backdrop { background: #252b2540; backdrop-filter: blur(3px); }
.login-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-heading h1 { margin: 0; font-size: 19px; font-weight: 600; }
.dialog-close { width: 36px; height: 36px; border: 0; border-radius: 8px; color: #899180; background: transparent; font-size: 25px; cursor: pointer; }
.login-dialog p { font-size: 13px; line-height: 1.8; }
#loginHelp { margin: 10px 0 24px; color: #8c9485; }
.login-label { display: block; margin-bottom: 8px; color: #828c79; font-size: 12px; }
.login-number { width: 100%; padding: 14px; border: 1px solid #dce1d5; border-radius: 10px; background: #fff; color: #4c5943; font: 24px Consolas, monospace; letter-spacing: .4em; text-align: center; }
.login-number:focus { outline: 2px solid #a7b49b; outline-offset: 2px; }
.login-number::placeholder { color: #ccd1c6; }
.login-error { min-height: 22px; margin: 8px 0 12px; color: #bf4444; }
.login-submit { width: 100%; background: linear-gradient(160deg, #fafff7ed, #dfe9d785); color: #3c5430; }
.logout-button { width: 100%; min-height: 40px; margin-top: 10px; border: 0; border-radius: 8px; color: #8d9586; background: transparent; font-size: 13px; cursor: pointer; }
.login-dialog[data-mode="logout"] {
  position: fixed; inset: auto;
  left: var(--account-menu-left, 16px); top: var(--account-menu-top, 80px);
  width: min(168px, calc(100% - 32px)); margin: 0; padding: 5px;
  border: 1px solid #ffffffbd; border-radius: 18px;
  background: linear-gradient(150deg, #ffffffeb, #f0f5f0a6);
  box-shadow: 0 8px 30px #314d521a, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px) saturate(1.65); backdrop-filter: blur(18px) saturate(1.65);
}
.login-dialog[data-mode="logout"]::backdrop { background: transparent; backdrop-filter: none; }
.login-dialog[data-mode="logout"] .login-error:empty { display: none; }
.login-dialog[data-mode="logout"] .logout-button { min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 12px; color: #52624b; font-size: 14px; }
.login-dialog[data-mode="logout"] .logout-button:hover { background: #ffffff99; }
[hidden] { display: none !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toolbar-button, .account-button, .login-submit, .workspace-tabs { background-color: #f5f8f5; }
}
@media (prefers-reduced-transparency: reduce) {
  .toolbar-button, .account-button, .login-submit, .workspace-tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f4f7f4; border-color: #d7e0da; }
  .workspace-tabs::before { background: #fff; }
}
@media (prefers-contrast: more) {
  .toolbar-button, .account-button, .login-submit, .workspace-tabs { border-color: #82938b; }
  .toolbar-button, .account-button, .login-submit, .workspace-tab { color: #223c2c; }
}
@media (forced-colors: active) {
  body::before, .toolbar-button::before, .account-button::before, .login-submit::before, .workspace-tabs::before { display: none; }
  .toolbar-button, .account-button, .login-submit, .workspace-tabs, .workspace-tab { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .workspace-tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}
.note-list { display: grid; gap: 12px; }
.note-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 20px;
  background: #fff;
  border: 1px solid #e5e6e2;
  border-radius: 14px;
  box-shadow: 0 2px 5px #252b2503;
  transition: border-color 150ms, box-shadow 150ms;
}
.note-row:focus-within { border-color: #a3aaa0; box-shadow: 0 0 0 3px #616f6110; }
.note-row, .note-input { -webkit-touch-callout: none; }
.note-row[data-menu-open] { border-color: #a3aaa0; }
.note-editor { position: relative; flex: 1; min-width: 0; }
.note-highlight { display: none; }
.note-input {
  display: block;
  width: 100%;
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1.65;
}
.note-input::placeholder { color: #a5a8a2; }
.note-row.is-code {
  align-items: flex-start;
  color-scheme: dark;
  color: #d4d4d4;
  background: #1e1e1e;
  border-color: #383838;
}
.note-row.is-code:focus-within { border-color: #569cd6; box-shadow: 0 0 0 3px #569cd618; }
.is-code .note-input, .is-code .note-highlight {
  width: 100%;
  font-family: Consolas, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  tab-size: 4;
  font-variant-ligatures: none;
}
.is-code .note-highlight {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 8px 0;
  overflow: hidden;
  pointer-events: none;
}
.is-code .note-input { position: relative; color: transparent; caret-color: #d4d4d4; -webkit-text-fill-color: transparent; }
.is-code .note-input::selection { background: #264f7880; }
.is-code .copy-button { color: #a5a5a5; }
.is-code .copy-button:hover:not(:disabled) { background: #ffffff12; color: #fff; }
.is-code .copy-button[data-copied] { color: #b5cea8; background: #b5cea815; }
.syntax-keyword { color: #569cd6; }
.syntax-control { color: #c586c0; }
.syntax-string { color: #ce9178; }
.syntax-comment { color: #6a9955; }
.syntax-number { color: #b5cea8; }
.syntax-function { color: #dcdcaa; }
.syntax-type { color: #4ec9b0; }
.syntax-variable { color: #9cdcfe; }
@media (max-width: 480px) {
  .is-code .note-input, .is-code .note-highlight { font-size: 16px; }
}
@media (forced-colors: active) {
  .is-code .note-highlight { display: none; }
  .is-code .note-input { color: CanvasText; -webkit-text-fill-color: CanvasText; caret-color: CanvasText; }
}
.copy-button, .add-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #7c847a;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 150ms, color 150ms;
}
button svg { width: 21px; height: 21px; }
.copy-button:disabled { color: #c8ccc5; cursor: default; }
.copy-button .check-icon { display: none; }
.copy-button[data-copied] { color: #4b7856; background: #edf4ee; }
.copy-button[data-copied] .copy-icon { display: none; }
.copy-button[data-copied] .check-icon { display: block; }
.add-button { margin: 14px auto 0; color: #8a9186; }
.add-button svg { width: 23px; height: 23px; }
@media (hover: hover) {
  .copy-button:hover:not(:disabled), .add-button:hover { color: #424e3e; background: #eff1ec; }
}
button:focus-visible { outline: 2px solid #7c8e74; outline-offset: 3px; }
button:active:not(:disabled) { background: #e8ece5; }
.status {
  position: fixed;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 10px;
  background: #343c32;
  color: #fff;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 5px);
  pointer-events: none;
  transition: opacity 150ms, transform 150ms;
}
.status[data-visible] { opacity: 1; transform: translate(-50%, 0); }
.status:empty { padding: 0; }
.note-menu {
  position: fixed;
  z-index: 10;
  min-width: 144px;
  padding: 5px;
  border: 1px solid #e5e6e2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px #252b251a;
}
.note-menu[hidden] { display: none; }
.note-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #bf4444;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.note-menu button:hover, .note-menu button:focus-visible { background: #fbefef; }
.note-menu button:focus-visible { outline-offset: -2px; }
@media (max-width: 480px) {
  .notes { width: calc(100% - 32px); margin-top: 20px; }
  .toolbar { gap: 6px; }
  .toolbar-button { padding-inline: 10px; }
  .account-button { padding-inline: 6px; }
  .note-row { padding-left: 16px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}