/* ――― テーマ（デザイン言語）変数定義 ――― */

/* 1. デフォルト */
body.style-default{
--accent-color:#ff8fa3;
--accent-hover:#ffb3c1;
--ui-bg:rgba(22,20,26,.65);
--card-bg:rgba(37,34,41,.75);
--border-color:rgba(255,255,255,.18);
--card-border:rgba(255,255,255,.1);
--radius-main:45px;
--radius-card:30px;
--radius-capsule:9999px;
--font-family:'Helvetica Neue',Arial,sans-serif;
--glow-effect:none;
}

/* 2. Material */
body.style-material{
--accent-color:#d0bcff;
--accent-hover:#e8def8;
--ui-bg:rgba(29,27,32,.88);
--card-bg:rgba(33,29,39,.9);
--border-color:rgba(147,143,153,.2);
--card-border:rgba(147,143,153,.12);
--radius-main:32px;
--radius-card:24px;
--radius-capsule:9999px;
--font-family:'Roboto','Google Sans',sans-serif;
--glow-effect:0 4px 20px rgba(0,0,0,.25);
}

/* 3. LiquidGlass */
body.style-liquidglass{
--accent-color:#007aff;
--accent-hover:#0a84ff;
--ui-bg:rgba(248,248,250,.38);
--card-bg:rgba(255,255,255,.28);
--border-color:rgba(255,255,255,.55);
--card-border:rgba(255,255,255,.42);
--radius-main:30px;
--radius-card:20px;
--radius-capsule:9999px;
--font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;
--glow-effect:0 8px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.55);
--lg-blur:14px;
--lg-saturation:165%;
--lg-brightness:108%;
}

/* LiquidGlass ダーク */
body.style-liquidglass:not(.light-theme){
--ui-bg:rgba(18,18,22,.22);
--card-bg:rgba(20,20,24,.16);
--border-color:rgba(255,255,255,.28);
--card-border:rgba(255,255,255,.22);
}

/* LiquidGlass ライト */
body.style-liquidglass.light-theme{
--ui-bg:rgba(255,255,255,.30);
--card-bg:rgba(255,255,255,.20);
--border-color:rgba(255,255,255,.68);
--card-border:rgba(255,255,255,.48);
}

/* 4. Fluent */
body.style-fluent{
--accent-color:#60cdff;
--accent-hover:#99ebff;
--ui-bg:rgba(32,32,32,.75);
--card-bg:rgba(45,45,45,.8);
--border-color:rgba(255,255,255,.14);
--card-border:rgba(255,255,255,.08);
--radius-main:8px;
--radius-card:6px;
--radius-capsule:9999px;
--font-family:'Segoe UI Variable Text','Segoe UI',sans-serif;
--glow-effect:0 8px 32px rgba(0,0,0,.36);
}

/* 5. VRChat */
body.style-vrchat{
--accent-color:#66c0f4;
--accent-hover:#1fcae6;
--ui-bg:rgba(23,29,37,.88);
--card-bg:rgba(27,40,56,.9);
--border-color:#2a475e;
--card-border:rgba(102,192,244,.3);
--radius-main:24px;
--radius-card:16px;
--radius-capsule:9999px;
--font-family:'Segoe UI',Tahoma,sans-serif;
--glow-effect:0 0 15px rgba(102,192,244,.25);
}

/* 6. Unity */
body.style-unity{
--accent-color:#2c5d88;
--accent-hover:#3a78b0;
--ui-bg:rgba(56,56,56,.95);
--card-bg:rgba(40,40,40,.95);
--border-color:#232323;
--card-border:#1a1a1a;
--radius-main:3px;
--radius-card:3px;
--radius-capsule:4px;
--font-family:Inter,Arial,sans-serif;
--glow-effect:none;
}

/* 全体 */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
width:100%;
height:100%;
overflow:hidden;
background-color:#0f0f12;
color:#e0e0e6;
font-family:var(--font-family);
transition:background-color .4s ease,color .4s ease,font-family .3s ease
}

.snap-container{
width:100vw;
height:100vh;
overflow-y:scroll;
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
position:relative;
z-index:10
}

.snap-section{
width:100vw;
height:100vh;
scroll-snap-align:start;
scroll-snap-stop:always;
position:relative
}

.svg-icon{
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px
}

.svg-icon svg{
width:100%;
height:100%;
fill:currentColor
}

/* ライトテーマ */
body.light-theme{
background-color:#e8e8ee;
color:#2e2e38
}

body.light-theme .floating-status-bar,
body.light-theme .calendar-popup{
background:rgba(235,235,242,.85);
border-color:rgba(0,0,0,.15);
box-shadow:0 8px 32px rgba(0,0,0,.12)
}

body.light-theme .status-bar-indicator{background:rgba(0,0,0,.3)}

body.light-theme .status-capsule{
background:rgba(255,255,255,.85);
border-color:rgba(0,0,0,.08);
color:#2e2e38
}

