/* ZERO — 共通の土台（色・文字・ボタン・ロード画面・背景・ツールバー・カード）。すべてのページで使います。 */

/* ===== 色（テーマカラーの色相 --h から Material 3 風のトーンを作る） ===== */
:root{
--h:5;
--primary:oklch(.47 .19 var(--h));
--on-primary:oklch(.99 .008 var(--h));
--primary-container:oklch(.9 .075 var(--h));
--on-primary-container:oklch(.32 .12 var(--h));
--secondary-container:oklch(.91 .045 calc(var(--h) + 35));
--on-secondary-container:oklch(.3 .05 calc(var(--h) + 35));
--tertiary-container:oklch(.9 .085 calc(var(--h) + 120));
--on-tertiary-container:oklch(.3 .08 calc(var(--h) + 120));
--surface:oklch(.985 .01 var(--h));
--surface-container-lowest:oklch(1 0 0);
--surface-container-low:oklch(.968 .015 var(--h));
--surface-container:oklch(.952 .019 var(--h));
--surface-container-high:oklch(.936 .023 var(--h));
--surface-container-highest:oklch(.918 .027 var(--h));
--on-surface:oklch(.23 .02 var(--h));
--on-surface-variant:oklch(.42 .035 var(--h));
--outline:oklch(.6 .03 var(--h));
--outline-variant:oklch(.86 .025 var(--h));
--inverse-surface:oklch(.3 .02 var(--h));
--inverse-on-surface:oklch(.96 .01 var(--h));
--glass:color-mix(in oklch,var(--surface-container-lowest) 74%,transparent);
--scrim:rgb(12 8 10 / .42);
/* かわいい差し色（テーマカラーに関係なく使う） */
--pop-pink:oklch(.83 .11 5);
--pop-yellow:oklch(.89 .14 95);
--pop-mint:oklch(.86 .12 165);
--pop-blue:oklch(.79 .11 255);
--pop-violet:oklch(.81 .1 300);
--pop-orange:oklch(.83 .12 55);
--on-pop:#211a1e;
/* 影と動き */
--elev-1:0 1px 2px rgb(0 0 0 / .18),0 1px 3px 1px rgb(0 0 0 / .1);
--elev-2:0 1px 2px rgb(0 0 0 / .2),0 2px 6px 2px rgb(0 0 0 / .1);
--elev-3:0 4px 8px 3px rgb(0 0 0 / .1),0 1px 3px rgb(0 0 0 / .2);
--spring-fast:cubic-bezier(.42,1.67,.21,.9);
--spring:cubic-bezier(.38,1.21,.22,1);
--spring-slow:cubic-bezier(.39,1.29,.35,.98);
--effects:cubic-bezier(.34,.8,.34,1);
--display:'Dela Gothic One','Zen Maru Gothic',sans-serif;
--body:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;
--flex:'Roboto Flex','Zen Maru Gothic',sans-serif;
color-scheme:light
}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--primary:oklch(.82 .11 var(--h));
--on-primary:oklch(.3 .1 var(--h));
--primary-container:oklch(.41 .13 var(--h));
--on-primary-container:oklch(.93 .055 var(--h));
--secondary-container:oklch(.38 .05 calc(var(--h) + 35));
--on-secondary-container:oklch(.92 .03 calc(var(--h) + 35));
--tertiary-container:oklch(.4 .08 calc(var(--h) + 120));
--on-tertiary-container:oklch(.92 .06 calc(var(--h) + 120));
--surface:oklch(.17 .012 var(--h));
--surface-container-lowest:oklch(.14 .01 var(--h));
--surface-container-low:oklch(.2 .014 var(--h));
--surface-container:oklch(.225 .016 var(--h));
--surface-container-high:oklch(.26 .018 var(--h));
--surface-container-highest:oklch(.3 .02 var(--h));
--on-surface:oklch(.93 .012 var(--h));
--on-surface-variant:oklch(.8 .025 var(--h));
--outline:oklch(.62 .025 var(--h));
--outline-variant:oklch(.38 .02 var(--h));
--inverse-surface:oklch(.93 .012 var(--h));
--inverse-on-surface:oklch(.25 .02 var(--h));
--glass:color-mix(in oklch,var(--surface-container-low) 76%,transparent);
color-scheme:dark
}
}
:root[data-theme="dark"]{
--primary:oklch(.82 .11 var(--h));
--on-primary:oklch(.3 .1 var(--h));
--primary-container:oklch(.41 .13 var(--h));
--on-primary-container:oklch(.93 .055 var(--h));
--secondary-container:oklch(.38 .05 calc(var(--h) + 35));
--on-secondary-container:oklch(.92 .03 calc(var(--h) + 35));
--tertiary-container:oklch(.4 .08 calc(var(--h) + 120));
--on-tertiary-container:oklch(.92 .06 calc(var(--h) + 120));
--surface:oklch(.17 .012 var(--h));
--surface-container-lowest:oklch(.14 .01 var(--h));
--surface-container-low:oklch(.2 .014 var(--h));
--surface-container:oklch(.225 .016 var(--h));
--surface-container-high:oklch(.26 .018 var(--h));
--surface-container-highest:oklch(.3 .02 var(--h));
--on-surface:oklch(.93 .012 var(--h));
--on-surface-variant:oklch(.8 .025 var(--h));
--outline:oklch(.62 .025 var(--h));
--outline-variant:oklch(.38 .02 var(--h));
--inverse-surface:oklch(.93 .012 var(--h));
--inverse-on-surface:oklch(.25 .02 var(--h));
--glass:color-mix(in oklch,var(--surface-container-low) 76%,transparent);
color-scheme:dark
}

