body { background:var(--deep)!important; }
body::before { opacity:.07; }
.app-shell { max-width:1440px; margin:auto; padding:32px 48px; display:block; }
.brand-title { margin:0; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:1.05rem; letter-spacing:.08em; font-weight:600; }
.brand-mark { display:grid; width:28px; height:28px; place-items:center; color:var(--cyan); }
.brand-word { color:inherit!important; }
.brand-mark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.brand-mark svg path { stroke-width:2.1; }
.brand-title>span { display:none; }
.brand-group .intro-detail .description { max-width:440px; font-size:.7rem; line-height:1.8; }
.workspace { max-width:1180px; grid-template-columns:minmax(0,1fr) 360px; gap:48px; padding:48px 0 56px; align-items:start; }
.workspace .sound-core { min-height:520px; max-width:none; border:1px solid var(--line); border-radius:24px; background:linear-gradient(150deg,color-mix(in srgb,var(--navy) 75%,#242629),var(--deep)); padding:36px; gap:26px; }
.sound-core .orbit,.sound-core::before { display:none; }
/* Aspect-independent decoration layer: inset:0 gives it a definite size,
   so it can serve as a size query container for inscribed circles. */
.orbit-field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.frequency-readout { width:100%; padding:20px 0 28px; border-bottom:1px solid var(--line); }
.readout-label { font-size:.65rem; letter-spacing:.16em; }
.frequency-readout output { font:400 clamp(4rem,7vw,6rem)/1.2 'DM Mono',monospace; letter-spacing:-.065em; margin:12px 0; }
.waveform { display:block; width:100%; height:72px; margin:4px 0 2px; opacity:.9; }
.frequency-tone { color:var(--muted); font-size:.7rem; }
.sound-core .play-button { border-radius:100px; width:230px; min-height:64px; font-size:1rem; box-shadow:none; border:0; }
.sound-core .play-button:hover { box-shadow:0 8px 28px color-mix(in srgb,var(--cyan) 12%,transparent); }
.playing .sound-core .button-text::after { font-size:1rem; }
.sound-core .volume-control { width:min(100%,300px); }
.settings-link { font-size:.75rem; color:var(--muted); }
.control-panel { border:1px solid var(--line); border-radius:20px; padding:0 22px 24px; background:linear-gradient(160deg,color-mix(in srgb,var(--navy) 74%,#242629),color-mix(in srgb,var(--deep) 92%,transparent)); overflow:hidden; }
.control-panel > .ad-area { margin-top:0; margin-left:-22px; margin-right:-22px; padding:18px 22px 0; }
.settings-title { font-size:.85rem; margin:22px 0 24px; }
.pomodoro { border:1px solid color-mix(in srgb,var(--cyan) 22%,var(--line)); border-radius:12px; padding:16px; margin-bottom:24px; background:color-mix(in srgb,var(--cyan) 5%,transparent); }
.pomodoro-display { margin:12px 0 14px; text-align:center; color:var(--ink); font:400 clamp(2.5rem,5vw,3.5rem)/1 'DM Mono',monospace; letter-spacing:-.08em; }
.pomodoro-progress { height:4px; margin:-2px 0 18px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--ink) 12%,transparent); }
.pomodoro-progress span { display:block; width:0; height:100%; border-radius:inherit; background:var(--cyan); box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 55%,transparent); transition:width .25s linear; }
.pomodoro-modes { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pomodoro-modes button,.pomodoro-actions button { min-height:36px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:.7rem; }
.pomodoro-modes button.active { border-color:var(--cyan); color:var(--navy); background:var(--cyan); }
.pomodoro-actions { display:grid; grid-template-columns:1.4fr 1fr; gap:6px; margin-top:8px; }
.pomodoro-actions .pomodoro-primary { border-color:var(--cyan); background:var(--cyan); color:var(--navy); }
.pomodoro-status { min-height:1.4em; margin:11px 0 0; color:var(--muted); font-size:.65rem; line-height:1.6; }
.preset-list button,.noise-types button { border-radius:6px; font-size:.75rem; min-height:42px; }
.section-label span { letter-spacing:0; font-size:.7rem; }
.theme-list { grid-template-columns:repeat(10,1fr); gap:8px; }
.theme-swatch { width:100%; max-width:26px; }
.theme-swatch.active { box-shadow:0 0 0 2px var(--deep),0 0 0 3px var(--cyan); }
.save-button { border-color:var(--line); color:var(--muted); border-radius:6px; }
.ambient-info { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; color:var(--muted); }
.ambient-info:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }
#clockWidget { flex:1 1 100%; text-align:center; }
#clockTime { display:block; font:400 clamp(3.8rem,8vw,6.8rem)/1.05 'DM Mono',monospace; color:var(--ink); letter-spacing:-.07em; }
#clockDate { display:block; margin-top:10px; font-size:.75rem; }
#weatherWidget { align-self:center; font-size:.8rem; max-width:250px; }
#weatherWidget small { display:block; margin-top:8px; font-size:.6rem; }
#weatherWidget a { color:inherit; }
.display-settings { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.display-settings h2 { margin:0 0 12px; font-size:.78rem; font-weight:400; color:var(--muted); }
.toggle-row { display:flex; justify-content:space-between; align-items:center; min-height:42px; font-size:.8rem; cursor:pointer; }
.toggle-row input { appearance:none; width:36px; height:21px; border-radius:20px; background:#45515a; margin:0; position:relative; cursor:pointer; }
.toggle-row input::after { content:''; position:absolute; width:15px; height:15px; background:white; border-radius:50%; top:3px; left:3px; transition:transform .15s; }
.toggle-row input:checked { background:var(--cyan); }
.toggle-row input:checked::after { background:var(--deep); transform:translateX(15px); }
#locationChange { color:var(--cyan); background:none; border:0; padding:10px 0; cursor:pointer; }
.background-audio-setting { display:grid; grid-template-columns:1fr 36px 20px; gap:10px; align-items:center; }
.background-audio-setting input { appearance:none; width:36px; height:21px; border-radius:20px; background:#45515a; margin:0; position:relative; cursor:pointer; }
.background-audio-setting input::after { content:''; position:absolute; width:15px; height:15px; background:white; border-radius:50%; top:3px; left:3px; transition:transform .15s; }
.background-audio-setting input:checked { background:var(--cyan); }
.background-audio-setting input:checked::after { background:var(--deep); transform:translateX(15px); }
.reward-section { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.reward-section .section-label h2 { font-size:.78rem; font-weight:400; color:var(--muted); }
.reward-status { margin:10px 0 12px; color:var(--muted); font-size:.7rem; line-height:1.7; }
.reward-button { width:100%; min-height:44px; padding:10px 14px; border:1px solid color-mix(in srgb,var(--cyan) 45%,var(--line)); border-radius:7px; background:color-mix(in srgb,var(--cyan) 10%,transparent); color:var(--ink); cursor:pointer; font:inherit; font-size:.75rem; }
.reward-button:hover { background:color-mix(in srgb,var(--cyan) 18%,transparent); }
.reward-button:disabled { opacity:.55; cursor:wait; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dialog-actions button { margin:12px 0 0; }
.dialog-actions button:last-child { background:var(--cyan); color:var(--deep); }
dialog { width:min(440px,calc(100% - 32px)); padding:28px; background:var(--navy); color:var(--ink); border:1px solid var(--line); border-radius:16px; }
dialog::backdrop { background:#000a; backdrop-filter:blur(8px); }
dialog h2 { font-size:1.1rem; margin:0 0 18px; } dialog p { font-size:.8rem; line-height:1.9; color:var(--muted); }
dialog button,dialog select { display:block; width:100%; min-height:44px; margin:12px 0; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--deep); color:var(--ink); cursor:pointer; }
dialog label { font-size:.75rem; } #useLocation { background:var(--cyan); color:var(--deep); }
.listening-guide { max-width:900px; margin:20px auto 40px; color:var(--muted); }
.site-footer { padding:20px 0; } [hidden] { display:none!important; }
@media(max-width:800px) {
 .app-shell { padding:22px 20px; }
 .workspace { grid-template-columns:minmax(0,1fr); gap:32px; padding:28px 0; }
 .workspace .sound-core { max-width:none; min-height:330px; padding:24px; gap:18px; border-radius:18px; }
 .frequency-readout { padding:0 0 18px; } .frequency-readout output { font-size:4rem; margin:6px 0; }
 .control-panel { max-width:none; padding:0; border:0; border-radius:0; background:none; overflow:visible; } .control-panel > .ad-area { margin-top:29px; margin-left:0; margin-right:0; padding:14px 0 0; } .sound-core .play-button { min-height:58px; }
 .theme-list { grid-template-columns:repeat(10,1fr); gap:8px; } .theme-swatch { max-width:28px; }
 .ambient-info { gap:12px; } #clockTime { font-size:clamp(3.2rem,16vw,5rem); }
}

/* ============ STYLISH signature polish ============
   Scoped to stylish so simple/fancy stay untouched. */
html[data-design-theme="stylish"] .app-shell { position:relative; isolation:isolate; }
html[data-design-theme="stylish"] .app-shell::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38rem 24rem at 10% -6%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 70%),
    radial-gradient(32rem 22rem at 98% 34%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%),
    radial-gradient(28rem 20rem at 50% 110%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 70%); }
html[data-design-theme="stylish"] .app-shell > * { position:relative; z-index:1; }
/* Header */
html[data-design-theme="stylish"] .brand-mark { color:var(--cyan); filter:drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 55%, transparent)); }
html[data-design-theme="stylish"] .header-actions .status { padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb, var(--navy) 55%, transparent); backdrop-filter:blur(6px); }
html[data-design-theme="stylish"] .playing .status i { animation:stylish-status-pulse 1.6s ease-in-out infinite; }
@keyframes stylish-status-pulse { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--cyan) 22%, transparent); } }
html[data-design-theme="stylish"] .install-button--header { transition:transform .18s, box-shadow .18s, border-color .18s; }
html[data-design-theme="stylish"] .install-button--header:hover { border-color:var(--cyan); transform:translateY(-1px); box-shadow:0 8px 22px color-mix(in srgb, var(--cyan) 28%, transparent); }
/* Player card */
html[data-design-theme="stylish"] .workspace .sound-core { position:relative; overflow:hidden; isolation:isolate;
  border:1px solid color-mix(in srgb, var(--cyan) 30%, var(--line));
  background:
    radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--navy) 75%, #242629), var(--deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px rgba(0,0,0,.35), 0 0 90px color-mix(in srgb, var(--cyan) 9%, transparent);
  transition:border-color .35s, box-shadow .35s; }