body.light-theme .status-time,
body.light-theme .calendar-header,
body.light-theme .calendar-day-cell{color:#2e2e38}

body.light-theme .calendar-weekdays span{color:#777}

body.light-theme .calendar-day-cell:hover:not(.empty){background:rgba(0,0,0,.08)}

body.light-theme .content-screen{
background:rgba(244,244,247,.85);
border-color:rgba(255,255,255,.8);
box-shadow:0 16px 40px rgba(0,0,0,.12)
}

body.light-theme .profile-card,
body.light-theme .gallery-section,
body.light-theme .updates-card{
background-color:rgba(255,255,255,.85);
border-color:#e0e0e8
}

body.light-theme .note-article,
body.light-theme .future-action{
background-color:#f0f0f5;
border-color:#dedee7;
color:#2e2e38
}

body.light-theme .note-article-copy time,
body.light-theme .future-action span{color:#707080}

body.light-theme .profile-desc{
background-color:#f0f0f5;
color:#4a4a5a
}

body.light-theme .site-title{
background-color:#eaeaea;
border-color:#ddd;
color:var(--accent-color)
}

a{
color:var(--accent-color);
text-decoration:none;
transition:color .3s
}

a:hover{color:var(--accent-hover)}

/* フローティングバー */
.floating-status-bar{
position:fixed;
top:16px;
left:50%;
transform:translateX(-50%) translateY(0);
width:50vw;
min-width:380px;
max-width:650px;
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 14px;
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-main);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 8px 32px rgba(0,0,0,.45),var(--glow-effect);
z-index:9999;
opacity:1;
pointer-events:auto;
transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s ease,background .3s ease,border-color .3s ease,border-radius .3s ease
}

.floating-status-bar.hidden{
transform:translateX(-50%) translateY(-100px);
opacity:0;
pointer-events:none;
transition:transform .3s cubic-bezier(.6,-.28,.735,.045),opacity .3s ease
}

.status-bar-indicator{
position:fixed;
top:6px;
left:50%;
transform:translateX(-50%);
width:50vw;
min-width:380px;
max-width:650px;
height:3px;
background:rgba(255,255,255,.4);
border-radius:2px;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
z-index:9998;
opacity:0;
pointer-events:none;
transition:opacity .25s ease
}

.status-bar-indicator.visible{opacity:.25}

.status-right-group{
display:flex;
align-items:center;
gap:8px
}

.status-left-group{
display:flex;
align-items:center;
gap:8px
}

.floating-search-toggle .svg-icon svg{
fill:none;
stroke:currentColor
}

.floating-search-toggle.is-active{
background:color-mix(in srgb,var(--accent-color) 22%,rgba(255,255,255,.08));
border-color:var(--accent-color);
color:var(--accent-hover)
}

.floating-search-panel{
position:fixed;
inset:0;
z-index:9998;
display:grid;
padding:96px max(18px,4vw) 28px;
overflow:auto;
place-items:center;
background:rgba(6,7,10,.56);
backdrop-filter:blur(14px) saturate(115%);
-webkit-backdrop-filter:blur(14px) saturate(115%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .24s ease,visibility .24s
}

.floating-search-panel.is-open{
opacity:1;
visibility:visible;
pointer-events:auto
}

.floating-search-surface{
width:min(760px,100%);
max-height:calc(100dvh - 124px);
overflow:auto;
padding:clamp(24px,4vw,38px);
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-main);
box-shadow:0 24px 80px rgba(0,0,0,.48),var(--glow-effect);
transform:translateY(16px) scale(.98);
transition:transform .3s cubic-bezier(.2,.8,.2,1)
}

.floating-search-panel.is-open .floating-search-surface{transform:none}

.floating-search-heading{margin:0 0 24px;text-align:center}
.floating-search-heading>span,.floating-bookmarks-heading>div>span{display:block;margin-bottom:8px;color:var(--accent-color);font:800 .62rem/1 var(--font-family);letter-spacing:.18em}
.floating-search-heading h2{margin:0;color:#f7f7f9;font:720 clamp(1.45rem,3.4vw,2.15rem)/1.15 var(--font-family);letter-spacing:-.035em}

.floating-search-form{display:grid;gap:12px}

.floating-search-box{
display:flex;
align-items:center;
gap:10px;
min-width:0;
height:62px;
padding:6px 7px 6px 18px;
background:rgba(8,8,12,.72);
border:1px solid var(--border-color);
border-radius:var(--radius-capsule,var(--radius-card));
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}

.floating-search-box:focus-within{
border-color:var(--accent-color);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 17%,transparent)
}

.floating-search-engine-icon{
display:block;
width:22px;
height:22px;
flex:0 0 auto;
object-fit:contain
}

.floating-search-box input{
min-width:0;
flex:1;
border:0;
outline:0;
background:transparent;
color:#f5f5f7;
font:600 1rem/1.2 var(--font-family)
}

.floating-search-box input::placeholder{color:#92929a}

.floating-search-box>button{
display:grid;
width:48px;
height:48px;
flex:0 0 auto;
padding:0;
place-items:center;
border:0;
border-radius:50%;
background:var(--accent-color);
color:#111116;
cursor:pointer;
transition:filter .2s ease,transform .15s ease
}

.floating-search-box>button:hover{filter:brightness(1.08);transform:scale(1.04)}
.floating-search-box>button svg{width:20px;height:20px}

.floating-search-options{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 4px
}

.floating-search-options label{display:flex;align-items:center;gap:7px;min-width:0}
.floating-search-options label>span,.floating-search-open-mode{color:#8d8d96;font:650 .62rem/1 var(--font-family);letter-spacing:.03em}

.floating-search-options select{
max-width:145px;
height:28px;
padding:0 25px 0 8px;
border:1px solid var(--border-color);
border-radius:var(--radius-capsule,var(--radius-card));
outline:0;
background:rgba(255,255,255,.07);
color:#e9e9ed;
font:650 .65rem/1 var(--font-family);
cursor:pointer
}

.floating-search-options select option{background:#202027;color:#f5f5f7}

.floating-search-recent{
display:flex;
align-items:center;
gap:6px;
min-width:0;
overflow-x:auto;
padding:1px 4px 3px;
scrollbar-width:none
}

.floating-search-recent::-webkit-scrollbar{display:none}
.floating-search-recent.is-empty{display:none}
.floating-search-recent-label{flex:0 0 auto;color:#777780;font:700 .6rem/1 var(--font-family);letter-spacing:.08em}

.floating-search-recent button{
max-width:150px;
flex:0 0 auto;
overflow:hidden;
padding:7px 10px;
border:1px solid var(--border-color);
border-radius:var(--radius-capsule,var(--radius-card));
background:rgba(255,255,255,.055);
color:#d1d1d7;
font:550 .66rem/1 var(--font-family);
text-overflow:ellipsis;
white-space:nowrap;
cursor:pointer
}

.floating-search-recent button:hover{border-color:var(--accent-color);color:#fff}

.floating-bookmarks{margin-top:30px;padding-top:24px;border-top:1px solid var(--border-color)}

.floating-bookmarks-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.floating-bookmarks-heading h3{margin:0;color:#eeeef2;font:720 1rem/1.2 var(--font-family)}

.floating-bookmark-add{
display:flex;
align-items:center;
gap:6px;
height:34px;
padding:0 12px;
border:1px solid var(--border-color);
border-radius:var(--radius-capsule,var(--radius-card));
background:rgba(255,255,255,.07);
color:#dddde2;
font:650 .68rem/1 var(--font-family);
cursor:pointer
}

.floating-bookmark-add:hover{border-color:var(--accent-color);color:#fff}
.floating-bookmark-add:disabled{opacity:.38;cursor:not-allowed}
.floating-bookmark-add svg{width:14px;height:14px}

.floating-bookmark-editor{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) auto;
align-items:end;
gap:10px;
margin:0 0 18px;
padding:14px;
background:rgba(7,8,11,.45);
border:1px solid var(--border-color);
border-radius:calc(var(--radius-card) * .7)
}

.floating-bookmark-editor[hidden]{display:none}
.floating-bookmark-editor label{display:grid;gap:6px;min-width:0}
.floating-bookmark-editor label>span{color:#8d8d96;font:700 .61rem/1 var(--font-family);letter-spacing:.06em}
.floating-bookmark-editor input{width:100%;min-width:0;height:38px;padding:0 11px;border:1px solid var(--border-color);border-radius:9px;outline:0;background:rgba(255,255,255,.06);color:#f5f5f7;font:550 .72rem/1 var(--font-family)}
.floating-bookmark-editor input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 16%,transparent)}
.floating-bookmark-editor-actions{display:flex;gap:6px}
.floating-bookmark-editor-actions button{height:38px;padding:0 11px;border:1px solid var(--border-color);border-radius:9px;background:rgba(255,255,255,.07);color:#dddde2;font:650 .65rem/1 var(--font-family);cursor:pointer}
.floating-bookmark-editor-actions button[type="submit"]{border-color:color-mix(in srgb,var(--accent-color) 65%,var(--border-color));background:color-mix(in srgb,var(--accent-color) 22%,rgba(255,255,255,.07));color:#fff}
.floating-bookmark-error{grid-column:1/-1;min-height:.8em;margin:0;color:#ff9aaa;font:600 .64rem/1.3 var(--font-family)}

.floating-bookmark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}

.floating-bookmark-item{position:relative;min-width:0}
.floating-bookmark-item>a{display:grid;min-height:116px;padding:15px 11px 12px;place-items:center;text-align:center;background:rgba(255,255,255,.055);border:1px solid var(--border-color);border-radius:calc(var(--radius-card) * .72);color:#e8e8ec;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.floating-bookmark-item>a:hover{background:rgba(255,255,255,.1);border-color:color-mix(in srgb,var(--accent-color) 65%,var(--border-color));color:#fff;transform:translateY(-2px)}
.floating-bookmark-icon{display:grid;width:42px;height:42px;margin-bottom:9px;place-items:center;border:1px solid color-mix(in srgb,var(--accent-color) 44%,var(--border-color));border-radius:13px;background:color-mix(in srgb,var(--accent-color) 13%,rgba(8,8,12,.72));color:var(--accent-hover);font:800 1rem/1 var(--font-family)}
.floating-bookmark-item strong,.floating-bookmark-item small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.floating-bookmark-item strong{font:680 .72rem/1.2 var(--font-family)}
.floating-bookmark-item small{margin-top:5px;color:#85858e;font:550 .58rem/1 var(--font-family)}
.floating-bookmark-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;border:1px solid var(--border-color);border-radius:50%;background:rgba(12,12,16,.86);color:#aaaab2;font:600 .9rem/1 var(--font-family);cursor:pointer;opacity:0;transition:opacity .2s ease,color .2s ease,border-color .2s ease}
.floating-bookmark-item:hover .floating-bookmark-remove,.floating-bookmark-remove:focus-visible{opacity:1}
.floating-bookmark-remove:hover{border-color:#ff7e91;color:#ff9aaa}
.floating-bookmark-empty{margin:22px 0 4px;color:#7f7f88;font:550 .75rem/1.5 var(--font-family);text-align:center}

body.floating-search-open{overflow:hidden}
body.floating-search-open .snap-container{overflow:hidden}

body.light-theme .floating-search-panel{background:rgba(224,224,231,.62)}
body.light-theme .floating-search-surface{background:rgba(245,245,249,.94);border-color:rgba(0,0,0,.13);box-shadow:0 24px 80px rgba(0,0,0,.18)}
body.light-theme .floating-search-heading h2,body.light-theme .floating-bookmarks-heading h3{color:#292930}
body.light-theme .floating-search-box{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.12)}
body.light-theme .floating-search-box input{color:#292930}
body.light-theme .floating-search-options select{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.12);color:#292930}
body.light-theme .floating-search-options select option{background:#fff;color:#292930}
body.light-theme .floating-search-recent button{background:rgba(255,255,255,.58);border-color:rgba(0,0,0,.1);color:#4a4a52}
body.light-theme .floating-bookmark-editor{background:rgba(255,255,255,.48);border-color:rgba(0,0,0,.1)}
body.light-theme .floating-bookmark-editor input{background:#fff;border-color:rgba(0,0,0,.12);color:#292930}
body.light-theme .floating-bookmark-item>a{background:rgba(255,255,255,.58);border-color:rgba(0,0,0,.1);color:#35353c}
body.light-theme .floating-bookmark-remove{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.12);color:#55555d}

.status-capsule{
display:flex;
align-items:center;
justify-content:center;
height:42px;
background:rgba(255,255,255,.08);
border:1px solid var(--border-color);
border-radius:var(--radius-capsule,var(--radius-card));
color:#fff;
font-weight:600;
transition:all .2s ease;
user-select:none
}

.time-capsule{
position:absolute;
left:50%;
transform:translateX(-50%);
width:120px;
height:42px;
cursor:pointer;
font-variant-numeric:tabular-nums
}

.time-capsule:hover{
background:rgba(255,255,255,.16);
border-color:var(--accent-color)
}

.status-time{
font-weight:700;
color:#fff;
letter-spacing:.5px;
font-size:1.2rem
}

/* カレンダー */
.calendar-popup{
position:absolute;
top:calc(100% + 22px);
left:50%;
transform:translateX(-50%) translateY(-10px);
width:220px;
padding:14px;
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-card);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 8px 32px rgba(0,0,0,.45);
display:flex;
flex-direction:column;
gap:8px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .3s ease,transform .3s ease,visibility .3s;
z-index:10000
}

.time-capsule::after{
content:'';
position:absolute;
top:100%;
left:0;
width:100%;
height:25px
}

.time-capsule:hover .calendar-popup{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0)
}

.calendar-header{
font-size:.85rem;
font-weight:800;
color:#fff;
text-align:center;
letter-spacing:1px;
padding-bottom:2px
}

.calendar-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;
font-size:.65rem;
font-weight:700;
color:#aaa
}

.calendar-weekdays .sun{color:#ff6b6b}
.calendar-weekdays .sat{color:#4dabf7}

.calendar-days-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:2px;
text-align:center
}

.calendar-day-cell{
width:26px;
height:26px;
line-height:26px;
font-size:.72rem;
font-weight:600;
color:#e0e0e6;
margin:0 auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background-color .2s,transform .1s
}

.calendar-day-cell:hover:not(.empty){
background:rgba(255,255,255,.18);
transform:scale(1.1)
}

.calendar-day-cell.sun{color:#ff6b6b}
.calendar-day-cell.sat{color:#4dabf7}

.calendar-day-cell.is-today{
background-color:rgba(255,255,255,.2);
border:2px solid var(--accent-color);
color:#fff;
font-weight:800;
box-shadow:var(--glow-effect)
}

/* Toast */
.toast-notification{
position:fixed;
bottom:24px;
right:24px;
background:var(--ui-bg);
border:1px solid var(--accent-color);
color:#fff;
padding:10px 18px;
border-radius:var(--radius-card);
font-size:.85rem;
font-weight:bold;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 4px 16px rgba(0,0,0,.5),var(--glow-effect);
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:opacity .3s ease,transform .3s ease;
z-index:10001
}

.toast-notification.show{
opacity:1;
transform:translateY(0)
}

.icon-btn{
width:42px;
height:42px;
padding:0;
cursor:pointer;
font-family:inherit;
font-size:1rem;
flex-shrink:0;
border-radius:var(--radius-capsule,var(--radius-card))
}

.icon-btn:hover{
background:rgba(255,255,255,.15);
border-color:var(--accent-color);
transform:scale(1.08)
}

.icon-btn:disabled{
opacity:.38;
cursor:not-allowed;
pointer-events:none;
transform:none
}

/* 背景 */
.hero-slider{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:1;
overflow:hidden;
background-color:#000
}

.blur-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
pointer-events:none;
transition:backdrop-filter .1s linear,background-color .1s linear
}

.slides{
position:absolute;
width:100%;
height:100%;
opacity:0;
animation:slideAnimation 52s infinite;
background-size:cover;
background-position:center
}

.slides:nth-child(1){background-image:url('https://i.ibb.co/Pz1wJ961/VRChat-2026-03-18-22-44-46-734-1920x1080.png');animation-delay:0s}
.slides:nth-child(2){background-image:url('https://i.ibb.co/9m91DfG7/VRChat-2026-07-19-17-49-16-440-3840x2160.png');animation-delay:4s}
.slides:nth-child(3){background-image:url('https://i.ibb.co/rRgCdcHk/VRChat-2026-03-18-22-42-04-583-1920x1080.png');animation-delay:8s}
.slides:nth-child(4){background-image:url('https://i.ibb.co/BHDtqs5P/image.png');animation-delay:12s}
.slides:nth-child(5){background-image:url('https://i.ibb.co/rKNH2hb5/VRChat-2026-02-26-23-20-32-426-3840x2160.png');animation-delay:16s}
.slides:nth-child(6){background-image:url('https://i.ibb.co/G47yb8Mq/VRChat-2025-09-26-00-27-26-253-2560x1440.png');animation-delay:20s}
.slides:nth-child(7){background-image:url('https://i.ibb.co/Q74ckwNy/VRChat-2026-07-19-17-45-05-911-3840x2160.png');animation-delay:24s}
.slides:nth-child(8){background-image:url('https://i.ibb.co/WNKSZk1B/VRChat-2026-01-11-03-01-38-442-3840x2160.png');animation-delay:28s}
.slides:nth-child(9){background-image:url('https://i.ibb.co/mn63Zg8/VRChat-2026-01-11-04-04-47-732-3840x2160.png');animation-delay:32s}
.slides:nth-child(10){background-image:url('https://i.ibb.co/0yfGgzsB/VRChat-2026-07-19-17-50-28-540-3840x2160.png');animation-delay:36s}
.slides:nth-child(11){background-image:url('https://i.ibb.co/21nbC1g6/VRChat-2025-10-30-18-13-44-326-2560x1440.png');animation-delay:40s}
.slides:nth-child(12){background-image:url('https://i.ibb.co/x8HqptsV/VRChat-2025-10-04-02-36-04-052-2560x1440.png');animation-delay:44s}
.slides:nth-child(13){background-image:url('https://i.ibb.co/NdTVv68m/VRChat-2026-07-19-17-48-01-748-3840x2160.png');animation-delay:48s}

/* スライドショー左右の情報カード */
:root{
--edge-card-width:min(390px,calc(100vw - 36px));
--wing-tab-width:clamp(36px,calc(48px + 3vw - 5.333vh),64px);
--wing-tab-overlap:32px;
--wing-tab-overlap-half:16px;
--edge-card-inset:18px;
--edge-motion-duration:.42s;
--edge-motion-easing:cubic-bezier(.22,1,.36,1);
--wing-tab-fade-duration:1s
}

.edge-wing-tab{
position:fixed;
top:var(--edge-card-inset);
bottom:var(--edge-card-inset);
z-index:39;
width:calc(var(--wing-tab-width) + var(--wing-tab-overlap));
padding:0;
border:1px solid color-mix(in srgb,var(--border-color) 72%,#000);
background:color-mix(in srgb,var(--ui-bg) 78%,#05070b);
box-shadow:0 18px 55px rgba(0,0,0,.48),inset 0 0 24px rgba(0,0,0,.22);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
cursor:pointer;
will-change:transform;
transition:transform var(--edge-motion-duration) var(--edge-motion-easing),background .25s,border-color .25s,opacity .24s ease-out,visibility 0s
}
.edge-wing-tab-left{left:calc(0px - var(--wing-tab-overlap));border-left:0;border-radius:0 var(--radius-card) var(--radius-card) 0}
.edge-wing-tab-right{right:calc(0px - var(--wing-tab-overlap));border-right:0;border-radius:var(--radius-card) 0 0 var(--radius-card)}
.edge-wing-tab span,.edge-wing-tab span::before,.edge-wing-tab span::after{position:absolute;left:50%;width:4px;height:4px;border-radius:50%;background:var(--accent-color);box-shadow:0 0 8px color-mix(in srgb,var(--accent-color) 70%,transparent);content:""}
.edge-wing-tab span{top:50%;transform:translate(-50%,-50%)}
.edge-wing-tab-left span{left:calc(50% + var(--wing-tab-overlap-half))}
.edge-wing-tab-right span{left:calc(50% - var(--wing-tab-overlap-half))}
.edge-wing-tab span::before{top:-11px;transform:translateX(-50%)}
.edge-wing-tab span::after{top:11px;transform:translateX(-50%)}
.edge-wing-tab:hover{background:color-mix(in srgb,var(--ui-bg) 68%,var(--accent-color));border-color:var(--accent-color)}
.edge-wing-tab-left.is-open{transform:translateX(calc(var(--edge-card-width) + var(--edge-card-inset)))}
.edge-wing-tab-right.is-open{transform:translateX(calc(0px - var(--edge-card-width) - var(--edge-card-inset)))}
body.edge-card-open .edge-wing-tab:not(.is-open),
body.edge-card-closing .edge-wing-tab:not(.is-closing),
body.wing-tabs-idle .edge-wing-tab:not(.is-open):not(.is-closing){
opacity:0;
visibility:hidden;
pointer-events:none;
transition:transform var(--edge-motion-duration) var(--edge-motion-easing),background .25s,border-color .25s,opacity var(--wing-tab-fade-duration) ease,visibility 0s linear var(--wing-tab-fade-duration)
}
body.edge-interactions-disabled .edge-wing-tab{opacity:0;visibility:hidden;pointer-events:none;transition:none}

.edge-card{
position:fixed;
top:var(--edge-card-inset);
bottom:var(--edge-card-inset);
z-index:40;
width:var(--edge-card-width);
max-height:none;
overflow:auto;
padding:34px 28px 28px;
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-card);
box-shadow:0 20px 70px rgba(0,0,0,.55),var(--glow-effect);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
opacity:1;
visibility:hidden;
pointer-events:none;
will-change:transform;
transition:transform var(--edge-motion-duration) var(--edge-motion-easing),visibility 0s linear var(--edge-motion-duration)
}

.edge-card-left{left:var(--edge-card-inset);transform:translateX(calc(-100% - var(--edge-card-inset)))}
.edge-card-right{right:var(--edge-card-inset);transform:translateX(calc(100% + var(--edge-card-inset)))}
.edge-card.is-open{transform:translateX(0);visibility:visible;pointer-events:auto;transition-delay:0s}

.edge-card-close{
display:none;
position:absolute;
top:14px;
width:34px;
height:34px;
border:1px solid var(--card-border);
border-radius:var(--radius-capsule,var(--radius-card));
background:rgba(255,255,255,.08);
color:inherit;
font:700 1.2rem/1 var(--font-family);
cursor:pointer
}

.edge-card-left .edge-card-close{right:14px}
.edge-card-right .edge-card-close{left:14px}
.edge-card-close:hover{border-color:var(--accent-color);color:var(--accent-color)}
.edge-card-kicker{margin-bottom:8px;color:var(--accent-color);font-size:.7rem;font-weight:800;letter-spacing:.16em}
.edge-card h2{font-size:1.45rem;line-height:1.3}
.edge-card-note{margin-top:20px;color:#9d98a5;font-size:.76rem;line-height:1.7}

.device-info-list{display:grid;gap:2px;margin-top:22px}
.device-info-list div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--card-border)}
.device-info-list dt{color:#9994a2;font-size:.78rem}
.device-info-list dd{font-size:.86rem;font-weight:700;overflow-wrap:anywhere}

.edge-link-list{display:grid;gap:10px;margin-top:24px}
.edge-link-list>a,.edge-link-disabled{
display:flex;
flex-direction:column;
gap:6px;
padding:17px 18px;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)*.7);
color:inherit;
font-size:.95rem;
font-weight:800;
transition:transform .2s,border-color .2s,background .2s
}
.edge-link-list>a:hover{transform:translateX(4px);border-color:var(--accent-color);color:var(--accent-color)}
.edge-link-list span span,.edge-link-list>a span{color:#9893a0;font-size:.72rem;font-weight:600}
.edge-link-disabled{opacity:.48}

.edge-card-scrim{
position:fixed;
inset:0;
z-index:35;
background:rgba(0,0,0,.22);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s,visibility .25s
}
.edge-card-scrim.is-visible{opacity:1;visibility:visible;pointer-events:auto}

body.light-theme .edge-card{background:rgba(244,244,247,.9)}
body.light-theme .edge-link-list>a,body.light-theme .edge-link-disabled{background:#f0f0f5}
body.style-liquidglass .edge-card{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.05));border-color:rgba(255,255,255,.38)}
body.style-fluent .edge-card,body.style-fluent .edge-link-list>a,body.style-fluent .edge-link-disabled{border-radius:8px}
body.style-vrchat .edge-card{border-width:2px;box-shadow:0 0 24px rgba(102,192,244,.24)}
body.style-unity .edge-card,body.style-unity .edge-link-list>a,body.style-unity .edge-link-disabled{border-radius:3px;box-shadow:none}

@keyframes slideAnimation{
0%{opacity:0;transform:scale(1)}
8%{opacity:1}
33%{opacity:1}
41%{opacity:0;transform:scale(1.05)}
100%{opacity:0}
}

/* ファーストビュー */
.hero-spacer{
display:flex;
justify-content:center;
align-items:flex-end;
padding-bottom:30px
}

.scroll-indicator{
position:fixed;
left:50%;
bottom:max(30px,env(safe-area-inset-bottom));
z-index:30;
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
padding:9px 16px 7px;
background:color-mix(in srgb,var(--ui-bg) 78%,transparent);
border:1px solid color-mix(in srgb,var(--border-color) 70%,transparent);
border-radius:var(--radius-card);
backdrop-filter:blur(8px);
box-shadow:0 4px 16px rgba(0,0,0,.28);
transition:opacity .4s ease,transform .4s ease;
animation:floatAnimation 3.4s infinite ease-in-out;
opacity:.72;
pointer-events:auto
}

.scroll-indicator:hover{
opacity:1;
border-color:var(--accent-color)
}

.scroll-indicator.hidden{
opacity:0!important;
pointer-events:none!important
}

.scroll-text{
color:#fff;
font-size:.78rem;
font-weight:650;
line-height:1.45;
letter-spacing:.08em;
text-align:center;
text-shadow:0 1px 3px rgba(0,0,0,.55)
}
.scroll-text>span{display:block;color:color-mix(in srgb,currentColor 68%,transparent);font-size:.75rem;font-weight:500;letter-spacing:.04em}
.scroll-text-mobile{display:none}
.scroll-bored-text{display:none;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.scroll-indicator.is-bored .scroll-text,.scroll-indicator.is-bored .scroll-arrow{display:none}
.scroll-indicator.is-bored .scroll-bored-text{display:block}

.scroll-arrow{
color:var(--accent-color);
font-size:.85rem;
animation:arrowBounce 1.5s infinite
}

@keyframes floatAnimation{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-4px)}
}

@keyframes arrowBounce{
0%,100%{transform:translateY(0)}
50%{transform:translateY(5px)}
}

/* コンテンツ */
.content-section-wrapper{
display:flex;
justify-content:center;
align-items:center;
height:auto;
min-height:100vh;
padding:96px 0 72px;
scroll-snap-stop:normal
}

.content-screen{
position:relative;
width:90vw;
max-width:1100px;
padding:40px;
background:var(--ui-bg);
border:1px solid var(--border-color);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-radius:var(--radius-main);
box-shadow:0 16px 40px rgba(0,0,0,.35),var(--glow-effect);
transition:background .4s ease,border-color .4s ease,border-radius .3s ease
}

.content-wrapper{
width:100%;
display:flex;
flex-direction:column;
gap:24px
}

.header-nav{
display:flex;
justify-content:space-between;
align-items:center;
width:100%
}

.site-title{
background-color:rgba(42,37,42,.8);
border:1px solid var(--border-color);
border-radius:var(--radius-card);
padding:10px 20px;
font-size:1.1rem;
color:var(--accent-color);
font-weight:bold;
transition:color .3s ease,border-radius .3s ease
}

.container{
display:flex;
flex-direction:column;
width:100%;
gap:24px
}

.main-content-layout{
display:flex;
gap:24px;
align-items:stretch
}

.profile-card{
width:300px;
background-color:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius-card);
padding:24px;
text-align:center;
box-shadow:0 4px 16px rgba(0,0,0,.2);
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:center;
transition:background-color .3s,border-color .3s,border-radius .3s
}

.avatar-container{
width:90px;
height:90px;
border-radius:var(--radius-card);
margin:0 auto 16px;
overflow:hidden;
border:2px solid var(--accent-color);
flex-shrink:0;
transition:border-color .3s,border-radius .3s
}

.avatar-container img{
width:100%;
height:100%;
object-fit:cover
}

.profile-name{
font-size:1.3rem;
font-weight:bold;
margin-bottom:4px
}

.profile-id{
font-size:.85rem;
color:var(--accent-color);
margin-bottom:16px;
letter-spacing:1px;
transition:color .3s
}

.profile-desc{
background-color:rgba(0,0,0,.3);
border-radius:calc(var(--radius-card)/2);
padding:14px;
font-size:.85rem;
line-height:1.5;
text-align:left;
color:#c0c0c8
}

.profile-more-button{
display:flex;
width:100%;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
padding:11px 13px;
border:1px solid color-mix(in srgb,var(--accent-color) 38%,var(--card-border));
border-radius:calc(var(--radius-card)/2);
background:color-mix(in srgb,var(--card-bg) 90%,#000);
color:inherit;
text-align:left;
cursor:pointer;
transition:border-color .18s ease,background .18s ease,transform .18s ease
}
.profile-more-button>span{display:grid;gap:3px}
.profile-more-button small{color:var(--accent-color);font:800 .58rem/1 var(--font-family);letter-spacing:.13em}
.profile-more-button strong{font:700 .76rem/1.2 var(--font-family)}
.profile-more-button svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--accent-color);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.profile-more-button:hover{border-color:var(--accent-color);background:color-mix(in srgb,var(--card-bg) 78%,var(--accent-color));transform:translateY(-1px)}
.profile-more-button:hover svg{transform:translateX(3px)}
.profile-more-button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
body.light-theme .profile-more-button{background:rgba(238,238,244,.9)}

.gallery-section{
flex-grow:1;
background-color:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius-card);
padding:24px;
box-shadow:0 4px 16px rgba(0,0,0,.2);
display:flex;
flex-direction:column;
justify-content:center;
transition:background-color .3s,border-color .3s,border-radius .3s
}

/* note と今後の拡張 */
.updates-card{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0;
min-height:430px;
margin-top:0;
background-color:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius-card);
box-shadow:0 4px 16px rgba(0,0,0,.2);
overflow:hidden;
transition:background-color .3s,border-color .3s,border-radius .3s
}

.note-panel,
.future-panel{
min-width:0;
padding:24px;
display:flex;
flex-direction:column
}

.future-panel{
border-left:1px solid var(--card-border);
display:flex;
flex-direction:column
}

.updates-heading-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px
}

.note-profile-link{
flex-shrink:0;
padding:8px 12px;
border:1px solid var(--card-border);
border-radius:var(--radius-capsule,var(--radius-card));
font-size:.78rem;
font-weight:700;
background:rgba(255,255,255,.04)
}

.note-profile-link:hover{
border-color:var(--accent-color);
background:rgba(255,255,255,.1)
}

.note-articles{
display:grid;
grid-template-rows:repeat(3,minmax(96px,1fr));
gap:12px;
flex:1
}

.note-article{
display:flex;
min-height:96px;
overflow:hidden;
color:#e8e8ee;
background:rgba(0,0,0,.24);
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/2);
transition:transform .2s,border-color .2s,background-color .2s,border-radius .3s
}

.note-article:hover{
color:#fff;
transform:translateY(-2px);
border-color:var(--accent-color);
background:rgba(0,0,0,.38)
}

.note-article-thumb{
width:124px;
min-height:96px;
object-fit:cover;
background:#17151b
}

.note-article-copy{
min-width:0;
padding:12px 14px;
display:flex;
flex-direction:column;
justify-content:center;
gap:5px
}

.note-article-copy time{
font-size:.72rem;
color:#9994a2;
letter-spacing:.04em
}

.note-article-copy strong{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
font-size:.9rem;
line-height:1.45
}

.note-article-copy>span{
font-size:.76rem;
font-weight:700;
color:var(--accent-color)
}

.future-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-rows:repeat(2,minmax(96px,1fr));
gap:12px;
margin-top:auto;
flex:1
}

.future-action{
min-height:96px;
padding:12px 8px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
font-family:inherit;
font-size:.72rem;
font-weight:800;
letter-spacing:.04em;
color:#aaa6b0;
background:rgba(0,0,0,.2);
border:1px dashed var(--card-border);
border-radius:calc(var(--radius-card)/2);
cursor:not-allowed;
opacity:.72
}

.future-action span{
font-size:1.05rem;
color:var(--accent-color)
}

.section-title{
font-size:1.2rem;
font-weight:bold;
margin-bottom:4px;
display:flex;
align-items:center;
gap:8px
}

.section-title::before{
content:"|";
color:var(--accent-color);
font-weight:bold;
transition:color .3s
}

.section-subtitle{
font-size:.8rem;
color:#888;
margin-bottom:16px
}

.grid-container{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px
}

.grid-item{
background-color:#2d2933;
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/2);
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform .2s,border-color .2s,border-radius .3s;
background-size:cover;
background-position:center;
position:relative;
text-decoration:none
}

.grid-item:hover{
transform:translateY(-2px);
border-color:var(--accent-color)
}

.item-content{
padding:40px 16px;
text-align:center;
font-size:.9rem;
color:#fff;
flex-grow:1;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background-color:rgba(0,0,0,.55);
font-weight:bold;
text-shadow:0 1px 4px rgba(0,0,0,.8)
}

.item-link{
border-top:1px solid var(--card-border);
padding:10px 16px;
font-size:.8rem;
background-color:rgba(0,0,0,.4);
text-align:center;
color:var(--accent-color);
z-index:1;
transition:color .3s
}

.grid-item:hover .item-link{
color:var(--accent-hover);
background-color:rgba(0,0,0,.6)
}

#gallery-twitter{background-image:url('assets/social-x.jpg')}
#gallery-youtube{background-image:url('assets/social-youtube.jpg'),url('assets/social-x.jpg')}
#gallery-booth{background-image:url('assets/social-booth.jpg')}
#gallery-vrchat{background-image:url('assets/social-vrchat.png')}
#gallery-github{background-image:url('assets/social-github.png')}
#gallery-more{
background-image:
radial-gradient(circle at 24% 18%,color-mix(in srgb,var(--accent-color) 52%,transparent),transparent 34%),
linear-gradient(135deg,#27222e,#111116)
}

/* LiquidGlass */
body.style-liquidglass .floating-status-bar,
body.style-liquidglass .calendar-popup,
body.style-liquidglass .floating-search-surface,
body.style-liquidglass .content-screen,
body.style-liquidglass .profile-card,
body.style-liquidglass .gallery-section,
body.style-liquidglass .updates-card,
body.style-liquidglass .site-title,
body.style-liquidglass .scroll-indicator,
body.style-liquidglass .status-capsule{
background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.06));
border-color:rgba(255,255,255,.4);
box-shadow:var(--glow-effect);
-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness));
backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness))
}

body.style-liquidglass .floating-status-bar::before,
body.style-liquidglass .content-screen::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%)
}

body.style-liquidglass .floating-status-bar{border-radius:9999px}

body.style-liquidglass .status-capsule:hover,
body.style-liquidglass .grid-item:hover{
background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.65)
}