/* ===== 基本 ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--surface);color:var(--on-surface);font-family:var(--body);font-weight:500;line-height:1.7;overflow-x:hidden;transition:background-color .4s var(--effects),color .4s var(--effects)}
img{display:block;max-width:100%}
a{color:inherit}
svg{fill:currentColor}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 20px;background:var(--primary);color:var(--on-primary);border-radius:999px;font-weight:900;text-decoration:none;transition:top .3s var(--spring)}
.skip-link:focus{top:16px}
.phrase{display:inline-block}
.eyebrow{margin:0;color:var(--on-surface-variant);font-family:var(--flex);font-weight:700;font-size:.74rem;letter-spacing:.14em;font-variation-settings:'wdth' 112}

/* ===== ボタン（押すと角の丸みが変わる、M3 Expressiveの形の変化） ===== */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:28px;font-weight:900;font-size:1rem;text-decoration:none;cursor:pointer;isolation:isolate;overflow:hidden;transition:border-radius .45s var(--spring-fast),transform .45s var(--spring-fast),box-shadow .2s var(--effects)}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:currentColor;opacity:0;transition:opacity .2s var(--effects)}
@media(hover:hover){.btn:hover::after{opacity:.08}}
@media(hover:hover){.btn:hover{box-shadow:var(--elev-1)}}
.btn:active{border-radius:18px;transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.btn-filled{background:var(--primary);color:var(--on-primary)}
.btn-tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn-block{justify-content:space-between;width:100%;min-height:64px;padding:10px 22px;border-radius:24px;text-align:left}
.btn-block small{display:block;font-family:var(--flex);font-size:.66rem;letter-spacing:.14em;opacity:.8}
.btn-block:active{border-radius:40px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:22px;background:transparent;color:var(--on-surface-variant);cursor:pointer;isolation:isolate;transition:border-radius .4s var(--spring-fast),background-color .2s var(--effects),color .2s}
.icon-btn::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:currentColor;opacity:0;transition:opacity .2s var(--effects)}
@media(hover:hover){.icon-btn:hover::after{opacity:.1}}
.icon-btn:active{border-radius:12px}
.icon-btn svg{width:22px;height:22px}
.icon-btn-tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.text-link{display:inline-block;margin-top:14px;color:var(--primary);font-weight:900;text-decoration:none}
@media(hover:hover){.text-link:hover{text-decoration:underline}}