html[data-design-theme="stylish"] .playing .workspace .sound-core { border-color:color-mix(in srgb, var(--cyan) 58%, var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 26px 70px rgba(0,0,0,.42), 0 0 120px color-mix(in srgb, var(--cyan) 20%, transparent); }
html[data-design-theme="stylish"] .workspace .sound-core::before { display:block; content:""; position:absolute; top:-32%; left:50%; transform:translateX(-50%); width:85%; height:62%; z-index:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 17%, transparent), transparent); filter:blur(22px); pointer-events:none; }
html[data-design-theme="stylish"] .workspace .sound-core > :not(.orbit):not(.orbit-field) { position:relative; z-index:1; }
html[data-design-theme="stylish"] .workspace .sound-core .orbit { display:block; inset:10% 13%; border:1px solid color-mix(in srgb, var(--cyan) 24%, transparent); opacity:.9; }
html[data-design-theme="stylish"] .workspace .sound-core .orbit-two { inset:19% 24%; border-style:dashed; opacity:.65; }
/* Inscribed true circles at any card aspect (wide, square, tall). */
@supports (width:1cqi) {
  html[data-design-theme="stylish"] .workspace .sound-core > .orbit-field { container-type:size; }
  html[data-design-theme="stylish"] .workspace .sound-core .orbit { inset:auto; left:50%; top:50%; translate:-50% -50%; width:min(80cqi,80cqb); height:min(80cqi,80cqb); }
  html[data-design-theme="stylish"] .workspace .sound-core .orbit-two { width:min(58cqi,58cqb); height:min(58cqi,58cqb); }
}
html[data-design-theme="stylish"] .workspace .sound-core .orbit::after { box-shadow:0 0 12px 3px color-mix(in srgb, var(--cyan) 50%, transparent); }
/* Readout */
html[data-design-theme="stylish"] .frequency-readout { border-bottom:0; }
html[data-design-theme="stylish"] .frequency-readout output { text-shadow:0 0 36px color-mix(in srgb, var(--cyan) 32%, transparent); }
html[data-design-theme="stylish"] .frequency-readout::after { content:""; display:block; height:1px; margin-top:10px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 50%, var(--line)), transparent); }
/* Play button */
html[data-design-theme="stylish"] .sound-core .play-button { border:0; color:var(--deep); font-weight:800;
  background:linear-gradient(180deg, color-mix(in srgb, #fff 14%, var(--cyan)), var(--cyan));
  box-shadow:0 12px 32px color-mix(in srgb, var(--cyan) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s, box-shadow .18s, filter .18s; }
html[data-design-theme="stylish"] .sound-core .play-button:hover { transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 18px 44px color-mix(in srgb, var(--cyan) 52%, transparent), inset 0 1px 0 rgba(255,255,255,.55); }
html[data-design-theme="stylish"] .sound-core .play-button:active { transform:translateY(1px); }
html[data-design-theme="stylish"] .playing .sound-core .play-button { animation:stylish-breathe 2.6s ease-in-out infinite; }
@keyframes stylish-breathe { 50% { box-shadow:0 12px 48px color-mix(in srgb, var(--cyan) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.55); } }
/* Sliders */
html[data-design-theme="stylish"] input[type="range"]::-webkit-slider-thumb { transition:transform .15s, box-shadow .15s; }
html[data-design-theme="stylish"] input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.25); box-shadow:0 0 0 4px color-mix(in srgb, var(--cyan) 25%, transparent), 0 0 0 1px var(--cyan); }
/* Control panel + sections */
html[data-design-theme="stylish"] .settings-title { display:flex; align-items:center; gap:10px; letter-spacing:.12em; text-transform:uppercase; }
html[data-design-theme="stylish"] .settings-title::before { content:""; width:18px; height:2px; border-radius:2px; background:var(--cyan); box-shadow:0 0 10px color-mix(in srgb, var(--cyan) 75%, transparent); }
html[data-design-theme="stylish"] .preset-list button, html[data-design-theme="stylish"] .noise-types button,
html[data-design-theme="stylish"] .pomodoro-modes button, html[data-design-theme="stylish"] .pomodoro-actions button { transition:transform .16s, box-shadow .16s, border-color .16s, background-color .16s, color .16s; }
html[data-design-theme="stylish"] .preset-list button:hover, html[data-design-theme="stylish"] .noise-types button:hover,
html[data-design-theme="stylish"] .pomodoro-modes button:hover, html[data-design-theme="stylish"] .pomodoro-actions button:hover { border-color:var(--cyan); color:var(--ink); transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--cyan) 22%, transparent); }
html[data-design-theme="stylish"] .preset-list button.active, html[data-design-theme="stylish"] .noise-types button.active,
html[data-design-theme="stylish"] .pomodoro-modes button.active, html[data-design-theme="stylish"] .pomodoro-actions .pomodoro-primary { box-shadow:0 6px 20px color-mix(in srgb, var(--cyan) 40%, transparent); }
html[data-design-theme="stylish"] .pomodoro-display { text-shadow:0 0 28px color-mix(in srgb, var(--cyan) 25%, transparent); }
html[data-design-theme="stylish"] .toggle-row input:checked, html[data-design-theme="stylish"] .background-audio-setting input:checked { box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 60%, transparent); }
html[data-design-theme="stylish"] .theme-swatch:hover { box-shadow:0 0 0 2px var(--deep), 0 0 16px color-mix(in srgb, var(--cyan) 55%, transparent); }
html[data-design-theme="stylish"] .save-button:hover, html[data-design-theme="stylish"] .favorite-button:hover { box-shadow:0 8px 22px color-mix(in srgb, var(--cyan) 30%, transparent); transform:translateY(-1px); }
html[data-design-theme="stylish"] .settings-links .settings-link { transition:border-color .16s, color .16s, box-shadow .16s; }
html[data-design-theme="stylish"] .settings-links .settings-link:hover { box-shadow:0 4px 14px color-mix(in srgb, var(--cyan) 25%, transparent); }
@media(min-width:801px) {
  html[data-design-theme="stylish"] .control-panel { border:1px solid color-mix(in srgb, var(--cyan) 24%, var(--line));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 55px rgba(0,0,0,.32), 0 0 70px color-mix(in srgb, var(--cyan) 7%, transparent); }
}
@media(prefers-reduced-motion:reduce) {
  html[data-design-theme="stylish"] .playing .sound-core .play-button, html[data-design-theme="stylish"] .playing .status i { animation:none; }
  html[data-design-theme="stylish"] .sound-core .play-button:hover { transform:none; }
}

/* ============ SNS share ============ */
.share-block { z-index:1; width:100%; max-width:320px; margin-top:2px; text-align:center; }
.share-label { margin:0 0 8px; color:var(--muted); font:500 .65rem "DM Mono",monospace; letter-spacing:.14em; }
.share-buttons { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.share-button { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font:600 .72rem Manrope,system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:border-color .16s,color .16s,background-color .16s,transform .16s; }
.share-button svg { width:15px; height:15px; flex:none; }
.share-button:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px); }
.share-button:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.share-status { min-height:1.2em; margin:8px 0 0; color:var(--muted); font-size:.68rem; line-height:1.6; }
.share-status:not(:empty) { color:var(--cyan); }
/* Article pages (effects/terms/privacy) */
.article-share { margin-top:36px; padding:20px; border:1px solid var(--line); border-radius:12px; text-align:center; }
.article-share .share-block { max-width:none; margin:0; }
.article-share .share-buttons { margin-top:4px; }