body.style-liquidglass .grid-item{
background-color:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.3)
}

body.style-liquidglass .item-content{
background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22))
}

body.style-liquidglass .item-link{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.22)
}

body.style-liquidglass .avatar-container{
border-color:rgba(255,255,255,.62);
box-shadow:0 0 0 4px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.18)
}

/* LiquidGlass ダーク */
body.style-liquidglass:not(.light-theme) .floating-status-bar,
body.style-liquidglass:not(.light-theme) .calendar-popup,
body.style-liquidglass:not(.light-theme) .floating-search-surface,
body.style-liquidglass:not(.light-theme) .content-screen,
body.style-liquidglass:not(.light-theme) .profile-card,
body.style-liquidglass:not(.light-theme) .gallery-section,
body.style-liquidglass:not(.light-theme) .updates-card,
body.style-liquidglass:not(.light-theme) .site-title,
body.style-liquidglass:not(.light-theme) .status-capsule{
background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025));
border-color:rgba(255,255,255,.25);
}

/* LiquidGlass ライト */
body.style-liquidglass.light-theme .floating-status-bar,
body.style-liquidglass.light-theme .calendar-popup,
body.style-liquidglass.light-theme .floating-search-surface,
body.style-liquidglass.light-theme .content-screen,
body.style-liquidglass.light-theme .profile-card,
body.style-liquidglass.light-theme .gallery-section,
body.style-liquidglass.light-theme .updates-card,
body.style-liquidglass.light-theme .site-title,
body.style-liquidglass.light-theme .status-capsule{
background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.10));
border-color:rgba(255,255,255,.62);
}

/* 屈折はコンテンツ全体ではなく外周レイヤーだけ */
body.style-liquidglass .content-screen{
isolation:isolate;
overflow:hidden
}

body.style-liquidglass .content-screen::after{
content:"";
position:absolute;
inset:-3px;
z-index:10;
pointer-events:none;
border-radius:inherit;
background:
radial-gradient(90% 70% at 15% 0%,rgba(255,255,255,.18),transparent 48%),
radial-gradient(70% 90% at 100% 100%,rgba(255,255,255,.08),transparent 55%);
border:1px solid rgba(255,255,255,.22);
mix-blend-mode:screen
}

body.style-liquidglass .content-screen{
box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,1px 0 rgba(255,140,200,.08) inset,-1px 0 rgba(100,180,255,.1) inset,0 25px 80px rgba(0,0,0,.24)
}

/* Fluent Design */
body.style-fluent .floating-status-bar .status-capsule,
body.style-fluent .floating-status-bar .icon-btn,
body.style-fluent .floating-status-bar .time-capsule{
border-radius:8px
}

/* Material */
body.style-material .status-time{
font-weight:800
}

body.style-material .time-capsule{
background:var(--accent-color);
color:#241f2d;
border-color:var(--accent-color)
}

body.style-material .time-capsule .status-time{
color:#241f2d
}

body.style-material:not(.light-theme) .time-capsule{
background:var(--accent-color)
}

body.style-material.light-theme .time-capsule .status-time{
color:#241f2d
}

/* Unity */
body.style-unity{
--accent-color:#477da8;
--accent-hover:#5b94c2;
--glow-effect:none
}

body.style-unity .floating-status-bar,
body.style-unity .content-screen,
body.style-unity .profile-card,
body.style-unity .gallery-section,
body.style-unity .updates-card,
body.style-unity .grid-item,
body.style-unity .site-title{
box-shadow:none
}

/* ライト非対応テーマ */
body.style-vrchat .theme-toggle-disabled,
body.style-unity .theme-toggle-disabled{}

@media(max-width:850px){
.floating-status-bar,.status-bar-indicator{width:80vw}
.content-section-wrapper{padding:88px 0 48px}
.content-screen{width:95vw;padding:20px 12px}
.main-content-layout{flex-direction:column;align-items:center}
.profile-card{width:100%}
.grid-container{grid-template-columns:repeat(2,minmax(0,1fr))}
.updates-card{grid-template-columns:1fr;min-height:0}
.future-panel{border-left:0;border-top:1px solid var(--card-border)}
.future-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(72px,1fr))}
.future-action{min-height:72px;flex-direction:row;align-items:center}
.note-article-thumb{width:104px}
.theme-selector-popup{right:-50px}
}

@media(max-width:520px){
:root{--edge-card-width:min(88vw,390px)}
.floating-status-bar,.status-bar-indicator{width:calc(100vw - 24px);min-width:0}
.floating-status-bar{padding:7px 9px}
.status-left-group,.status-right-group{gap:5px}
.floating-status-bar .icon-btn{width:38px;height:38px}
.floating-status-bar .time-capsule{width:96px;height:38px}
.floating-status-bar .status-time{font-size:1rem}
.floating-search-panel{inset:0;width:auto;min-width:0;padding:76px 8px 8px;place-items:start center}
.floating-search-surface{width:100%;max-height:calc(100dvh - 84px);padding:22px 15px;border-radius:22px}
.floating-search-heading{margin-bottom:18px}
.floating-search-heading h2{font-size:1.42rem}
.floating-search-box{height:52px;padding-left:13px}
.floating-search-box>button{width:40px;height:40px}
.floating-search-options{align-items:flex-start;flex-direction:column;gap:7px}
.floating-search-open-mode{padding-left:2px}
.floating-search-recent button{max-width:124px}
.floating-bookmarks{margin-top:22px;padding-top:18px}
.floating-bookmark-editor{grid-template-columns:1fr}
.floating-bookmark-editor-actions{justify-content:flex-end}
.floating-bookmark-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.floating-bookmark-item>a{min-height:106px;padding:13px 7px 10px}
.floating-bookmark-icon{width:38px;height:38px}
.floating-bookmark-remove{opacity:1}
.floating-status-bar.hidden{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.status-bar-indicator{display:none}
body.edge-card-open .floating-status-bar{transform:translateX(-50%) translateY(-100px)!important;opacity:0!important;pointer-events:none!important}
body.edge-card-open .floating-search-panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.hero-spacer{padding-bottom:max(96px,calc(env(safe-area-inset-bottom) + 72px))}
.content-screen{border-radius:24px}
.note-panel,.future-panel{padding:18px}
.updates-heading-row{align-items:center}
.note-profile-link{padding:7px 9px}
.note-article{min-height:86px}
.note-article-thumb{width:88px;min-height:86px}
.note-article-copy{padding:10px}
.grid-item .item-content{padding:32px 10px}
.edge-card{top:0;bottom:0;width:min(88vw,390px);max-height:none;border-radius:0;padding:78px 22px 24px}
.edge-card-close{display:block}
.edge-card-left{left:0;transform:translateX(-105%)}
.edge-card-right{right:0;transform:translateX(105%)}
.edge-card.is-open{transform:translateX(0)}
.edge-card-close{top:18px}
.edge-wing-tab{display:none!important}
.scroll-text-desktop{display:none}
.scroll-text-mobile{display:block}
.scroll-indicator{max-width:210px;padding:8px 14px 6px}
}

/* 自動生成される記事ページ */
html.article-document{
height:auto;
min-height:100%;
overflow-x:hidden;
overflow-y:auto
}

body.article-page{
height:auto;
min-height:100vh;
overflow:visible;
background:#0f0f12
}

.article-backdrop{
position:fixed;
inset:0;
z-index:0;
background-size:cover;
background-position:center;
filter:blur(18px) brightness(.3);
transform:scale(1.06)
}

.article-shell{
position:relative;
z-index:1;
width:min(920px,calc(100% - 32px));
margin:0 auto;
padding:96px 0 70px
}

.page-floating-bar{z-index:10002}

.article-card{
padding:clamp(24px,5vw,58px);
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-main);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:0 20px 70px rgba(0,0,0,.48),var(--glow-effect)
}

.article-nav{
display:flex;
justify-content:space-between;
gap:16px;
margin-bottom:28px;
font-size:.86rem;
font-weight:700
}

.article-cover{
display:block;
width:100%;
max-height:480px;
object-fit:cover;
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/1.5);
margin-bottom:30px
}

.article-title{
font-size:clamp(1.7rem,4vw,2.65rem);
line-height:1.25;
letter-spacing:-.02em;
margin-bottom:14px
}

.article-meta{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
padding-bottom:26px;
margin-bottom:34px;
border-bottom:1px solid var(--card-border);
color:#a9a5af;
font-size:.86rem
}

.article-body{
font-size:1rem;
line-height:1.95;
overflow-wrap:anywhere
}

.article-body h2,
.article-body h3{
line-height:1.4;
margin:2.2em 0 .8em
}

.article-body h2{
font-size:1.55rem;
padding-left:14px;
border-left:4px solid var(--accent-color)
}