/* ===== ロード画面（形が変わり続けるローディングインジケーター） ===== */
.site-loader{position:fixed;inset:0;z-index:300;display:grid;place-content:center;justify-items:center;gap:22px;background:var(--surface);transition:opacity .45s var(--effects),visibility .45s}
.site-loader.is-complete{opacity:0;visibility:hidden}
.loader-shape{width:88px;height:88px;background:var(--primary);clip-path:var(--shape-cookie9);animation:loaderMorph 2.6s var(--spring) infinite,loaderSpin 2.6s linear infinite}
.loader-meta{display:flex;align-items:baseline;gap:14px;font-weight:700;color:var(--on-surface-variant)}
.loader-status{margin:0}
.loader-percent{font-family:var(--flex);font-variation-settings:'wdth' 120;color:var(--primary)}
.loader-bar{width:min(260px,70vw);height:8px;border-radius:999px;background:var(--secondary-container);overflow:hidden}
.loader-bar span{display:block;width:var(--progress,0%);height:100%;border-radius:inherit;background:var(--primary);transition:width .3s var(--spring)}
@keyframes loaderMorph{0%,100%{clip-path:var(--shape-cookie9)}20%{clip-path:var(--shape-clover4)}40%{clip-path:var(--shape-burst)}60%{clip-path:var(--shape-pentagon)}80%{clip-path:var(--shape-flower)}}
@keyframes loaderSpin{to{rotate:360deg}}

