@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=Roboto+Mono:ital,wght@0,300;1,300&display=swap');


:root { color-scheme: light; --border-color: #999; --container-max: 800px; --container-pad-x: 1rem; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }

/* Grayscale blurred rotating blobs background */
.wave {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0; /* stays behind content */
  pointer-events: none;
  filter: none;
}
.wave span {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  left: 50%;
  bottom: -10vmax; /* closer to bottom edge */
  transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  transform-origin: 50% 50%;
  background: #000;
  will-change: transform;
}
.wave span:nth-child(1) {
  border-radius: 42% 58% 48% 52% / 52% 48% 58% 42%;
  left: 45%;
  background: rgba(0, 0, 0, 0.016);
  animation: wave-rotate 40s linear infinite;
  width: 82vmax;
  height: 82vmax;
  bottom: -10vmax;
  z-index: 1;
}
.wave span:nth-child(2) {
  border-radius: 35% 55% 45% 65% / 65% 45% 55% 35%;
  left: 55%;
  background: rgba(0, 0, 0, 0.010);
  animation: wave-rotate 60s linear infinite reverse;
  width: 86vmax;
  height: 86vmax;
  bottom: -11vmax;
  z-index: 2;
}
.wave span:nth-child(3) {
  border-radius: 50% 40% 60% 45% / 45% 60% 40% 55%;
  left: 47%;
  background: #ffffff; /* solid white center */
  animation: wave-rotate 90s linear infinite;
  width: 76vmax;
  height: 76vmax;
  bottom: -8vmax;
  z-index: 3;
}

@keyframes wave-rotate {
  0%   { transform: translateX(-50%) translateY(0)        scale(1)    rotate(0deg); }
  25%  { transform: translateX(-50%) translateY(-2vmin)   scale(1.01) rotate(90deg); }
  50%  { transform: translateX(-50%) translateY(0.5vmin)  scale(1)    rotate(180deg); }
  75%  { transform: translateX(-50%) translateY(-1.5vmin) scale(1.01) rotate(270deg); }
  100% { transform: translateX(-50%) translateY(0)        scale(1)    rotate(360deg); }
}
.container { max-width: var(--container-max); margin: 2rem auto; padding: 0 var(--container-pad-x); padding-bottom: 5rem; position: relative; z-index: 1; }
h1 { margin: 0 0 1rem; font-family: 'Roboto Mono', 'Noto Sans JP', serif; font-weight: 300; margin-left: -4px;}
section { margin: 1.5rem 0; }
.controls, .share, .delete { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.controls-bar { position: fixed; left: 0; right: 0; bottom: 0; background: transparent; z-index: 100; }
.controls-bar .container { margin: 0 auto; padding: 0 var(--container-pad-x); padding-bottom: 0; }
.controls { margin: 0; padding: .5rem 0; }
.controls .spacer { flex: 1; }
.card { border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; background: #fff; }
textarea { width: 100%; min-height: 360px; padding: 1rem 0; border: none; border-radius: 6px; font-size: 1rem; resize: none; background: transparent; }
button { padding: .5rem 1rem; border: 1px solid #000; border-radius: 6px; background: #fff; cursor: pointer; }
button.primary { background: #000; color: #fff; }
button.danger { background: #000; color: #fff; }
button:disabled { cursor: not-allowed; opacity: 1; background: #f2f2f2; color: #aaa; border-color: #d9d9d9; }
.icon-btn:disabled { background: #eee; color: #bbb; border-color: #d0d0d0; }
button.primary:disabled { background: #d9d9d9; color: #999; border-color: #cfcfcf; }
/* Icon buttons */
.icon-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn.is-stop { background: #666; color: #fff; border-color: #000; }
label { display: inline-flex; align-items: center; gap: .5rem; }
/* Styled select to match icon buttons */
.speed-control .speed-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 0 1.75rem 0 .75rem;
  border: 1px solid #000;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  line-height: 40px;
  color: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 12px 12px;
}
.speed-control .speed-icon { width: 18px; height: 18px; fill: currentColor; }
input[type="password"], input[type="number"] { border: 1px solid var(--border-color); border-radius: 6px; padding: .4rem .5rem; }
input:focus, textarea:focus { outline: none; box-shadow: none; border-color: var(--border-color); }

/* Playback containers to mirror editor appearance */
#inline-player, #player-container { min-height: 200px; font-size: 1rem; }

/* Ensure HREF viewer matches input styling (library sets inline styles) */
.href-viewer {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  padding: 1rem 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  min-height: 360px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Remove border only for playback containers */
#inline-player.card,
#player-container.card { border: none; padding-left: 0; padding-right: 0; background: transparent; }

/* Text link style for low emphasis actions */
.link { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.controls .link { font-size: .875rem; height: 32px; display: inline-flex; align-items: center; padding: 0; }
.controls .nav-link { font-size: .875rem; height: 32px; display: inline-flex; align-items: center; padding: 0; color: inherit; text-decoration: underline; }
.controls .nav-sep { margin: 0 .5rem; opacity: .6; height: 32px; display: inline-flex; align-items: center; }
/* De-emphasize Delete link to highlight Start writing */
.controls #delete { color: #777; }
.controls #delete:hover { color: #555; }



/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; padding: 2rem; z-index: 1000; }
.modal[style*="display: none"] { display: none !important; }
.modal[style*="display: block"], .modal.show { display: block; }
.modal > .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal-content { background: #fff; border: none; border-radius: 10px; padding: 2rem; width: 100%; max-width: 640px; box-shadow: none; }
.modal-content h3 { margin: 0 0 1rem; font-size: 1.25rem; }
.modal-content label { display: block; margin-top: .5rem; }
.modal-content input[type="password"] { width: 100%; margin-top: .5rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }

/* Mobile modal safe margins */
@media (max-width: 600px) {
  .modal { padding: 0; }
  .modal > .modal-content { width: calc(100% - 32px); }
  .controls .nav-sep { margin: 0; }
  .controls .nav-github { display: none; }
}

/* Share modal inputs: unified field, underline style */
#share-modal input#share-title-input,
#share-modal input#password {
  width: 100%;
  margin-top: .5rem;
  font-size: 1rem;
  padding: .75rem 0;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
}

/* Extra spacing before the password label */
#share-modal .modal-content label + label { margin-top: 1rem; }

/* Placeholder style to match editor */
textarea::placeholder,
input::placeholder { color: #999; opacity: 1; }

/* Share result block */
#share-result { margin-top: 1rem; }
#share-result .share-url { position: relative; }
#share-result .share-url input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  padding: .5rem 1.75rem .5rem 0; /* space for copy icon on the right */
  font-size: .95rem;
}
#share-result .share-url .copy-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}
#share-result .share-url .copy-btn svg { width: 14px; height: 14px; }
#share-result .share-url .copy-btn.copied { color: #0a0; }

/* Simple i18n visibility helpers */
html[lang="ja"] .i18n.en { display: none !important; }
html[lang^="en"] .i18n.ja { display: none !important; }