.article-body h3{font-size:1.25rem}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote,.article-body pre,.article-body figure{margin:1.25em 0}
.article-body ul,.article-body ol{padding-left:1.6em}
.article-body img{display:block;max-width:100%;height:auto;margin:1.8em auto;border-radius:12px;border:1px solid var(--card-border)}
.article-body figcaption{margin-top:-1.2em;color:#9994a2;font-size:.8rem;text-align:center}
.article-body pre{overflow-x:auto;background:rgba(0,0,0,.38);border:1px solid var(--card-border);border-radius:12px}
.article-body code{font-family:SFMono-Regular,Consolas,Menlo,Courier,monospace}
.article-body pre code{display:block;padding:20px;white-space:pre}
.article-body blockquote{padding:4px 0 4px 20px;border-left:3px solid var(--card-border);color:#c2bec8}
.article-body iframe{width:100%;max-width:100%;border:0;border-radius:12px}
.article-body table-of-contents{display:none}

.article-embed-card{
display:flex;
flex-direction:column;
gap:6px;
margin:1.6em 0;
padding:18px 20px;
color:#eceaf0;
text-decoration:none!important;
background:rgba(0,0,0,.26);
border:1px solid var(--card-border);
border-radius:12px;
transition:transform .2s,border-color .2s
}

.article-embed-card:hover{
color:#fff;
transform:translateY(-2px);
border-color:var(--accent-color)
}

.article-embed-card strong{line-height:1.5}
.article-embed-card span{font-size:.78rem;color:var(--accent-color)}

.article-footer{
display:flex;
justify-content:center;
padding-top:34px;
margin-top:42px;
border-top:1px solid var(--card-border)
}

.article-footer a{
padding:11px 18px;
border:1px solid var(--accent-color);
border-radius:var(--radius-capsule,var(--radius-card));
font-weight:700
}

@media(max-width:600px){
.article-shell{width:min(100% - 18px,920px);padding:88px 0 28px}
.article-card{padding:22px 18px;border-radius:24px}
.article-nav{font-size:.78rem}
.article-meta{margin-bottom:26px}
}

@media(prefers-reduced-motion:reduce){
body.style-liquidglass .content-screen{filter:none}
}

/* 404 */
body.error-page{
overflow:auto;
min-height:100vh;
background:
radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--accent-color) 22%,transparent),transparent 32rem),
radial-gradient(circle at 80% 85%,rgba(112,80,180,.18),transparent 35rem),
#0f0f12
}

/* 全ページ共通ローディング */
html.site-is-loading,html.site-is-loading body{overflow:hidden!important}

.site-loader{
--loader-progress:0%;
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:#0d0d10;
color:#efedf2;
opacity:1;
visibility:visible;
transition:opacity .38s ease,visibility .38s ease
}

.site-loader-content{
width:min(360px,calc(100vw - 48px));
display:grid;
gap:11px
}

.site-loader-meta{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:24px
}

.site-loader-status{
min-width:0;
overflow:hidden;
color:#9d99a4;
font:600 .74rem/1.4 var(--font-family,'Helvetica Neue',Arial,sans-serif);
letter-spacing:.035em;
text-overflow:ellipsis;
white-space:nowrap
}

.site-loader-percent{
flex-shrink:0;
color:#f7f5f8;
font:700 1rem/1 SFMono-Regular,Consolas,Menlo,monospace;
font-variant-numeric:tabular-nums;
letter-spacing:-.04em
}

.site-loader-progress{
width:100%;
height:2px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.13)
}

.site-loader-progress::after{
content:"";
display:block;
width:var(--loader-progress);
height:100%;
border-radius:inherit;
background:var(--accent-color,#ff8fa3);
transition:width .2s ease
}

.site-loader.is-complete{opacity:0;visibility:hidden;pointer-events:none}

@media(prefers-reduced-motion:reduce){
.site-loader,.site-loader-progress::after{transition:none}
}

body.error-page.light-theme{
background:
radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--accent-color) 22%,transparent),transparent 32rem),
radial-gradient(circle at 80% 85%,rgba(112,80,180,.13),transparent 35rem),
#e8e8ee
}

.error-status-bar{z-index:20}
.error-location{font-size:.72rem;font-weight:800;letter-spacing:.12em;white-space:nowrap}

.error-stage{
position:relative;
display:grid;
place-items:center;
width:100%;
min-height:100vh;
padding:96px 20px 48px
}

.error-stage::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.32;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(to bottom,black,transparent 85%)
}

.error-card{
position:relative;
width:min(760px,100%);
padding:clamp(30px,7vw,72px);
text-align:center;
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-main);
box-shadow:0 24px 90px rgba(0,0,0,.42),var(--glow-effect);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px)
}

.error-code{
display:flex;
justify-content:center;
align-items:center;
gap:.02em;
font-size:clamp(6rem,24vw,12rem);
font-weight:900;
line-height:.82;
letter-spacing:-.07em;
color:var(--accent-color);
font-variant-numeric:tabular-nums
}

.error-zero{
color:#fff
}

.error-card h1{
max-width:590px;
margin:clamp(30px,6vw,52px) auto 0;
font-size:clamp(1.65rem,4.5vw,2.8rem);
line-height:1.3;
letter-spacing:-.035em
}

.error-message{
max-width:570px;
margin:20px auto 0;
font-size:1rem;
line-height:1.9;
color:#b8b4c0
}

body.light-theme .error-message{color:#616170}

.error-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-top:34px
}

.error-primary,.error-secondary{
min-width:170px;
padding:13px 20px;
border:1px solid var(--accent-color);
border-radius:var(--radius-capsule);
font:700 .9rem/1 var(--font-family);
cursor:pointer;
transition:transform .2s,background-color .2s,color .2s
}

.error-primary{background:var(--accent-color);color:#17131b}
.error-primary:hover{background:var(--accent-hover);color:#17131b;transform:translateY(-2px)}
.error-secondary{background:transparent;color:var(--accent-color)}
.error-secondary:hover{background:color-mix(in srgb,var(--accent-color) 12%,transparent);transform:translateY(-2px)}
body.style-material .error-card{box-shadow:0 8px 28px rgba(0,0,0,.3)}
body.style-material .error-primary,body.style-material .error-secondary{text-transform:uppercase;letter-spacing:.06em}
body.style-liquidglass .error-card{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.045));border-color:rgba(255,255,255,.38)}
body.style-fluent .error-card{border-radius:8px;border-top-color:color-mix(in srgb,var(--accent-color) 65%,transparent)}
body.style-fluent .error-primary,body.style-fluent .error-secondary{border-radius:5px}
body.style-vrchat .error-card{border-width:2px;box-shadow:0 0 0 1px rgba(0,0,0,.7),0 0 32px rgba(102,192,244,.2)}
body.style-unity .error-card{border-radius:3px;box-shadow:inset 0 1px #626262,0 16px 55px rgba(0,0,0,.45)}
body.style-unity .error-primary,body.style-unity .error-secondary{border-radius:3px}

@media(max-width:520px){
.error-stage{padding:88px 12px 28px}
.error-card{padding:34px 20px}
.error-status-bar .error-location{display:none}
.error-actions{flex-direction:column}
.error-primary,.error-secondary{width:100%}
}

/* リンク集 */
html.links-document{
height:auto;
min-height:100%;
overflow-x:hidden;
overflow-y:auto
}

body.links-page{
height:auto;
min-height:100vh;
overflow:visible;
background:#101116
}

body.links-page.light-theme{background:#ececf1}

.links-backdrop{
position:fixed;
inset:0;
z-index:0;
background:#101116
}

body.links-page.light-theme .links-backdrop{
background:#ececf1
}

.links-shell{
position:relative;
z-index:1;
width:min(1100px,calc(100% - 32px));
margin:0 auto;
padding:96px 0 56px
}

.links-hero,
.link-directory,
.links-latest{
background:var(--ui-bg);
border:1px solid var(--border-color);
border-radius:var(--radius-main);
box-shadow:0 18px 48px rgba(0,0,0,.22);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px)
}

.links-hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
padding:clamp(24px,4vw,40px)
}

.links-hero h1{
font-size:clamp(2rem,5vw,3.8rem);
line-height:1;
letter-spacing:-.055em
}

.links-home{
flex-shrink:0;
padding:12px 18px;
border:1px solid var(--accent-color);
border-radius:var(--radius-capsule,var(--radius-card));
font-size:.82rem;
font-weight:800
}

.link-directory,
.links-latest{margin-top:20px;padding:clamp(24px,4vw,40px)}

.links-section-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:24px
}

.links-section-heading h2{font-size:clamp(1.35rem,3vw,1.9rem)}
.links-section-heading>p{color:#8f8a96;font-size:.75rem;text-align:right}

.directory-groups{display:grid;gap:28px}
.directory-group{min-width:0}
.directory-group h3{
display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;
color:#c9c6cf;
font-size:.78rem;
font-weight:800;
letter-spacing:.08em
}
.directory-group h3::after{content:"";height:1px;flex:1;background:var(--card-border)}

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

.directory-link{
--brand-color:var(--accent-color);
position:relative;
min-width:0;
min-height:80px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:14px;
padding:14px 16px;
overflow:hidden;
color:#efedf2;
background:rgba(0,0,0,.2);
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/1.6);
transition:transform .22s ease,border-color .22s ease,background-color .22s ease
}

.directory-link:hover{
color:#fff;
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--brand-color) 58%,var(--card-border));
background:rgba(255,255,255,.055)
}

.directory-icon,
.latest-service-mark{
display:grid;
place-items:center;
width:46px;
height:46px;
padding:10px;
border:1px solid rgba(255,255,255,.76);
border-radius:13px;
background:#f7f7f9
}