/* ===== 背景のステージ（固定。スクロールするとぼかしが強くなる） ===== */
/* 背景は画面いちばん大きいときの高さ（lvh）で固定し、スマホでアドレスバーが隠れても図形が動かないようにします */
.stage{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 12% 18%,color-mix(in oklch,var(--primary-container) 75%,transparent),transparent 42%),radial-gradient(circle at 88% 86%,color-mix(in oklch,var(--tertiary-container) 70%,transparent),transparent 45%),var(--surface)}
.stage-shapes{position:absolute;inset:0;--px:0;--py:0}
.stage-shape,.stage-dots{position:absolute;display:block;translate:calc(var(--px) * var(--depth,1) * 18px) calc(var(--py) * var(--depth,1) * 18px);transition:translate .5s var(--spring)}
.s-cookie{right:-6vmin;top:8vh;width:42vmin;aspect-ratio:1;background:var(--pop-yellow);clip-path:var(--shape-cookie9);animation:spin 46s linear infinite}
.s-clover{left:-4vmin;bottom:10vh;width:24vmin;aspect-ratio:1;background:var(--pop-mint);clip-path:var(--shape-clover4);animation:spin 34s linear infinite reverse}
.s-burst{left:44%;top:9vh;width:12vmin;aspect-ratio:1;background:var(--pop-pink);clip-path:var(--shape-burst);animation:spin 18s linear infinite,bob 5s var(--spring) infinite alternate}
.s-flower{right:30%;bottom:5vh;width:16vmin;aspect-ratio:1;background:var(--pop-violet);clip-path:var(--shape-flower);animation:spin 26s linear infinite}
.s-pill{right:9%;bottom:26vh;width:24vmin;height:8vmin;background:var(--pop-blue);border-radius:999px;animation:slide 6s var(--spring) infinite alternate}
.s-gem{left:22%;bottom:16vh;width:9vmin;aspect-ratio:1;background:var(--pop-orange);clip-path:var(--shape-gem);animation:spin 14s linear infinite reverse}
.s-tri{left:6%;top:16vh;width:9vmin;aspect-ratio:1;background:var(--primary-container);clip-path:var(--shape-triangle);animation:spin 20s linear infinite}
.stage-dots{right:38%;top:48vh;width:18vmin;height:12vmin;background-image:radial-gradient(color-mix(in oklch,var(--on-surface) 55%,transparent) 2.2px,transparent 2.6px);background-size:16px 16px;animation:bob 8s ease-in-out infinite alternate}
.stage-blur{position:absolute;inset:0;backdrop-filter:blur(var(--blur,0px));-webkit-backdrop-filter:blur(var(--blur,0px));background:color-mix(in oklch,var(--surface) var(--veil,0%),transparent)}
@keyframes spin{to{rotate:360deg}}
@keyframes bob{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
@keyframes slide{from{transform:translateX(-24px)}to{transform:translateX(24px)}}

/* ===== 上の浮かぶツールバー（いつもの時計バー） ===== */
.toolbar{position:fixed;top:14px;left:50%;z-index:50;display:flex;align-items:center;gap:6px;padding:6px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:999px;box-shadow:var(--elev-3);translate:-50% 0;transition:translate .5s var(--spring),opacity .3s var(--effects)}
.toolbar.is-hidden{translate:-50% calc(-100% - 24px);opacity:0}
.toolbar-group{display:flex;gap:2px}
.clock-wrap{position:relative}
/* 時計のピルは12時間表示（AM 12:59）でも24時間表示でも同じ幅・1行（数字は等幅） */
.clock{flex:0 0 auto;width:120px;height:44px;padding:0 12px;border:0;border-radius:22px;background:var(--secondary-container);color:var(--on-secondary-container);font-family:var(--flex);font-weight:800;font-size:1.08rem;font-variation-settings:'wdth' 118;letter-spacing:.02em;cursor:pointer;transition:border-radius .4s var(--spring-fast),transform .4s var(--spring-fast);white-space:nowrap;overflow:hidden;text-align:center;font-variant-numeric:tabular-nums}
.clock:active{border-radius:14px;transform:scale(.96)}
.calendar{position:absolute;top:calc(100% + 12px);left:50%;width:286px;padding:16px;background:var(--surface-container-high);border-radius:28px;box-shadow:var(--elev-3);opacity:0;visibility:hidden;translate:-50% -8px;scale:.92;transform-origin:50% 0;transition:opacity .2s var(--effects),visibility 0s linear .2s,translate .45s var(--spring),scale .45s var(--spring)}
.clock-wrap.is-open .calendar{opacity:1;visibility:visible;translate:-50% 0;scale:1;transition-delay:0s}
@media(hover:hover){.clock-wrap:hover .calendar{opacity:1;visibility:visible;translate:-50% 0;scale:1;transition-delay:0s}}
.calendar-title{margin:0 0 8px;text-align:center;font-family:var(--flex);font-weight:800;font-variation-settings:'wdth' 120}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calendar-weekdays{font-size:.72rem;font-weight:700;color:var(--on-surface-variant)}
.calendar-weekdays .sun,.calendar-day.sun{color:oklch(.55 .17 25)}
.calendar-weekdays .sat,.calendar-day.sat{color:oklch(.5 .14 255)}
.calendar-day{display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;font-family:var(--flex);font-weight:700;font-size:.85rem;cursor:pointer;transition:border-radius .35s var(--spring-fast),background-color .2s}
@media(hover:hover){.calendar-day:hover{background:var(--secondary-container)}}
.calendar-day:active{border-radius:10px}
.calendar-day.is-today{background:var(--primary);color:var(--on-primary)}

/* ===== ページ本体と、どのページでも使う部品 ===== */
main{position:relative;z-index:1}
.assist-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 16px 8px 12px;background:var(--surface-container-lowest);color:var(--on-surface);border-radius:12px;box-shadow:var(--elev-1);font-family:var(--flex);font-weight:700;font-size:.8rem;letter-spacing:.08em;font-variation-settings:'wdth' 110}
.assist-chip svg{width:18px;height:18px;color:var(--primary)}
.content-screen{max-width:1240px;margin:28px auto 0;padding:clamp(18px,3vw,32px);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-radius:clamp(28px,4vw,48px);box-shadow:var(--elev-2);margin-inline:clamp(12px,3vw,40px)}
@media(min-width:1320px){.content-screen{margin-inline:auto}}
.content-head{width:fit-content;margin:0 0 22px;padding:8px 18px;background:var(--primary-container);color:var(--on-primary-container);border-radius:999px;font-family:var(--flex);font-weight:800;font-variation-settings:'wdth' 110}
.card{position:relative;padding:clamp(18px,2.4vw,26px);background:var(--surface-container);border-radius:32px}
.card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2}
.card-sub{margin:2px 0 0;color:var(--on-surface-variant);font-weight:700;font-size:.86rem}
/* チップ */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.chips li{padding:4px 12px;background:var(--secondary-container);color:var(--on-secondary-container);border-radius:10px;font-weight:700;font-size:.8rem}
/* 切り替えボタン */
.segmented{display:flex;gap:2px;padding:0}
.segmented button{min-height:40px;padding:0 18px;border:0;background:var(--surface-container-highest);color:var(--on-surface-variant);font-weight:900;cursor:pointer;transition:border-radius .45s var(--spring-fast),background-color .2s var(--effects)}
.segmented button:first-child{border-radius:20px 8px 8px 20px}
.segmented button:last-child{border-radius:8px 20px 20px 8px}
.segmented button[aria-selected="true"]{background:var(--primary);color:var(--on-primary);border-radius:20px}
/* note記事とGitHubの一覧 */
.note-list{display:grid;gap:10px}
.note-card{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center;padding:8px;background:var(--surface-container-high);border-radius:24px;text-decoration:none;transition:border-radius .45s var(--spring-fast),background-color .2s,translate .45s var(--spring)}
@media(hover:hover){.note-card:hover{background:var(--secondary-container);color:var(--on-secondary-container);border-radius:36px}}
.note-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px}
.note-copy{display:grid;gap:2px}
.note-copy time{width:fit-content;padding:0 10px;background:var(--tertiary-container);color:var(--on-tertiary-container);border-radius:999px;font-family:var(--flex);font-weight:800;font-size:.74rem}
.note-copy strong{font-size:.98rem;line-height:1.5}
.note-copy small{color:var(--primary);font-weight:900}
@media(hover:hover){.note-card:hover .note-copy small{color:inherit}}
.repo-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.repo-list a{display:grid;gap:2px;padding:12px 18px;background:var(--surface-container-high);border-radius:20px;text-decoration:none;transition:border-radius .45s var(--spring-fast),background-color .2s,translate .45s var(--spring)}
@media(hover:hover){.repo-list a:hover{background:var(--secondary-container);color:var(--on-secondary-container);border-radius:32px;translate:4px 0}}
.repo-list strong{font-family:var(--flex);font-weight:800;font-variation-settings:'wdth' 108}
.repo-list small{color:var(--on-surface-variant);font-weight:700}
@media(hover:hover){.repo-list a:hover small{color:inherit}}