.directory-icon img,
.latest-service-mark img{display:block;width:100%;height:100%;object-fit:contain}
.directory-copy{min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.directory-copy strong{overflow:hidden;text-overflow:ellipsis;font-size:1rem;white-space:nowrap}
.directory-copy>span{overflow:hidden;text-overflow:ellipsis;color:#9d98a5;font-size:.76rem;white-space:nowrap}
.directory-arrow{color:#77727f;font-size:1.05rem;transition:color .22s ease,transform .22s ease}
.directory-link:hover .directory-arrow{color:var(--brand-color)}
.directory-link:hover .directory-arrow{transform:translate(2px,-2px)}

.brand-x{--brand-color:#f0f0f3}
.brand-youtube{--brand-color:#ff3650}
.brand-vrchat{--brand-color:#5de2ff}
.brand-booth{--brand-color:#ff5c74}
.brand-github{--brand-color:#c8c5d0}
.brand-fanbox{--brand-color:#00aef0}
.brand-mercari{--brand-color:#49a7e8}
.brand-yahoo{--brand-color:#ff4b57}
.brand-meikan{--brand-color:#6fd6df}
.brand-note{--brand-color:#62d5a7}

.latest-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
align-items:stretch
}

.latest-panel{
min-width:0;
display:grid;
grid-template-rows:auto 1fr;
padding:18px;
background:rgba(0,0,0,.16);
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/1.4)
}

.latest-panel-heading,
.latest-panel-heading>div{display:flex;align-items:center}
.latest-panel-heading{justify-content:space-between;gap:16px;margin-bottom:14px}
.latest-panel-heading>div{gap:10px}
.latest-panel-heading h3{font-size:1rem}
.latest-panel-heading>a{font-size:.72rem;font-weight:800}
.latest-service-mark{--brand-color:var(--accent-color);width:34px;height:34px;padding:7px;border-radius:10px}
.latest-service-mark.note-mark{--brand-color:#62d5a7}
.latest-service-mark.youtube-mark{--brand-color:#ff3650}
.latest-service-mark.github-mark{--brand-color:#c8c5d0}
.latest-feed{display:grid;align-content:start;gap:10px}
.latest-feed .note-article,
.youtube-video,
.feed-empty-card{height:124px;min-height:124px}
.latest-feed .note-article-thumb{width:154px;min-height:124px}

.youtube-video{
display:flex;
overflow:hidden;
color:#eeecf1;
background:rgba(0,0,0,.2);
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/2);
transition:transform .2s,border-color .2s,background-color .2s
}

.youtube-video:hover{color:#fff;transform:translateY(-2px);border-color:#ff3650;background:rgba(255,255,255,.05)}
.youtube-video img{width:154px;object-fit:cover;background:#17151b}
.youtube-video-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 14px}
.youtube-video-copy time{color:#9994a2;font-size:.72rem;letter-spacing:.04em}
.youtube-video-copy strong{display:-webkit-box;overflow:hidden;font-size:.9rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.youtube-video-copy span{color:#ff6679;font-size:.76rem;font-weight:700}

.feed-empty-card{
display:flex;
flex-direction:column;
justify-content:center;
gap:6px;
padding:20px;
color:#ddd9e2;
background:rgba(0,0,0,.2);
border:1px dashed color-mix(in srgb,#ff3650 36%,var(--card-border));
border-radius:calc(var(--radius-card)/2)
}

.feed-empty-card:hover{color:#fff;border-color:#ff3650}
.feed-empty-card>span{color:#ff6679;font-size:.62rem;font-weight:850;letter-spacing:.15em}
.feed-empty-card>strong{font-size:1rem}
.feed-empty-card>small{color:#9d98a5;font-size:.75rem}

.github-latest-panel{grid-column:1/-1}
.github-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.github-repository{
min-width:0;
min-height:132px;
display:flex;
flex-direction:column;
gap:7px;
padding:18px;
color:#ebe9ee;
background:rgba(0,0,0,.2);
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)/2);
transition:transform .2s,border-color .2s,background-color .2s
}
.github-repository:hover{color:#fff;transform:translateY(-2px);border-color:var(--accent-color);background:rgba(255,255,255,.05)}
.github-repository-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#9994a2;font-size:.66rem}
.github-repository-meta>span{padding:3px 7px;border:1px solid var(--card-border);border-radius:999px}
.github-repository>strong{overflow:hidden;text-overflow:ellipsis;font-size:.95rem;white-space:nowrap}
.github-repository>span:last-child{display:-webkit-box;overflow:hidden;color:#9d98a5;font-size:.74rem;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}

.links-footer{
display:flex;
justify-content:space-between;
gap:20px;
padding:24px 8px 0;
color:#77727f;
font-size:.68rem;
font-weight:750;
letter-spacing:.12em
}

body.links-page.light-theme .links-hero,
body.links-page.light-theme .link-directory,
body.links-page.light-theme .links-latest{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.88)}
body.links-page.light-theme .directory-link,
body.links-page.light-theme .latest-panel,
body.links-page.light-theme .youtube-video,
body.links-page.light-theme .github-repository{color:#2e2e38;background:rgba(244,244,248,.85);border-color:#dedee7}
body.links-page.light-theme .directory-link:hover,
body.links-page.light-theme .youtube-video:hover,
body.links-page.light-theme .github-repository:hover{color:#17171d;background:#fff}
body.links-page.light-theme .directory-copy>span,
body.links-page.light-theme .feed-empty-card>small,
body.links-page.light-theme .github-repository>span:last-child{color:#66616e}
body.links-page.light-theme .directory-group h3{color:#5f5b66}
body.links-page.light-theme .directory-icon,
body.links-page.light-theme .latest-service-mark{border-color:#e2e2e8;background:#fff}
body.links-page.light-theme .feed-empty-card{color:#302d36;background:rgba(244,244,248,.85)}

body.style-material .directory-link,
body.style-material .latest-panel{box-shadow:0 2px 5px rgba(0,0,0,.18)}
body.style-liquidglass .links-hero,
body.style-liquidglass .link-directory,
body.style-liquidglass .links-latest{background:rgba(25,25,30,.62);border-color:rgba(255,255,255,.28)}
body.style-liquidglass.light-theme .links-hero,
body.style-liquidglass.light-theme .link-directory,
body.style-liquidglass.light-theme .links-latest{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.8)}
body.style-fluent .links-hero,
body.style-fluent .link-directory,
body.style-fluent .links-latest,
body.style-fluent .directory-link,
body.style-fluent .latest-panel{border-radius:8px}
body.style-vrchat .links-hero,
body.style-vrchat .link-directory,
body.style-vrchat .links-latest{border-width:2px;box-shadow:0 0 0 1px rgba(0,0,0,.65)}
body.style-unity .links-hero,
body.style-unity .link-directory,
body.style-unity .links-latest,
body.style-unity .directory-link,
body.style-unity .latest-panel{border-radius:3px;box-shadow:none}

/* サイト内アプリランチャー */
.device-hacked-badge{
display:inline-flex;
align-items:center;
margin-left:4px;
padding:2px 6px;
border:1px solid color-mix(in srgb,var(--accent-color) 58%,transparent);
border-radius:999px;
color:var(--accent-color);
font-size:.62rem;
font-weight:800;
line-height:1.2;
vertical-align:middle
}

.edge-subcard{
padding:20px;
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)*.68);
background:color-mix(in srgb,var(--card-bg) 92%,#000)
}
.edge-subcard+.edge-subcard{margin-top:12px}
.app-launcher{margin:0}
.app-launcher-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.app-launcher-heading>span{color:#8f8a97;font-size:.68rem;font-weight:800;letter-spacing:.12em}
.app-launcher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.app-launcher-item{
position:relative;
display:flex;
aspect-ratio:1;
min-width:0;
flex-direction:column;
align-items:center;
justify-content:center;
gap:9px;
padding:9px;
border:1px solid var(--card-border);
border-radius:calc(var(--radius-card)*.55);
background:color-mix(in srgb,var(--card-bg) 92%,#000);
color:inherit;
font:700 .7rem/1.2 var(--font-family);
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,background .18s ease
}
.app-launcher-item:not(:disabled):hover{transform:translateY(-2px);border-color:var(--accent-color);background:color-mix(in srgb,var(--card-bg) 78%,var(--accent-color))}
.app-launcher-item:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
.app-launcher-icon{
display:flex;
width:42px;
height:42px;
align-items:center;
justify-content:center;
gap:2px;
border:1px solid color-mix(in srgb,var(--accent-color) 62%,transparent);
border-radius:11px;
background:#111218;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
color:var(--accent-color);
font:700 1rem/1 ui-monospace,SFMono-Regular,Consolas,monospace
}
.app-launcher-icon i{align-self:flex-end;margin-bottom:11px;font-style:normal}
.app-launcher-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-launcher-item.is-empty{cursor:default;opacity:.32}
.app-launcher-item.is-empty>span{color:#8f8a97;font:700 .66rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
body.light-theme .app-launcher-item{background:rgba(238,238,244,.92)}
body.light-theme .edge-subcard{background:rgba(238,238,244,.76)}
body.style-material .app-launcher-item{border-radius:12px}
body.style-material .edge-subcard{border-radius:14px;box-shadow:0 2px 7px rgba(0,0,0,.18)}
body.style-liquidglass .app-launcher-item{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
body.style-liquidglass .edge-subcard{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.2)}
body.style-fluent .app-launcher-item{border-radius:6px}
body.style-fluent .edge-subcard{border-radius:8px}
body.style-vrchat .app-launcher-item:not(.is-empty){border-color:color-mix(in srgb,var(--accent-color) 60%,var(--card-border))}
body.style-vrchat .edge-subcard{border-color:color-mix(in srgb,var(--accent-color) 38%,var(--card-border))}
body.style-unity .app-launcher-item{border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.07)}
body.style-unity .edge-subcard{border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.06)}
.device-details{padding-top:20px}

/* スクロールから独立したサイト内デスクトップ */
.desktop-layer{
position:fixed;
inset:0;
z-index:12000;
overflow:hidden;
pointer-events:none;
isolation:isolate
}
body.desktop-app-active .edge-card-scrim{z-index:14000}
body.desktop-app-active .edge-wing-tab{z-index:14001}
body.desktop-app-active .edge-card{z-index:14002}

.app-window{
position:absolute;
display:grid;
grid-template-rows:40px minmax(0,1fr);
min-width:390px;
min-height:280px;
overflow:hidden;
resize:both;
border:1px solid #454650;
border-radius:9px;
background:#0b0c10;
box-shadow:0 24px 80px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04);
color:#f2f2f4;
opacity:.96;
pointer-events:auto;
transform:scale(.985) translateY(5px);
transition:opacity .16s ease,transform .16s ease,box-shadow .16s ease
}
.app-window.is-focused{opacity:1;transform:none;box-shadow:0 28px 90px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--accent-color) 28%,transparent)}
.app-window.is-closing{opacity:0;transform:scale(.97);pointer-events:none}
.app-window.is-minimized{display:none}
.app-window.is-maximized{inset:0 0 48px!important;width:100vw!important;height:calc(100vh - 48px)!important;border-radius:0;resize:none}

.app-window-titlebar{
position:relative;
display:flex;
height:40px;
align-items:center;
justify-content:space-between;
overflow:hidden;
border-bottom:1px solid #35363d;
background:#202127;
user-select:none;
touch-action:none;
cursor:default
}
.app-window-titlebar.is-dragging{cursor:grabbing}
.app-window-identity{display:flex;min-width:0;align-items:center;gap:9px;padding-left:13px}
.app-window-identity strong{overflow:hidden;font:600 .78rem/1 var(--font-family);text-overflow:ellipsis;white-space:nowrap}
.app-window-icon{display:grid;width:21px;height:21px;place-items:center;border-radius:4px;background:#08090c;color:var(--accent-color);font:700 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.app-window-controls{display:flex;height:100%;margin-left:auto}
.app-window-controls button{display:grid;width:46px;height:100%;padding:0;border:0;background:transparent;color:#e8e8eb;place-items:center;font:400 1rem/1 Arial,sans-serif;cursor:pointer}
.app-window-controls button:hover{background:rgba(255,255,255,.1)}
.app-window-controls button[data-window-action="close"]:hover{background:#c42b1c;color:#fff}
.app-window-controls button:focus-visible{outline:2px solid var(--accent-color);outline-offset:-3px}
.app-window-content{min-width:0;min-height:0;overflow:hidden}

html[data-window-system="macos"] .app-window{grid-template-rows:44px minmax(0,1fr);border-color:#414248;border-radius:12px}
html[data-window-system="macos"] .app-window.is-maximized{inset:8px 8px 58px!important;width:calc(100vw - 16px)!important;height:calc(100vh - 66px)!important;border-radius:12px}
html[data-window-system="macos"] .app-window-titlebar{height:44px;justify-content:flex-start;background:linear-gradient(#2d2e33,#25262b)}
html[data-window-system="macos"] .app-window-identity{position:absolute;left:50%;max-width:58%;padding:0;transform:translateX(-50%)}
html[data-window-system="macos"] .app-window-icon{display:none}
html[data-window-system="macos"] .app-window-controls{order:-1;height:auto;margin:0 0 0 14px;gap:8px}
html[data-window-system="macos"] .app-window-controls button{position:relative;width:13px;height:13px;border:1px solid rgba(0,0,0,.26);border-radius:50%}
html[data-window-system="macos"] .app-window-controls button span{opacity:0}
html[data-window-system="macos"] .app-window-controls button[data-window-action="close"]{background:#ff5f57}
html[data-window-system="macos"] .app-window-controls button[data-window-action="minimize"]{background:#febc2e}
html[data-window-system="macos"] .app-window-controls button[data-window-action="maximize"]{background:#28c840}
html[data-window-system="macos"] .app-window-controls:hover button span{opacity:.72;color:#282828;font-size:.58rem;font-weight:900}

.desktop-taskbar{
position:absolute;
left:50%;
bottom:max(8px,env(safe-area-inset-bottom));
z-index:13000;
display:flex;
align-items:center;
max-width:calc(100vw - 24px);
gap:5px;
padding:5px;
border:1px solid rgba(255,255,255,.13);
border-radius:8px;
background:rgba(22,23,28,.94);
box-shadow:0 12px 36px rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transform:translate(-50%,12px);
transition:opacity .18s ease,transform .18s ease
}
.desktop-taskbar.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.desktop-task-home{display:grid;width:32px;height:32px;flex:0 0 auto;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:#0c0d11;color:var(--accent-color);place-items:center;font:850 .75rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer}
.desktop-task-home:hover,.desktop-task-home.is-active{border-color:color-mix(in srgb,var(--accent-color) 58%,transparent);background:color-mix(in srgb,var(--accent-color) 16%,#0c0d11)}
.desktop-task-items{display:flex;min-width:0;align-items:center;gap:3px;overflow-x:auto;scrollbar-width:none}
.desktop-task-items::-webkit-scrollbar{display:none}
.desktop-task-item{display:flex;min-width:0;align-items:center;gap:7px;padding:7px 11px;border:1px solid transparent;border-radius:5px;background:transparent;color:#d9d9de;font:600 .7rem/1 var(--font-family);cursor:pointer}
.desktop-task-item>span{color:var(--accent-color);font:700 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.desktop-task-item>b{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desktop-task-item:hover,.desktop-task-item.is-active{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.08)}
.desktop-task-item.is-minimized{opacity:.58}
.desktop-task-meta{display:flex;flex:0 0 auto;align-items:center;gap:7px;margin-left:2px;padding:0 7px;border-left:1px solid rgba(255,255,255,.1);color:#a9aab2;font:650 .6rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.desktop-window-count{display:grid;min-width:18px;height:18px;padding:0 4px;border:1px solid rgba(255,255,255,.12);border-radius:999px;place-items:center;color:var(--accent-color)}
.desktop-task-meta time{white-space:nowrap}
html[data-window-system="macos"] .desktop-taskbar{bottom:max(10px,env(safe-area-inset-bottom));padding:7px;border-radius:15px;background:rgba(30,30,34,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
html[data-window-system="macos"] .desktop-task-home{width:38px;height:38px;border-radius:9px;background:#090a0d}
html[data-window-system="macos"] .desktop-task-item{width:38px;height:38px;justify-content:center;padding:0;border-radius:9px;background:#090a0d}
html[data-window-system="macos"] .desktop-task-item>b{display:none}
html[data-window-system="macos"] .desktop-task-item>span{font-size:.75rem}
html[data-window-system="macos"] .desktop-task-meta{display:none}
html[data-window-system="macos"] .profile-modal{border-radius:18px}
html[data-window-system="macos"] .profile-modal-header{justify-content:flex-start;background:#292a30}
html[data-window-system="macos"] .profile-modal-header>div{position:absolute;left:50%;max-width:66%;padding:0;transform:translateX(-50%)}
html[data-window-system="macos"] .profile-modal-header>div>span{display:none}
html[data-window-system="macos"] .profile-modal-header button{order:-1;width:44px;margin-left:3px;background:transparent;color:transparent}
html[data-window-system="macos"] .profile-modal-header button::after{content:"";display:block;width:15px;height:15px;border:1px solid rgba(0,0,0,.26);border-radius:50%;background:#ff5f57}

/* Detailed profile */
.profile-app{
min-width:0;
min-height:0;
overflow:auto!important;
padding:22px;
background:#101116;
color:#f2f2f4;
scrollbar-color:#4b4d57 #101116;
scrollbar-width:thin
}
.profile-app:focus{outline:none}
.profile-app-hero{display:flex;align-items:center;gap:17px;padding:3px 3px 20px;border-bottom:1px solid #34353d}
.profile-app-hero img{width:76px;height:76px;flex:0 0 auto;border:2px solid var(--accent-color);border-radius:18px;object-fit:cover}
.profile-app-hero>div{min-width:0;text-align:left}
.profile-app-hero p{margin:0 0 6px;color:var(--accent-color);font:800 .62rem/1 var(--font-family);letter-spacing:.14em}
.profile-app-hero h2{margin:0;color:#fff;font:750 1.45rem/1.18 var(--font-family)}
.profile-app-hero span{display:block;margin-top:5px;color:#9698a2;font:600 .76rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em}
.profile-app-intro{margin:18px 2px;color:#c4c5cc;font:500 .88rem/1.7 var(--font-family)}
.profile-spec-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:13px}
.profile-spec-card{min-width:0;overflow:hidden;border:1px solid #373841;border-radius:10px;background:#17181d}
.profile-spec-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px 13px;border-bottom:1px solid #34353d;background:#1d1e24;text-align:left}
.profile-spec-card>header span{display:block;margin-bottom:5px;color:var(--accent-color);font:800 .58rem/1 var(--font-family);letter-spacing:.13em}
.profile-spec-card>header h3{margin:0;color:#f4f4f6;font:700 1rem/1.2 var(--font-family)}
.profile-spec-card>header b{flex:0 0 auto;padding:5px 7px;border:1px solid #41434d;border-radius:5px;color:#8e909a;font:700 .55rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.profile-spec-card dl{margin:0;padding:5px 14px 9px}
.profile-spec-row{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:baseline;gap:12px;padding:9px 1px;border-bottom:1px solid #292a31;text-align:left}
.profile-spec-row:last-child{border-bottom:0}
.profile-spec-row dt{margin:0;color:#777a85;font:750 .58rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.profile-spec-row dd{min-width:0;margin:0;color:#e2e2e6;font:550 .75rem/1.4 var(--font-family);overflow-wrap:anywhere}

.profile-modal-layer{
position:fixed;
inset:0;
z-index:16000;
display:none;
align-items:center;
justify-content:center;
padding:12px;
background:rgba(3,4,7,.68);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px)
}
.profile-modal-layer.is-open{opacity:1;pointer-events:auto}
.profile-modal{
display:grid;
width:min(100%,520px);
max-height:min(84dvh,720px);
grid-template-rows:48px minmax(0,1fr);
overflow:hidden;
border:1px solid #484a54;
border-radius:16px;
background:#101116;
box-shadow:0 30px 100px rgba(0,0,0,.72);
transform:translateY(12px) scale(.985);
transition:transform .18s ease
}
.profile-modal-layer.is-open .profile-modal{transform:none}
.profile-modal-header{position:relative;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #35363e;background:#202127}
.profile-modal-header>div{display:flex;align-items:center;gap:9px;padding-left:14px}
.profile-modal-header>div>span{display:grid;width:24px;height:24px;place-items:center;border-radius:5px;background:#08090c;color:var(--accent-color);font:800 .58rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.profile-modal-header strong{font:650 .78rem/1 var(--font-family)}
.profile-modal-header button{display:grid;width:50px;height:100%;padding:0;border:0;background:transparent;color:#e8e8eb;place-items:center;font:400 1.2rem/1 Arial,sans-serif;cursor:pointer}
.profile-modal-header button:active{background:#c42b1c;color:#fff}
.profile-modal-header button:focus-visible{outline:2px solid var(--accent-color);outline-offset:-3px}
.profile-modal-body{min-height:0}

/* Terminal */
.terminal-app{display:grid;grid-template-rows:minmax(0,1fr) auto;background:#07080a;color:#e8e8eb;font:400 .875rem/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono","Noto Sans Mono CJK JP",monospace}
.terminal-output{min-width:0;min-height:0;overflow:auto;padding:18px 20px 8px;scrollbar-color:#484a52 #0b0c10;scrollbar-width:thin}
.terminal-line{min-height:1.55em;white-space:pre-wrap;overflow-wrap:anywhere}
.terminal-accent,.terminal-prompt{color:var(--accent-color)}
.terminal-success{color:#7fd893}
.terminal-error{color:#ff7b83}
.terminal-muted{color:#858792}
.terminal-entered-command{margin-top:6px;color:#a6a8b0}
.terminal-entered-command b{color:#fff;font-weight:500}
.terminal-command-line{display:flex;min-width:0;align-items:center;gap:9px;padding:8px 20px 18px;background:#07080a}
.terminal-prompt{flex:0 0 auto;font-weight:700;white-space:nowrap}
.terminal-command-line input{min-width:0;flex:1;padding:2px 0;border:0;outline:0;background:transparent;color:#fff;font:inherit;caret-color:var(--accent-color)}
.terminal-command-line input::selection,.terminal-output ::selection{background:color-mix(in srgb,var(--accent-color) 45%,transparent)}

/* Calculator */
.calculator-app{display:grid;grid-template-rows:auto minmax(0,1fr);gap:15px;padding:18px;background:#101116;color:#f3f3f5}
.calculator-display{display:grid;grid-template-rows:auto minmax(54px,auto) 20px;gap:4px;padding:14px 16px;border:1px solid #303139;border-radius:10px;background:#08090c;text-align:right}
.calculator-display label{color:#858792;font:700 .62rem/1 var(--font-family);letter-spacing:.11em;text-transform:uppercase}
.calculator-display input{min-width:0;width:100%;padding:0;border:0;outline:0;background:transparent;color:#fff;font:400 clamp(1.65rem,5vw,2.35rem)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}
.calculator-display output{overflow:hidden;color:#858792;font:500 .72rem/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}
.calculator-display output.is-error{color:#ff858c}
.calculator-keys{display:grid;min-height:0;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:8px}
.calculator-keys button{min-width:0;min-height:42px;border:1px solid #33343c;border-radius:9px;background:#1d1e24;color:#f2f2f4;font:600 1.05rem/1 var(--font-family);cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .08s ease}
.calculator-keys button:hover{border-color:#52545f;background:#282a31}
.calculator-keys button:active{transform:scale(.96)}
.calculator-keys button.is-utility{background:#272830;color:#d5d5da}
.calculator-keys button.is-operator{color:var(--accent-color);font-size:1.25rem}
.calculator-keys button.is-equals{border-color:color-mix(in srgb,var(--accent-color) 70%,#303139);background:color-mix(in srgb,var(--accent-color) 36%,#17181d);color:#fff}
.calculator-keys button:focus-visible{outline:2px solid var(--accent-color);outline-offset:-3px}

/* Paint */
.paint-app{display:grid;grid-template-rows:auto minmax(0,1fr);background:#17181d;color:#ececf0}
.paint-toolbar{display:flex;min-width:0;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #34353d;background:#222329;overflow-x:auto;scrollbar-width:thin}
.paint-toolbar label{display:flex;flex:0 0 auto;align-items:center;gap:7px;color:#b9bac1;font:600 .7rem/1 var(--font-family)}
.paint-color input{width:34px;height:29px;padding:2px;border:1px solid #484952;border-radius:6px;background:#111216;cursor:pointer}
.paint-size input{width:100px;accent-color:var(--accent-color)}
.paint-size output{width:20px;color:#fff;text-align:right}
.paint-toolbar button,.notepad-toolbar button,.browser-toolbar button{flex:0 0 auto;padding:8px 11px;border:1px solid #44454e;border-radius:6px;background:#292a31;color:#eeeef1;font:600 .7rem/1 var(--font-family);cursor:pointer}
.paint-toolbar button:hover,.notepad-toolbar button:hover,.browser-toolbar button:hover,.paint-toolbar button.is-active{border-color:color-mix(in srgb,var(--accent-color) 72%,#44454e);background:#34363e}
.paint-toolbar button:disabled{opacity:.4;cursor:default}
.paint-toolbar button.is-primary,.notepad-toolbar button,.browser-toolbar button{border-color:color-mix(in srgb,var(--accent-color) 70%,#44454e);background:color-mix(in srgb,var(--accent-color) 28%,#24252b)}
.paint-stage{min-width:0;min-height:0;padding:12px;background:#393a41}
.paint-stage canvas{display:block;width:100%;height:100%;border:1px solid #0b0c0e;background:#fff;box-shadow:0 5px 24px rgba(0,0,0,.28);cursor:crosshair;touch-action:none}
.paint-stage canvas.is-erasing{cursor:cell}
.paint-stage canvas:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}

/* Notepad */
.notepad-app{display:grid;grid-template-rows:auto minmax(0,1fr) 27px;background:#f8f7f3;color:#202126}
.notepad-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid #d5d4cf;background:#ecebe7}
.notepad-toolbar label{display:flex;min-width:0;flex:1;align-items:center;gap:8px;color:#66676d;font:600 .66rem/1 var(--font-family)}
.notepad-toolbar input{min-width:0;flex:1;padding:7px 9px;border:1px solid #c8c7c2;border-radius:5px;outline:0;background:#fff;color:#25262a;font:500 .76rem/1 var(--font-family)}
.notepad-toolbar input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 20%,transparent)}
.notepad-app textarea{width:100%;height:100%;min-width:0;min-height:0;resize:none;padding:22px 24px;border:0;outline:0;background:#fff;color:#202126;font:400 .95rem/1.75 ui-monospace,SFMono-Regular,Consolas,"Noto Sans Mono CJK JP",monospace;tab-size:4}
.notepad-status{display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-top:1px solid #d5d4cf;background:#eeede9;color:#696a70;font:500 .62rem/1 var(--font-family)}

/* Web browser */
.browser-app{display:grid;grid-template-rows:auto minmax(0,1fr);background:#111218;color:#eeeef1}
.browser-toolbar{display:grid;gap:9px;padding:10px 12px;border-bottom:1px solid #33343c;background:#222329}
.browser-search-row{display:flex;min-width:0;align-items:center;gap:9px}
.browser-search-row>span{display:grid;width:26px;height:26px;flex:0 0 auto;place-items:center;color:var(--accent-color);font:700 1.1rem/1 ui-monospace,monospace}
.browser-toolbar input{min-width:0;flex:1;padding:9px 13px;border:1px solid #44454e;border-radius:8px;outline:0;background:#111216;color:#fff;font:500 .8rem/1 var(--font-family)}
.browser-toolbar input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 18%,transparent)}
.browser-search-options{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.browser-search-options label{display:flex;align-items:center;gap:6px;color:#999ba4;font:600 .62rem/1 var(--font-family)}
.browser-search-options select{height:28px;padding:0 28px 0 9px;border:1px solid #44454e;border-radius:6px;outline:0;background:#18191e;color:#eeeef1;font:600 .66rem/1 var(--font-family);cursor:pointer}
.browser-search-options select:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 18%,transparent)}
.browser-start{min-width:0;min-height:0;overflow:auto;padding:clamp(28px,7vh,58px) clamp(22px,7vw,70px);text-align:center}
.browser-mark{display:grid;width:62px;height:62px;margin:0 auto 14px;border:1px solid #393a43;border-radius:18px;background:#18191e;place-items:center}
.browser-mark img{display:block;width:35px;height:35px;object-fit:contain}
.browser-mark[data-engine="mojeek"] img{width:42px;height:30px}
.browser-start h2{margin:0;font:700 1.35rem/1.2 var(--font-family)}
.browser-start>p{margin:8px 0 24px;color:#898b94;font:500 .76rem/1.5 var(--font-family)}
.browser-recent{width:min(560px,100%);margin:34px auto 0;text-align:left}
.browser-recent h3{margin:0 0 10px;color:#858792;font:700 .64rem/1 var(--font-family);letter-spacing:.1em;text-transform:uppercase}
.browser-recent>div{display:flex;flex-wrap:wrap;gap:7px}
.browser-recent button{max-width:100%;overflow:hidden;padding:8px 11px;border:1px solid #35363e;border-radius:999px;background:#1b1c21;color:#d5d5da;font:500 .72rem/1 var(--font-family);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.browser-recent button:hover{border-color:var(--accent-color)}
.browser-recent p{margin:0;color:#686a72;font:500 .72rem/1.4 var(--font-family)}

/* File explorer and virtual files */
.explorer-app{display:grid;grid-template-rows:auto minmax(0,1fr);background:#111218;color:#eeeef1}
.explorer-toolbar{display:flex;min-width:0;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #35363e;background:#202127}
.explorer-nav-buttons{display:flex;flex:0 0 auto;gap:3px}
.explorer-toolbar button{height:32px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#dedee3;font:650 .72rem/1 var(--font-family);cursor:pointer}
.explorer-toolbar button:hover:not(:disabled),.explorer-toolbar button.is-active{border-color:#484a54;background:#2b2c33}
.explorer-toolbar button:disabled{opacity:.3;cursor:default}
.explorer-path-form{display:flex;min-width:120px;flex:1;align-items:center;gap:8px;height:34px;padding-left:10px;border:1px solid #40414a;border-radius:6px;background:#111216}
.explorer-path-form:focus-within{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 18%,transparent)}
.explorer-path-form>span{color:var(--accent-color);font:750 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.explorer-path-form input{min-width:0;flex:1;padding:0;border:0;outline:0;background:transparent;color:#f2f2f4;font:500 .72rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.explorer-path-form button{height:27px;margin-right:3px;padding:0 9px;background:#292a31}
.explorer-hidden-toggle{flex:0 0 auto}
.explorer-body{display:grid;min-width:0;min-height:0;grid-template-columns:158px minmax(0,1fr)}
.explorer-sidebar{display:flex;min-height:0;flex-direction:column;gap:3px;padding:12px 8px;border-right:1px solid #303139;background:#17181d;overflow-y:auto}
.explorer-sidebar button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#c7c8cf;text-align:left;cursor:pointer}
.explorer-sidebar button:hover{border-color:#383a43;background:#222329;color:#fff}
.explorer-sidebar button span{width:18px;color:var(--accent-color);font:750 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center}
.explorer-sidebar button b{font:600 .72rem/1.2 var(--font-family)}
.explorer-view{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) 29px;background:#101116}
.explorer-view>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid #2d2e35}
.explorer-view>header small{display:block;margin-bottom:5px;color:var(--accent-color);font:800 .56rem/1 var(--font-family);letter-spacing:.12em}
.explorer-view>header h2{margin:0;color:#f4f4f6;font:700 1.03rem/1.2 var(--font-family)}
.explorer-location-kind{max-width:54%;overflow:hidden;color:#73757f;font:550 .62rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}
.explorer-grid{display:grid;min-height:0;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));align-content:start;gap:8px;padding:14px 16px;overflow-y:auto;scrollbar-color:#484a52 #101116;scrollbar-width:thin}
.explorer-item{display:grid;min-width:0;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #303139;border-radius:7px;background:#18191e;color:#eeeef1;text-align:left;cursor:pointer}
.explorer-item:hover,.explorer-item:focus-visible{border-color:color-mix(in srgb,var(--accent-color) 62%,#303139);background:#202127;outline:0}
.explorer-item.is-hidden{border-style:dashed;opacity:.72}
.explorer-item-icon{display:grid;width:38px;height:34px;place-items:center;border:1px solid #3a3b44;border-radius:6px;background:#0c0d11;color:var(--accent-color);font:800 .64rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.explorer-item.is-directory .explorer-item-icon{border-color:color-mix(in srgb,var(--accent-color) 42%,#3a3b44);background:color-mix(in srgb,var(--accent-color) 10%,#0c0d11)}
.explorer-item-copy{min-width:0}
.explorer-item-copy strong,.explorer-item-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.explorer-item-copy strong{font:650 .74rem/1.25 var(--font-family)}
.explorer-item-copy small{margin-top:5px;color:#7e8089;font:550 .58rem/1 var(--font-family)}
.explorer-item-open{color:#696b74;font:500 1.1rem/1 var(--font-family)}
.explorer-view>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;border-top:1px solid #2d2e35;background:#17181d;color:#777983;font:550 .58rem/1 var(--font-family)}
.explorer-count{color:#b3b4bb}
.explorer-folder-empty{grid-column:1/-1;margin:30px auto;color:#747680;font:600 .75rem/1.4 var(--font-family)}
.explorer-empty{display:flex;grid-column:1/-1;min-height:230px;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.explorer-empty>span{display:grid;width:48px;height:48px;margin-bottom:12px;border:1px solid #3b3c45;border-radius:10px;background:#18191e;color:var(--accent-color);place-items:center;font:800 1rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.explorer-empty strong{font:700 .92rem/1.3 var(--font-family)}
.explorer-empty p{margin:7px 0 14px;color:#7f818a;font:500 .72rem/1.5 var(--font-family)}
.explorer-empty button{padding:9px 13px;border:1px solid color-mix(in srgb,var(--accent-color) 58%,#3b3c45);border-radius:6px;background:color-mix(in srgb,var(--accent-color) 16%,#18191e);color:#fff;font:650 .7rem/1 var(--font-family);cursor:pointer}
.file-viewer-app{min-width:0;min-height:0;overflow:auto!important;padding:20px;background:#0b0c10;color:#e5e5e9;outline:0}
.file-viewer-app pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .84rem/1.72 ui-monospace,SFMono-Regular,Consolas,"Noto Sans Mono CJK JP",monospace}
.terminal-app.terminal-matrix{box-shadow:inset 0 0 80px color-mix(in srgb,var(--accent-color) 13%,transparent)}
.terminal-app.terminal-matrix .terminal-line{letter-spacing:.04em;text-shadow:0 0 9px currentColor}

html[data-window-system="macos"] .explorer-toolbar{background:#292a30}
html[data-window-system="macos"] .explorer-path-form{border-radius:8px;background:#18191e}
html[data-window-system="macos"] .explorer-sidebar{background:#1d1e23}

@media(max-width:640px){
.desktop-layer{inset:0;overflow:hidden;background:transparent}
body.desktop-app-active .desktop-layer{background:#07080a}
.profile-modal-layer{display:flex}
body.profile-modal-open .floating-status-bar{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.profile-modal-open .floating-search-panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.profile-modal-body.profile-app{padding:14px}
.profile-app-hero{gap:13px;padding-bottom:15px}
.profile-app-hero img{width:62px;height:62px;border-radius:15px}
.profile-app-hero h2{font-size:1.15rem}
.profile-app-intro{margin:14px 1px;font-size:.82rem}
.profile-spec-grid{grid-template-columns:1fr;gap:10px}
.profile-spec-card>header{padding:13px 14px 11px}
.profile-spec-card dl{padding:4px 12px 7px}
.profile-spec-row{grid-template-columns:72px minmax(0,1fr);padding:8px 1px}
.app-window,.app-window.is-maximized,html[data-window-system="macos"] .app-window,html[data-window-system="macos"] .app-window.is-maximized{
inset:0 0 50px!important;
width:100vw!important;
height:calc(100dvh - 50px)!important;
min-width:0;
min-height:0;
border:0;
border-radius:0;
resize:none;
transform:none
}
.app-window:not(.is-focused){visibility:hidden}
.app-window-titlebar,html[data-window-system="macos"] .app-window-titlebar{height:48px}
.app-window{grid-template-rows:48px minmax(0,1fr)}
html[data-window-system="macos"] .app-window{grid-template-rows:48px minmax(0,1fr)}
.app-window-controls button[data-window-action="minimize"],.app-window-controls button[data-window-action="maximize"]{display:none}
.app-window-controls button{width:50px}
html[data-window-system="macos"] .app-window-controls button[data-window-action="close"]{display:grid;width:15px;height:15px}
.desktop-taskbar,html[data-window-system="macos"] .desktop-taskbar{right:0;bottom:0;left:0;width:100%;max-width:none;height:50px;justify-content:flex-start;overflow:hidden;padding:6px 8px;border-width:1px 0 0;border-radius:0;background:#17181d;transform:translateY(10px)}
.desktop-taskbar.is-visible{transform:none}
.desktop-task-home,html[data-window-system="macos"] .desktop-task-home{width:36px;height:36px;border-radius:7px}
.desktop-task-items{flex:1;justify-content:flex-start;overflow-x:auto}
.desktop-task-item,html[data-window-system="macos"] .desktop-task-item{width:auto;height:36px;padding:0 12px;border-radius:7px;background:#0c0d10}
html[data-window-system="macos"] .desktop-task-item>b{display:block}
.desktop-task-meta{padding:0 3px 0 7px}
.desktop-window-count{display:none}
html[data-window-system="macos"] .desktop-task-meta{display:flex}
html[data-window-system="macos"] .app-window-controls button[data-window-action="close"]{width:44px;height:44px;border:0;background:transparent}
html[data-window-system="macos"] .app-window-controls button[data-window-action="close"] span{display:block;width:15px;height:15px;border:1px solid rgba(0,0,0,.26);border-radius:50%;background:#ff5f57;color:transparent;opacity:1}
.terminal-output{padding:15px 14px 6px}
.terminal-command-line{padding:8px 14px calc(14px + env(safe-area-inset-bottom))}
.terminal-app{font-size:.875rem}
.calculator-app{padding:12px;gap:10px}
.calculator-display{padding:10px 13px}
.calculator-keys{gap:6px}
.calculator-keys button{min-height:38px}
.paint-toolbar{padding:7px 8px}
.paint-size input{width:72px}
.paint-stage{padding:7px}
.notepad-app textarea{padding:18px 16px}
.browser-toolbar{padding:8px}
.browser-search-options{display:grid;grid-template-columns:1fr 1fr}
.browser-search-options label{min-width:0;align-items:stretch;flex-direction:column}
.browser-search-options select{width:100%}
.browser-start{padding:28px 16px}
.explorer-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);padding:7px 8px}
.explorer-path-form{min-width:0}
.explorer-hidden-toggle{display:none}
.explorer-body{grid-template-columns:1fr}
.explorer-sidebar{display:none}
.explorer-view>header{padding:13px 14px 10px}
.explorer-grid{grid-template-columns:1fr;gap:7px;padding:10px}
.explorer-view>footer>span:last-child{display:none}
.explorer-item{padding:9px}
.file-viewer-app{padding:16px}
body.desktop-app-active .floating-status-bar{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.desktop-app-active .floating-search-panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}

@media(prefers-reduced-motion:reduce){
.app-window,.desktop-taskbar,.app-launcher-item,.calculator-keys button,.profile-more-button,.profile-more-button svg,.profile-modal-layer,.profile-modal,.explorer-item,.floating-search-panel{transition:none}
}

@media(max-width:760px){
.links-shell{width:min(100% - 20px,1100px);padding:88px 0 32px}
.links-hero{align-items:flex-start;flex-direction:column}
.links-home{align-self:stretch;text-align:center}
.directory-grid,.latest-grid{grid-template-columns:1fr}
.github-feed{grid-template-columns:1fr}
.links-section-heading{align-items:flex-start;flex-direction:column;gap:8px}
.links-section-heading>p{text-align:left}
.links-footer{align-items:flex-start;flex-direction:column}
}

@media(max-width:430px){
.links-shell{width:calc(100% - 14px)}
.links-hero,.link-directory,.links-latest{border-radius:24px}
.links-hero{padding:24px 22px}
.link-directory,.links-latest{padding:20px 14px}
.directory-groups{gap:24px}
.directory-link{gap:11px;min-height:74px;padding:12px}
.directory-icon{width:44px;height:44px;padding:9px;border-radius:12px}
.directory-copy strong,.directory-copy>span{max-width:100%}
.latest-feed .note-article,.youtube-video,.feed-empty-card{height:112px;min-height:112px}
.latest-feed .note-article-thumb,.youtube-video img{width:112px;min-height:112px}
.latest-panel{padding:12px}
.latest-panel-heading{align-items:center}
}

/* デフォルトテーマ：フラットプレビュー
   境界線を使わず、面の明度差と余白で情報を分ける。 */
body.style-default{
--ui-bg:rgba(22,20,26,.65);
--card-bg:rgba(37,34,41,.75);
--border-color:transparent;
--card-border:transparent;
--radius-main:22px;
--radius-card:15px;
--glow-effect:none;
}

body.style-default .floating-status-bar,
body.style-default .calendar-popup,
body.style-default .floating-search-surface,
body.style-default .content-screen,
body.style-default .profile-card,
body.style-default .gallery-section,
body.style-default .updates-card,
body.style-default .site-title,
body.style-default .scroll-indicator,
body.style-default .edge-wing-tab,
body.style-default .edge-card,
body.style-default .links-hero,
body.style-default .link-directory,
body.style-default .links-latest,
body.style-default .latest-panel,
body.style-default .app-window,
body.style-default .desktop-taskbar{
border:0;
}

body.style-default .floating-status-bar{box-shadow:0 8px 32px rgba(0,0,0,.45)}
body.style-default .floating-status-bar{border-radius:34px}
body.style-default .calendar-popup{box-shadow:0 8px 32px rgba(0,0,0,.45)}
body.style-default .floating-search-surface{box-shadow:0 24px 80px rgba(0,0,0,.48)}
body.style-default .content-screen{box-shadow:0 16px 40px rgba(0,0,0,.35)}
body.style-default .profile-card,
body.style-default .gallery-section,
body.style-default .updates-card{box-shadow:0 4px 16px rgba(0,0,0,.2)}
body.style-default .scroll-indicator{box-shadow:0 4px 16px rgba(0,0,0,.28)}
body.style-default .edge-wing-tab{box-shadow:0 18px 55px rgba(0,0,0,.48),inset 0 0 24px rgba(0,0,0,.22)}
body.style-default .edge-card{box-shadow:0 20px 70px rgba(0,0,0,.55)}
body.style-default .links-hero,
body.style-default .link-directory,
body.style-default .links-latest{box-shadow:0 18px 48px rgba(0,0,0,.22)}

body.style-default .floating-status-bar,
body.style-default .edge-wing-tab,
body.style-default .desktop-taskbar{background:var(--ui-bg)}
body.style-default .content-screen,
body.style-default .edge-card,
body.style-default .links-hero,
body.style-default .link-directory,
body.style-default .links-latest{background:var(--ui-bg)}
body.style-default .profile-card,
body.style-default .gallery-section,
body.style-default .updates-card,
body.style-default .latest-panel{background:var(--card-bg)}

body.style-default .status-capsule,
body.style-default .profile-desc,
body.style-default .profile-more-button,
body.style-default .note-article,
body.style-default .future-action,
body.style-default .grid-item,
body.style-default .edge-link-list>a,
body.style-default .edge-link-disabled,
body.style-default .directory-link,
body.style-default .latest-feed .youtube-video,
body.style-default .latest-feed .github-repository,
body.style-default .floating-search-box,
body.style-default .floating-bookmark-item>a,
body.style-default .app-launcher-item,
body.style-default .edge-subcard{
border:0;
}

body.style-default .status-capsule{background:rgba(255,255,255,.08)}
body.style-default .profile-desc{background:rgba(0,0,0,.3)}
body.style-default .profile-more-button{background:color-mix(in srgb,var(--card-bg) 90%,#000)}
body.style-default .note-article,
body.style-default .future-action,
body.style-default .grid-item,
body.style-default .directory-link,
body.style-default .latest-feed .youtube-video,
body.style-default .latest-feed .github-repository,
body.style-default .edge-link-list>a,
body.style-default .edge-link-disabled,
body.style-default .floating-bookmark-item>a,
body.style-default .app-launcher-item,
body.style-default .edge-subcard{background:color-mix(in srgb,var(--card-bg) 92%,#000)}
body.style-default .note-article{background:rgba(0,0,0,.24)}
body.style-default .future-action{background:rgba(0,0,0,.2)}
body.style-default .grid-item{background:#2d2933}
body.style-default .directory-link,
body.style-default .latest-feed .youtube-video,
body.style-default .latest-feed .github-repository{background:rgba(0,0,0,.2)}
body.style-default .edge-link-list>a,
body.style-default .edge-link-disabled{background:var(--card-bg)}
body.style-default .floating-bookmark-item>a{background:rgba(255,255,255,.055)}
body.style-default .app-launcher-item{background:color-mix(in srgb,var(--card-bg) 92%,#000)}

/* リンクカードは持ち上げず、奥行きとカーソル位置で反応させる */
/* 親グリッドの透視投影は各カードの原点をずらして見せるため使わない */
body.style-default .grid-container{perspective:none}
body.style-default .grid-item{
transform:perspective(900px) translateZ(0) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(var(--card-scale,1));
transform-origin:center;
transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .2s,border-radius .3s;
will-change:transform
}
body.style-default .grid-item:hover{
transform:perspective(900px) translateZ(14px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(1.035)
}
body.style-default .grid-item .item-link,
body.style-default .grid-item:hover .item-link{background:#181a1f}

body.style-default .item-link,
body.style-default .future-panel,
body.style-default .floating-bookmarks,
body.style-default .profile-app-hero,
body.style-default .profile-modal-header,
body.style-default .profile-spec-card>header,
body.style-default .profile-spec-row,
body.style-default .paint-toolbar,
body.style-default .browser-toolbar,
body.style-default .explorer-toolbar,
body.style-default .explorer-sidebar,
body.style-default .explorer-view>header,
body.style-default .explorer-view>footer,
body.style-default .notepad-toolbar,
body.style-default .notepad-status{
border-color:transparent;
}

body.style-default .item-link{background:#181a1f}
body.style-default .grid-item:hover,
body.style-default .note-article:hover,
body.style-default .profile-more-button:hover,
body.style-default .directory-link:hover,
body.style-default .latest-feed .youtube-video:hover,
body.style-default .latest-feed .github-repository:hover,
body.style-default .app-launcher-item:not(:disabled):hover{
background:#2b2f37;
border-color:transparent;
}

body.style-default .avatar-container,
body.style-default .profile-app-hero img,
body.style-default .floating-bookmark-icon,
body.style-default .app-launcher-icon,
body.style-default .directory-icon,
body.style-default .latest-service-mark,
body.style-default .browser-mark,
body.style-default .explorer-item-icon{
border:0;
}

body.style-default .floating-search-surface{background:var(--ui-bg)}
body.style-default .floating-search-box{background:rgba(8,8,12,.72)}
body.style-default .floating-bookmark-editor{background:rgba(7,8,11,.45)}
body.style-default .floating-bookmark-item>a{background:rgba(255,255,255,.055)}
body.style-default .floating-search-box>button{background:var(--accent-color)}

body.style-default.light-theme,
body.style-default.light-theme .floating-status-bar,
body.style-default.light-theme .desktop-taskbar{background:rgba(235,235,242,.85)}
body.style-default.light-theme .content-screen,
body.style-default.light-theme .edge-card,
body.style-default.light-theme .links-hero,
body.style-default.light-theme .link-directory,
body.style-default.light-theme .links-latest{background:rgba(244,244,247,.85)}
body.style-default.light-theme .profile-card,
body.style-default.light-theme .gallery-section,
body.style-default.light-theme .updates-card,
body.style-default.light-theme .latest-panel{background:rgba(255,255,255,.85)}
body.style-default.light-theme .status-capsule{background:rgba(255,255,255,.85)}
body.style-default.light-theme .profile-desc,
body.style-default.light-theme .profile-more-button,
body.style-default.light-theme .note-article,
body.style-default.light-theme .future-action,
body.style-default.light-theme .grid-item,
body.style-default.light-theme .directory-link,
body.style-default.light-theme .latest-feed .youtube-video,
body.style-default.light-theme .latest-feed .github-repository,
body.style-default.light-theme .edge-link-list>a,
body.style-default.light-theme .edge-link-disabled,
body.style-default.light-theme .floating-bookmark-item>a,
body.style-default.light-theme .app-launcher-item{background:rgba(240,240,245,.88)}
body.style-default.light-theme .item-link{background:rgba(234,234,238,.88)}
body.style-default.light-theme .floating-status-bar{box-shadow:0 8px 32px rgba(0,0,0,.12)}
body.style-default.light-theme .floating-search-surface{box-shadow:0 24px 80px rgba(0,0,0,.18)}
body.style-default.light-theme .content-screen{box-shadow:0 16px 40px rgba(0,0,0,.12)}
body.style-default.light-theme .profile-card,
body.style-default.light-theme .gallery-section,
body.style-default.light-theme .updates-card{box-shadow:0 4px 16px rgba(0,0,0,.08)}

/* テーマ切り替えはターミナルからのみ行う */
#uiStyleToggleBtn,
#pageStyleToggle{display:none!important}

/* クリックできるカードは中心を基点に手前へ寄り、端で大きく傾く */
body.style-default .card-hover-target{
transform-box:border-box;
transform-style:preserve-3d;
transform-origin:center center;
transform:perspective(900px) translate3d(0,0,0) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(var(--card-scale,1));
transition:transform .34s cubic-bezier(.2,.82,.2,1),background-color .2s,border-color .2s,border-radius .3s;
will-change:transform
}
body.style-default .card-hover-target:focus-visible{
transform:perspective(900px) translate3d(0,0,22px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(1.06)
}
@media (hover:hover) and (pointer:fine){
body.style-default .card-hover-target:hover{
transform:perspective(900px) translate3d(0,0,22px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(1.06)
}
}

/* テーマ切り替えの共通モーション */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after{
transition-duration:.36s!important;
transition-timing-function:cubic-bezier(.2,.7,.2,1)!important
}

.scroll-indicator,
.profile-app,
.profile-app-hero,
.profile-spec-card,
.profile-spec-card>header,
.profile-spec-row,
.terminal-app,
.terminal-output,
.terminal-command-line,
.calculator-app,
.calculator-display,
.calculator-keys button,
.paint-app,
.paint-toolbar,
.paint-toolbar button,
.paint-stage,
.browser-app,
.browser-toolbar,
.browser-toolbar input,
.browser-toolbar select,
.browser-start,
.browser-recent button,
.explorer-app,
.explorer-toolbar,
.explorer-sidebar,
.explorer-sidebar button,
.explorer-view,
.explorer-view>header,
.explorer-item,
.explorer-view>footer,
.file-viewer-app,
.profile-modal,
.profile-modal-header,
.article-card,
.article-embed-card{
transition:background-color .36s ease,color .36s ease,border-color .36s ease,box-shadow .36s ease,filter .36s ease
}
.calculator-keys button{transition:background-color .36s ease,color .36s ease,border-color .36s ease,box-shadow .36s ease,transform .08s ease}
.scroll-indicator{transition:opacity .4s ease,transform .4s ease,background-color .36s ease,border-color .36s ease,box-shadow .36s ease}

/* アプリウィンドウの出現・最小化・最大化 */
.app-window{
transition:opacity .24s ease,transform .28s cubic-bezier(.2,.82,.2,1),box-shadow .28s ease,background-color .36s ease,color .36s ease,border-color .36s ease,top .3s cubic-bezier(.2,.82,.2,1),right .3s cubic-bezier(.2,.82,.2,1),bottom .3s cubic-bezier(.2,.82,.2,1),left .3s cubic-bezier(.2,.82,.2,1),inset .3s cubic-bezier(.2,.82,.2,1),width .3s cubic-bezier(.2,.82,.2,1),height .3s cubic-bezier(.2,.82,.2,1),border-radius .3s ease
}
.app-window.is-minimized{
display:grid;
opacity:0;
visibility:visible;
pointer-events:none;
transform:scale(.94) translateY(12px)
}
.app-window.is-closing{opacity:0;visibility:visible;transform:scale(.94) translateY(10px);pointer-events:none}
.app-window.is-focused.is-opening{opacity:.96;transform:scale(.985) translateY(5px)}
.app-window-titlebar,
.app-window-content,
.desktop-taskbar,
.desktop-task-home,
.desktop-task-item,
.desktop-task-meta{
transition:background-color .36s ease,color .36s ease,border-color .36s ease,box-shadow .36s ease,opacity .24s ease,transform .24s ease
}

/* スマホではアプリもプロフィールと同じポップアップ表示 */
@media(max-width:640px){
body.desktop-app-active .desktop-layer{
pointer-events:auto;
background:rgba(3,4,7,.68);
transition:background .24s ease,backdrop-filter .24s ease;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px)
}
body.desktop-app-closing .desktop-layer{
pointer-events:auto;
background:rgba(3,4,7,.68);
transition:background .24s ease,backdrop-filter .24s ease;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px)
}
body.desktop-app-active .app-window,
body.desktop-app-active .app-window.is-maximized,
body.desktop-app-closing .app-window,
body.desktop-app-closing .app-window.is-maximized,
html[data-window-system="macos"] body.desktop-app-active .app-window,
html[data-window-system="macos"] body.desktop-app-active .app-window.is-maximized,
html[data-window-system="macos"] body.desktop-app-closing .app-window,
html[data-window-system="macos"] body.desktop-app-closing .app-window.is-maximized{
inset:auto!important;
top:50%!important;
left:50%!important;
right:auto!important;
bottom:auto!important;
width:min(calc(100vw - 24px),560px)!important;
height:min(calc(100dvh - 118px),720px)!important;
max-height:calc(100dvh - 96px);
border:1px solid rgba(255,255,255,.16);
border-radius:18px;
opacity:0;
visibility:hidden;
transform:translate(-50%,-46%) scale(.94);
transition:opacity .22s ease,transform .28s cubic-bezier(.2,.82,.2,1),box-shadow .28s ease,background-color .36s ease,color .36s ease,border-color .36s ease
}
body.desktop-app-active .app-window.is-focused,
body.desktop-app-closing .app-window.is-focused{
opacity:1;
visibility:visible;
transform:translate(-50%,-50%) scale(1)
}
body.desktop-app-active .app-window.is-focused.is-opening,
body.desktop-app-closing .app-window.is-focused.is-opening{
opacity:0;
visibility:visible;
transform:translate(-50%,-46%) scale(.94)
}
body.desktop-app-active .app-window.is-minimized,
body.desktop-app-closing .app-window.is-minimized{
display:grid;
opacity:0;
visibility:visible;
transform:translate(-50%,-44%) scale(.92)
}
body.desktop-app-active .app-window.is-closing,
body.desktop-app-closing .app-window.is-closing{
opacity:0;
visibility:visible;
transform:translate(-50%,-44%) scale(.94)
}
body.desktop-app-active .app-window-titlebar,
body.desktop-app-closing .app-window-titlebar,
html[data-window-system="macos"] body.desktop-app-active .app-window-titlebar,
html[data-window-system="macos"] body.desktop-app-closing .app-window-titlebar{height:48px}
}

/* ライトモードでも同じ情報量とコントラストを保つ */
body.light-theme .scroll-indicator{
background:rgba(255,255,255,.84);
border-color:rgba(0,0,0,.09);
box-shadow:0 5px 18px rgba(40,40,55,.14)
}
body.light-theme .scroll-text,
body.light-theme .scroll-bored-text{color:#3c3c48;text-shadow:none}
body.light-theme .scroll-text>span{color:#6c6c78}
body.light-theme .edge-wing-tab{
background:rgba(238,238,245,.9);
border-color:rgba(0,0,0,.1);
box-shadow:0 14px 38px rgba(38,38,55,.18),inset 0 0 18px rgba(255,255,255,.52)
}
body.light-theme .edge-wing-tab:hover{background:#fff;border-color:var(--accent-color)}
body.light-theme .edge-card-scrim{background:rgba(45,45,60,.14)}
body.style-default.light-theme .edge-card{background:rgba(244,244,247,.92);color:#2e2e38}
body.style-default.light-theme .edge-subcard{background:rgba(255,255,255,.74)}
body.style-default.light-theme .edge-link-list>a,
body.style-default.light-theme .edge-link-disabled{background:#f0f0f5;color:#2e2e38}
body.style-default.light-theme .edge-card-note{color:#6e6e79}
body.style-default.light-theme .item-content{background:rgba(255,255,255,.3);color:#2e2e38;text-shadow:0 1px 3px rgba(255,255,255,.55)}
body.style-default.light-theme .grid-item:hover,
body.style-default.light-theme .note-article:hover,
body.style-default.light-theme .directory-link:hover,
body.style-default.light-theme .latest-feed .youtube-video:hover,
body.style-default.light-theme .latest-feed .github-repository:hover,
body.style-default.light-theme .app-launcher-item:not(:disabled):hover{background:#fff;color:#2e2e38}
body.style-default.light-theme .note-article-copy strong{color:#2e2e38}

/* ライトモードのアプリウィンドウ */
body.light-theme .app-window{
background:#f7f7fa;
border-color:#d7d7e0;
box-shadow:0 24px 70px rgba(40,40,55,.2),0 0 0 1px rgba(0,0,0,.03);
color:#2e2e38
}
body.light-theme .app-window-titlebar{background:#ececf1;border-color:#d9d9e2;color:#2e2e38}
body.light-theme .app-window-icon{background:#fff;color:var(--accent-color)}
body.light-theme .app-window-controls button{color:#4a4a55}
body.light-theme .app-window-controls button:hover{background:rgba(0,0,0,.07)}
body.light-theme .desktop-taskbar{background:rgba(247,247,251,.94);border-color:rgba(0,0,0,.1);box-shadow:0 12px 36px rgba(40,40,55,.18)}
body.light-theme .desktop-task-home{background:#fff;border-color:rgba(0,0,0,.1);color:var(--accent-color)}
body.light-theme .desktop-task-item{color:#454550}
body.light-theme .desktop-task-item:hover,
body.light-theme .desktop-task-item.is-active{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.1)}
body.light-theme .desktop-task-meta{border-color:rgba(0,0,0,.1);color:#666673}
body.light-theme .desktop-window-count{border-color:rgba(0,0,0,.12)}
body.light-theme .profile-app{background:#f7f7fa;color:#2e2e38;scrollbar-color:#b9bac4 #f7f7fa}
body.light-theme .profile-app-hero{border-color:#dcdce5}
body.light-theme .profile-app-hero h2{color:#282831}
body.light-theme .profile-app-hero span{color:#6d6e78}
body.light-theme .profile-app-intro{color:#5e5f6b}
body.light-theme .profile-spec-card{border-color:#d9d9e2;background:#fff}
body.light-theme .profile-spec-card>header{border-color:#dddde6;background:#f0f0f4}
body.light-theme .profile-spec-card>header h3{color:#2d2d36}
body.light-theme .profile-spec-card>header b{border-color:#d0d0da;color:#70717b}
body.light-theme .profile-spec-row{border-color:#e4e4ea}
body.light-theme .profile-spec-row dt{color:#777883}
body.light-theme .profile-spec-row dd{color:#373741}
body.light-theme .terminal-app,
body.light-theme .terminal-output{background:#f5f5f8;color:#30303a;scrollbar-color:#b8b9c3 #f5f5f8}
body.light-theme .terminal-command-line{background:#ececf1}
body.light-theme .terminal-command-line input{color:#2b2b34}
body.light-theme .terminal-entered-command b{color:#33333d}
body.light-theme .terminal-muted{color:#73747f}
body.light-theme .calculator-app{background:#f3f3f7;color:#30303a}
body.light-theme .calculator-display{border-color:#d7d7e0;background:#fff}
body.light-theme .calculator-display input{color:#2d2d36}
body.light-theme .calculator-display output{color:#747580}
body.light-theme .calculator-keys button{border-color:#d8d8e0;background:#fff;color:#373740}
body.light-theme .calculator-keys button:hover{border-color:#b9bac6;background:#f0f0f4}
body.light-theme .calculator-keys button.is-utility{background:#ececf1;color:#50515b}
body.light-theme .calculator-keys button.is-equals{color:#fff}
body.light-theme .paint-app{background:#f4f4f7;color:#30303a}
body.light-theme .paint-toolbar{border-color:#dadbe3;background:#ececf1}
body.light-theme .paint-toolbar label{color:#62636e}
body.light-theme .paint-toolbar button{border-color:#cfd0d9;background:#fff;color:#3a3a44}
body.light-theme .paint-toolbar button:hover,
body.light-theme .paint-toolbar button.is-active{background:#e6e6ec}
body.light-theme .paint-stage{background:#dfe0e7}
body.light-theme .browser-app,
body.light-theme .explorer-app{background:#f5f5f8;color:#30303a}
body.light-theme .browser-toolbar,
body.light-theme .explorer-toolbar{border-color:#d9dae2;background:#ececf1}
body.light-theme .browser-toolbar input,
body.light-theme .browser-toolbar select,
body.light-theme .explorer-path-form{border-color:#cfd0d9;background:#fff;color:#30303a}
body.light-theme .browser-start>p,
body.light-theme .browser-recent h3{color:#777883}
body.light-theme .browser-mark{border-color:#d9dae2;background:#fff}
body.light-theme .browser-recent button{border-color:#d5d6df;background:#fff;color:#4a4a55}
body.light-theme .explorer-sidebar{border-color:#d9dae2;background:#eeeff3}
body.light-theme .explorer-sidebar button{color:#555661}
body.light-theme .explorer-sidebar button:hover{border-color:#d1d2db;background:#e4e5eb;color:#2e2e38}
body.light-theme .explorer-view{background:#f7f7fa}
body.light-theme .explorer-view>header{border-color:#dedee6}
body.light-theme .explorer-view>header h2{color:#30303a}
body.light-theme .explorer-grid{scrollbar-color:#b9bac4 #f7f7fa}
body.light-theme .explorer-item{border-color:#d7d8e0;background:#fff;color:#363640}
body.light-theme .explorer-item:hover,
body.light-theme .explorer-item:focus-visible{border-color:#bfc0ca;background:#f0f0f4}
body.light-theme .explorer-item-icon{border-color:#d1d2dc;background:#f0f0f4}
body.light-theme .explorer-view>footer{border-color:#dedee6;background:#eeeff3;color:#777883}
body.light-theme .file-viewer-app{background:#f6f6f9;color:#34343e}

/* スマホプロフィールポップアップと同じ明るいオーバーレイ */
body.light-theme .profile-modal-layer{background:rgba(236,236,243,.68)}
body.light-theme .profile-modal{background:#f7f7fa;border-color:#d7d7e0;box-shadow:0 30px 90px rgba(40,40,55,.22);color:#2e2e38}
body.light-theme .profile-modal-header{border-color:#d9d9e2;background:#ececf1}
body.light-theme .profile-modal-header button{color:#4a4a55}

/* 記事ページもライトモードでは本文と埋め込みカードを明るくする */
body.light-theme.article-page{background:#e8e8ee;color:#2e2e38}
body.light-theme .article-backdrop{filter:blur(18px) brightness(1.05) saturate(.72);opacity:.42}
body.light-theme .article-card{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.08);box-shadow:0 20px 70px rgba(40,40,55,.16);color:#2e2e38}
body.light-theme .article-meta{border-color:#dedee6;color:#6c6d78}
body.light-theme .article-body blockquote{border-color:#c9cad4;color:#5d5e69}
body.light-theme .article-body pre{background:#f0f0f4;border-color:#d9dae2;color:#34343e}
body.light-theme .article-body figcaption{color:#777883}
body.light-theme .article-embed-card{background:#f2f2f6;border-color:#d7d8e0;color:#34343e}
body.light-theme .article-embed-card:hover{background:#fff;color:#2e2e38}

@media(prefers-reduced-motion:reduce){
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after{transition-duration:0s!important}
}

/* ライトモードの基底トークン
   個別コンポーネントの暗色を一つずつ上書きするのではなく、
   テーマの基準色を差し替えてページ全体へ伝播させる。 */
body.style-default{
--theme-page-bg:#0f0f12;
--theme-surface:rgba(22,20,26,.65);
--theme-surface-strong:rgba(37,34,41,.75);
--theme-surface-soft:rgba(42,37,42,.8);
--theme-control:rgba(255,255,255,.08);
--theme-control-hover:rgba(255,255,255,.14);
--theme-text:#e0e0e6;
--theme-muted:#9994a2;
--theme-subtle:#888;
--theme-border:rgba(255,255,255,.18);
--theme-card-border:rgba(255,255,255,.1);
--theme-code-bg:rgba(0,0,0,.38);
--theme-overlay-rgb:0,0,0
}

body.light-theme{
--theme-page-bg:#e8e8ee;
--theme-surface:rgba(247,247,251,.9);
--theme-surface-strong:rgba(255,255,255,.92);
--theme-surface-soft:rgba(240,240,245,.9);
--theme-control:rgba(255,255,255,.72);
--theme-control-hover:rgba(255,255,255,.96);
--theme-text:#2e2e38;
--theme-muted:#6c6d78;
--theme-subtle:#777883;
--theme-border:rgba(38,38,52,.14);
--theme-card-border:rgba(38,38,52,.1);
--theme-code-bg:#f0f0f4;
--theme-overlay-rgb:255,255,255;
--ui-bg:var(--theme-surface);
--card-bg:var(--theme-surface-strong);
--border-color:var(--theme-border);
--card-border:var(--theme-card-border)
}

body.light-theme,
body.light-theme .hero-slider,
body.light-theme .links-backdrop{
background-color:var(--theme-page-bg);
color:var(--theme-text)
}
body.light-theme .hero-slider{background-image:none}
body.light-theme .blur-overlay{background-color:rgba(var(--theme-overlay-rgb),0)}
body.theme-transitioning .hero-slider{transition:background-color .36s ease}

body.light-theme .floating-status-bar,
body.light-theme .calendar-popup,
body.light-theme .content-screen,
body.light-theme .profile-card,
body.light-theme .gallery-section,
body.light-theme .updates-card,
body.light-theme .links-hero,
body.light-theme .link-directory,
body.light-theme .links-latest,
body.light-theme .error-card,
body.light-theme .article-card{
color:var(--theme-text)
}
body.light-theme .site-title,
body.light-theme .profile-desc,
body.light-theme .note-profile-link,
body.light-theme .note-article,
body.light-theme .future-action,
body.light-theme .grid-item,
body.light-theme .item-link,
body.light-theme .directory-link,
body.light-theme .latest-panel,
body.light-theme .youtube-video,
body.light-theme .github-repository,
body.light-theme .edge-link-list>a,
body.light-theme .edge-link-disabled,
body.light-theme .app-launcher-item{
color:var(--theme-text)
}

body.light-theme .profile-desc{background:var(--theme-surface-soft);border-color:var(--theme-card-border)}
body.light-theme .note-profile-link{background:var(--theme-control);border-color:var(--theme-card-border)}
body.light-theme .note-profile-link:hover{background:var(--theme-control-hover)}
body.light-theme .note-article,
body.light-theme .future-action,
body.light-theme .directory-link,
body.light-theme .latest-panel,
body.light-theme .youtube-video,
body.light-theme .github-repository,
body.light-theme .edge-link-list>a,
body.light-theme .edge-link-disabled,
body.light-theme .app-launcher-item{background:var(--theme-surface-soft);border-color:var(--theme-card-border)}
body.light-theme .item-link{background:rgba(234,234,238,.9);border-color:var(--theme-card-border)}
body.light-theme .item-content{background:rgba(255,255,255,.3);color:var(--theme-text);text-shadow:0 1px 3px rgba(255,255,255,.62)}
body.light-theme .note-article-copy time,
body.light-theme .section-subtitle,
body.light-theme .edge-card-note,
body.light-theme .directory-copy>span,
body.light-theme .directory-group h3,
body.light-theme .latest-feed .youtube-video-copy time,
body.light-theme .github-repository-meta,
body.light-theme .github-repository>span:last-child{color:var(--theme-muted)}
body.light-theme .future-action span,
body.light-theme .note-article-copy>span,
body.light-theme .youtube-video-copy span{color:var(--accent-color)}
body.light-theme .grid-item:hover,
body.light-theme .note-article:hover,
body.light-theme .directory-link:hover,
body.light-theme .youtube-video:hover,
body.light-theme .github-repository:hover,
body.light-theme .app-launcher-item:not(:disabled):hover{background:var(--theme-control-hover);color:var(--theme-text)}

/* ライトモードの共通部品 */
body.light-theme .error-card{background:var(--theme-surface);border-color:var(--theme-border);box-shadow:0 24px 90px rgba(40,40,55,.16),var(--glow-effect)}
body.light-theme .error-message{color:var(--theme-muted)}
body.light-theme .error-stage::before{background-image:linear-gradient(rgba(40,40,55,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(40,40,55,.08) 1px,transparent 1px)}
body.light-theme .site-loader{background:var(--theme-page-bg);color:var(--theme-text)}
body.light-theme .site-loader-status{color:var(--theme-muted)}
body.light-theme .site-loader-percent{color:var(--theme-text)}
body.light-theme .site-loader-progress{background:rgba(40,40,55,.12)}
body.light-theme .article-body pre{background:var(--theme-code-bg);color:var(--theme-text)}
body.light-theme .article-body blockquote{color:var(--theme-muted)}
body.light-theme .article-body figcaption{color:var(--theme-muted)}
body.light-theme .article-embed-card{background:var(--theme-surface-soft);border-color:var(--theme-card-border);color:var(--theme-text)}
body.light-theme .article-embed-card:hover{background:var(--theme-control-hover);color:var(--theme-text)}

/* ライトモードのサイト内アプリ内部 */
body.light-theme .app-launcher-icon{background:var(--theme-surface-strong);border-color:color-mix(in srgb,var(--accent-color) 50%,var(--theme-card-border));box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
body.light-theme .app-launcher-heading>span,
body.light-theme .app-launcher-item.is-empty>span{color:var(--theme-muted)}
body.light-theme .notepad-app{background:#fbfbfd;color:var(--theme-text)}
body.light-theme .notepad-toolbar{background:#f0f0f4;border-color:#d9d9e2}
body.light-theme .notepad-toolbar label{color:var(--theme-muted)}
body.light-theme .notepad-toolbar input{background:#fff;border-color:#cfd0d9;color:var(--theme-text)}
body.light-theme .notepad-toolbar button{background:var(--theme-surface-strong);border-color:#cfd0d9;color:var(--theme-text)}
body.light-theme .notepad-app textarea{background:#fff;color:var(--theme-text)}
body.light-theme .notepad-status{background:#f0f0f4;border-color:#d9d9e2;color:var(--theme-muted)}
body.light-theme .paint-color input{background:#fff;border-color:#cfd0d9}
body.light-theme .paint-size output{color:var(--theme-text)}
body.light-theme .paint-toolbar button,
body.light-theme .browser-toolbar button,
body.light-theme .explorer-toolbar button{background:var(--theme-surface-strong);border-color:#cfd0d9;color:var(--theme-text)}
body.light-theme .paint-toolbar button:hover,
body.light-theme .browser-toolbar button:hover,
body.light-theme .explorer-toolbar button:hover:not(:disabled),
body.light-theme .paint-toolbar button.is-active{background:var(--theme-control-hover);border-color:#b9bac6}
body.light-theme .terminal-success{color:#227a3d}
body.light-theme .terminal-error{color:#ba303b}
body.light-theme .terminal-entered-command{color:#5d5e69}
body.light-theme .terminal-entered-command b{color:var(--theme-text)}
body.light-theme .calculator-display label,
body.light-theme .calculator-display output{color:var(--theme-muted)}
body.light-theme .calculator-display output.is-error{color:#ba303b}
body.light-theme .calculator-keys button.is-operator{color:var(--accent-color)}
body.light-theme .browser-search-options label,
body.light-theme .browser-start>p,
body.light-theme .browser-recent h3,
body.light-theme .browser-recent p{color:var(--theme-muted)}
body.light-theme .explorer-toolbar button,
body.light-theme .explorer-sidebar button{color:var(--theme-muted)}
body.light-theme .explorer-sidebar button:hover{color:var(--theme-text)}
body.light-theme .explorer-location-kind,
body.light-theme .explorer-item-copy small,
body.light-theme .explorer-item-open,
body.light-theme .explorer-folder-empty{color:var(--theme-muted)}
body.light-theme .explorer-count{color:var(--theme-text)}

@media(prefers-reduced-motion:reduce){
body.light-theme .blur-overlay{transition:none}
}