/* ===== 検索（ツールバーの検索ボタンから開く「新しいタブ」。site/search.js） ===== */
.search-dialog{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 96px);margin:76px auto auto;padding:clamp(18px,3vw,26px);border:0;background:var(--surface-container-high);color:var(--on-surface);border-radius:36px;box-shadow:var(--elev-3);overflow-y:auto}
.search-dialog[open]{animation:searchIn .45s var(--spring)}
.search-dialog::backdrop{background:var(--scrim)}
@keyframes searchIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
.search-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.search-head h2{margin:2px 0 0;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.3}
.search-box{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px;background:var(--surface-container-lowest);border-radius:28px;box-shadow:inset 0 0 0 2px var(--outline-variant);transition:box-shadow .2s var(--effects)}
.search-box:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
.search-engine-mark{display:grid;flex:0 0 auto;place-items:center;width:40px;height:40px;background:#fff;clip-path:var(--shape-cookie9)}
.search-engine-mark img{width:22px;height:22px;object-fit:contain}
.search-box input{flex:1;min-width:0;height:44px;padding:0 4px;border:0;background:transparent;color:inherit;font:inherit;font-size:1.05rem;font-weight:700;outline:none}
.search-submit{display:grid;flex:0 0 auto;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:22px;background:var(--primary);color:var(--on-primary);cursor:pointer;transition:border-radius .4s var(--spring-fast)}
.search-submit svg{width:22px;height:22px}
.search-submit:active{border-radius:12px}
.search-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:12px}
.search-engine{display:flex;align-items:center;gap:8px;color:var(--on-surface-variant);font-weight:700;font-size:.86rem}
.search-engine select{min-height:40px;padding:0 14px;border:0;border-radius:20px;background:var(--secondary-container);color:var(--on-secondary-container);font:inherit;font-weight:800;cursor:pointer}
.search-open-mode{color:var(--on-surface-variant);font-weight:700;font-size:.8rem}
.search-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.search-recent-label{color:var(--on-surface-variant);font-family:var(--flex);font-weight:800;font-size:.74rem;letter-spacing:.1em}
.search-recent-chip{max-width:16em;min-height:34px;padding:0 14px;overflow:hidden;border:0;border-radius:10px;background:var(--surface-container-highest);color:var(--on-surface);font:inherit;font-weight:700;font-size:.84rem;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:border-radius .35s var(--spring-fast)}
.search-recent-chip:active{border-radius:17px}
.search-bookmarks{margin-top:18px;padding-top:16px;border-top:2px dashed var(--outline-variant)}
.search-bookmarks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.search-bookmarks-head h3{margin:2px 0 0;font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.3}
.search-bookmark-add{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px 0 12px;border:0;border-radius:20px;background:var(--secondary-container);color:var(--on-secondary-container);font:inherit;font-weight:900;cursor:pointer;transition:border-radius .35s var(--spring-fast)}
.search-bookmark-add svg{width:20px;height:20px}
.search-bookmark-add:active{border-radius:12px}
.search-bookmark-add:disabled{opacity:.5;cursor:default}
.search-bookmark-editor{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;padding:14px;background:var(--surface-container);border-radius:24px}
.search-bookmark-editor[hidden]{display:none}
.search-bookmark-editor label{display:grid;gap:4px;color:var(--on-surface-variant);font-weight:800;font-size:.8rem}
.search-bookmark-editor input{min-height:44px;padding:0 14px;border:2px solid var(--outline-variant);border-radius:14px;background:var(--surface-container-lowest);color:var(--on-surface);font:inherit;font-weight:700}
.search-bookmark-editor input:focus{border-color:var(--primary);outline:none}
.search-bookmark-actions{display:flex;grid-column:1 / -1;justify-content:flex-end;gap:8px}
.search-bookmark-actions .btn{min-height:44px;padding:0 20px;border-radius:22px}
.search-bookmark-error{grid-column:1 / -1;margin:0;padding:6px 12px;background:oklch(.93 .05 25);color:oklch(.38 .14 25);border-radius:12px;font-weight:700;font-size:.82rem}
.search-bookmark-error:empty{display:none}
.search-bookmark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.search-bookmark{position:relative}
.search-bookmark a{display:grid;justify-items:center;gap:4px;padding:14px 10px 12px;background:var(--surface-container);border-radius:24px;text-align:center;text-decoration:none;transition:border-radius .45s var(--spring-fast),background-color .2s var(--effects)}
.search-bookmark-icon{display:grid;place-items:center;width:44px;height:44px;background:var(--tone);color:var(--on-pop);clip-path:var(--shape-cookie9);font-family:var(--display);font-size:1.2rem}
.search-bookmark strong,.search-bookmark small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-bookmark strong{font-weight:900;font-size:.88rem}
.search-bookmark small{color:var(--on-surface-variant);font-weight:700;font-size:.72rem}
.search-bookmark-remove{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:14px;background:var(--surface-container-highest);color:var(--on-surface-variant);font-weight:900;cursor:pointer}
.search-bookmark-empty{margin:0;color:var(--on-surface-variant);font-weight:700;font-size:.86rem}
@media(hover:hover){.search-bookmark a:hover{background:color-mix(in oklch,var(--tone) 35%,var(--surface-container));border-radius:32px}}
@media(max-width:560px){.search-dialog{margin-top:66px;border-radius:28px}.search-bookmark-editor{grid-template-columns:1fr}}

/* ===== テーマカラー切り替えの演出（common.js が新しい画面の clip-path を図形の形で広げます） ===== */
html.is-hue-reveal::view-transition-old(root),html.is-hue-reveal::view-transition-new(root){animation:none;mix-blend-mode:normal}
#hueButton.is-spinning svg{animation:hueSpin .8s var(--spring)}
@keyframes hueSpin{0%{rotate:0deg;scale:1}35%{scale:1.3}100%{rotate:360deg;scale:1}}

/* ===== スナックバー ===== */
.snackbar{position:fixed;left:50%;bottom:24px;z-index:250;max-width:calc(100vw - 32px);padding:14px 22px;background:var(--inverse-surface);color:var(--inverse-on-surface);border-radius:16px;box-shadow:var(--elev-3);font-weight:700;opacity:0;visibility:hidden;translate:-50% 20px;transition:opacity .2s var(--effects),visibility .2s,translate .45s var(--spring)}
.snackbar.is-visible{opacity:1;visibility:visible;translate:-50% 0}

/* ===== スクロールで登場 ===== */
.js .reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .45s var(--effects),transform .7s var(--spring)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ===== 画面幅ごとの調整 ===== */
@media(max-width:820px){
/* スマホ・タブレットでは背景の図形を減らして、文字を読みやすくします */
.s-pill,.s-gem,.s-tri,.stage-dots{display:none}
.s-clover{width:30vmin;left:-12vmin;bottom:6vh}
.s-flower{width:14vmin;right:8%;bottom:3vh}
}
@media(max-width:560px){
.btn{min-height:50px;padding:0 20px}
.toolbar{top:10px;gap:2px;padding:4px}
.clock{width:110px;padding:0 8px}
.note-card{grid-template-columns:96px 1fr}
.s-cookie{width:56vmin;right:-24vmin;top:14vh}
}
@media(max-width:380px){.assist-chip{font-size:.68rem;letter-spacing:.02em}}

/* ===== 動きを減らす設定 ===== */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.js .reveal{opacity:1;transform:none}
}