/* 白天主题(B20,默认)。视觉对标 cuberto.com:纯白底、黑字、黑色胶囊按钮、大圆角面板。
   字体、字重、字距一律跟夜晚同一套(world.css 的 --serif/--sans/--mono),这里不碰字 —— Victor 2026-10-21「字体统一」。
   版面、横滑、ENTER、声音跟夜晚主题共用(world.css / world.js),这里只换外观。全部挂在 html.day 底下,拿掉 class 就回到夜晚。
   2026-10-21 实测 cuberto:body #fff / #000 · 按钮全圆角黑底白字 · 服务卡 #f2f2f2 大圆角 · 作品段黑色圆角面板 */
html.day{
  --d-bg:#fff; --d-ink:#000; --d-text:#1d1d1f; --d-dim:#6e6e73; --d-card:#f2f2f2; --d-line:rgba(0,0,0,.1);
  --d-r:24px;
  --cream:var(--d-ink); --body:var(--d-text); --dim:var(--d-dim); --line:var(--d-line); --panel:var(--d-card);
  --code:#8e8e93;
  --maple-l:var(--d-ink);   /* 强调色白天一律黑白(Victor 2026-10-21) */
}
html.day body{background:var(--d-bg);color:var(--d-text)}
html.day body,html.day .theme,html.day .nav,html.day .journey,html.day .route,html.day .mute,html.day .wa{transition:background-color .6s ease,color .6s ease,border-color .6s ease}
html.day .world{display:none}
html.day .cl{color:var(--code);text-shadow:none}

/* ENTER:白底,字标居中,黑色胶囊。按下去一块黑幕从底下扫上来盖满、再往上走掉,露出首页(照 cuberto 换页那道幕)。白天不画夜景镜头 */
html.day #gate{background:transparent}
html.day #gate::before{content:"";position:absolute;inset:0;background:var(--d-bg)}
html.day #gate::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:#000;transform:translateY(105%)}
html.day #gate canvas{display:none}
html.day #gate.go::before{animation:d-gate-bg 1.6s linear forwards}
html.day #gate.go::after{animation:d-curtain 1.6s cubic-bezier(.76,0,.24,1) forwards}
@keyframes d-gate-bg{0%,40%{opacity:1}41%,100%{opacity:0}}
@keyframes d-curtain{0%{transform:translateY(105%);border-radius:50% 50% 0 0/90px 90px 0 0}
  38%{transform:translateY(0);border-radius:0}55%{transform:translateY(0);border-radius:0}
  100%{transform:translateY(-105%);border-radius:0 0 50% 50%/0 0 90px 90px}}
html.day #gate.out{opacity:1}
html.day .gate__w{color:var(--d-ink)}
html.day .gate__w i{color:var(--d-dim)}
html.day .gate__logo{filter:drop-shadow(0 0 16px rgba(76,168,184,.55))}   /* 跟夜晚 ENTER 同一道月光青光晕(Victor 2026-10-23) */
html.day .gate__t{color:var(--d-dim)}
html.day #enter{border-color:rgba(76,168,184,.7);background:var(--d-ink);color:#fff;
  text-shadow:0 0 8px rgba(232,241,243,.35);box-shadow:0 0 16px rgba(76,168,184,.45),0 0 36px rgba(76,168,184,.22),inset 0 0 12px rgba(76,168,184,.18);
  transition:transform .4s var(--out),background .3s}
html.day #enter:hover{transform:scale(1.04);background:#222}

/* 导航、路程、静音、主题开关 */
html.day .nav{background:linear-gradient(var(--d-bg) 55%,rgba(255,255,255,0))}
html.day .brand{color:var(--d-ink)}
html.day .brand i{color:var(--d-dim)}
html.day .nav nav a{color:var(--d-text)}
html.day .nav nav a:hover,html.day .nav nav a.on{color:var(--d-ink);text-decoration:underline;text-underline-offset:6px}
html.day .route{color:var(--d-dim)}
html.day .route b{color:var(--d-ink)}
html.day .route .bar{background:var(--d-line)}
html.day .route .bar i{background:var(--d-ink)}
html.day .route .bar s{background:rgba(0,0,0,.28)}
html.day .mute{background:#fff;border-color:var(--d-line)}
html.day .mute:hover{border-color:var(--d-ink)}
html.day .mute .spk{fill:var(--d-ink)}
html.day .mute .w,html.day .mute .sl{stroke:var(--d-ink)}

/* 太阳/月亮开关(两个主题都有):胶囊里一颗圆钮,停在目前的主题上 */
.nav{gap:24px}
.nav nav{margin-left:auto}
.theme{position:relative;flex:none;width:64px;height:32px;padding:0 7px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;cursor:pointer;
  background:rgba(4,10,14,.55);border:1px solid rgba(232,224,212,.28)}
.theme svg{position:relative;z-index:2;width:16px;height:16px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round}
.theme .moon{fill:var(--cream);stroke:none}
.theme i{position:absolute;z-index:1;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:rgba(232,224,212,.18);transform:translateX(32px);transition:transform .5s var(--out),background .5s}
html.day .theme{background:var(--d-card);border-color:var(--d-line)}
html.day .theme svg{stroke:var(--d-ink)}
html.day .theme .moon{fill:var(--d-dim)}
html.day .theme .sun{stroke:#fff}
html.day .theme i{transform:none;background:var(--d-ink)}
.theme:focus-visible{outline:2px solid var(--maple-l);outline-offset:3px}

/* 共用字:标题一律无衬线 500、略收字距;小标签用灰色小字 */
html.day .sec-k{color:var(--d-dim)}
html.day .sec-k.fx::after{left:0;transform:none;background:var(--d-ink);box-shadow:none;height:1px;opacity:.35}
html.day .sec-k.fx.on::after{width:100%}
html.day .hero h1,html.day .lead h1,html.day .p-intro h2,html.day .diag h2,html.day .ovb h2,html.day .morph{color:var(--d-ink)}
html.day .p-intro p,html.day .hero .sub{color:var(--d-text)}
html.day .glass{border-color:transparent!important;box-shadow:none}
html.day .glass::before{display:none}
html.day .glass:hover{box-shadow:none}

/* 首页第一屏:输入框是灰色胶囊,三张样板是大圆角卡 */
html.day .try-box{background:var(--d-card);border:0;border-radius:999px;overflow:hidden;box-shadow:none}
html.day .biz,html.day .ind{text-shadow:none}
html.day .try-box:focus-within{box-shadow:0 0 0 2px var(--d-ink)}
html.day .biz{color:var(--d-ink);padding:16px 12px}
@media (max-width:880px){html.day .biz{padding:14px 10px}}
html.day .biz::placeholder{color:var(--d-ink)}
html.day .ind{color:var(--d-ink);border-left-color:var(--d-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E")}
html.day .frame{border:0;border-radius:24px;background:var(--d-card);box-shadow:0 0 0 1px var(--d-line)}  /* 白底样板放在白底页上,留一圈细线看得出边 */
html.day .frame.live{box-shadow:0 0 0 2px var(--d-ink)}
html.day .pick{border:0;margin-top:14px;padding:0 2px;color:var(--d-dim)}
html.day .pick b{color:var(--d-ink)}
html.day .pick:hover{color:var(--d-ink)}

/* 圆角只用三档:胶囊 999 · 卡片 24 · 大面板 48(手机 32)。
   作品:一整块黑色圆角面板(照 cuberto「Selected work」),里面字转白 */
html.day .work:not(.in-svc){align-self:center;gap:12vw;height:calc(100% - 196px);margin:96px 32px 100px;padding:0 6vw;border-radius:48px;background:#000;color:#fff}
html.day .work:not(.in-svc) .p-intro h2,html.day .work:not(.in-svc) .w-card h3{color:#fff}
html.day .work:not(.in-svc) .p-intro p,html.day .work:not(.in-svc) .w-card p,html.day .work:not(.in-svc) .w-card .meta span{color:rgba(255,255,255,.62)}
html.day .w-open{border:0;border-radius:24px;background:#1c1c1e;box-shadow:0 0 0 1px var(--d-line)}  /* 白底作品截图放在白底页上,跟样板框一样留一圈细线 */

/* 服务:跟夜晚同一个设计 —— 不加框,顶上一条细线、编号、图标、标题,底下一条往下淡出的竖线;只换成白底的黑灰 */
html.day .sign{border-top-color:var(--d-line)}
html.day .svc-it::after{background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,0))}
html.day .sign .n{color:var(--d-dim)}
html.day .sign .t{color:var(--d-ink)}
html.day .sign .d{color:var(--d-text)}
html.day .sign:hover,html.day .sign:focus-visible{border-color:var(--d-ink)}
html.day .sign:hover .t,html.day .sign:focus-visible .t{color:var(--d-ink)}
html.day .sign .ic{height:clamp(104px,13vh,140px);max-width:80%;margin:0 0 18px -6px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.14))}
html:not(.day) .ic-d{display:none}
html.day .ic-n{display:none}
html.day .ic-d{display:block}

/* 最后一段:黑色圆角面板,白色胶囊按钮(照 cuberto 结尾那块) */
html.day .diag .box{background:#000;color:#fff;border:0;border-radius:48px;padding:clamp(40px,5vw,80px) clamp(28px,6vw,110px)}
html.day .diag h2{color:#fff}
html.day .diag p,html.day .diag small{color:rgba(255,255,255,.66)}
html.day .wa{border-radius:999px;background:var(--d-ink);color:#fff}
html.day .wa:hover{background:#2a2a2a}
html.day .diag .wa{background:#fff;color:#000}
html.day .diag .wa:hover{background:#e8e8ea}
html.day tw-c::after{color:var(--d-ink)}
html.day .work:not(.in-svc) tw-c::after,html.day .diag tw-c::after{color:#fff}
html.day .foot{color:var(--d-dim)}

/* 展开层 */
html.day #ov .bg{background:var(--d-bg)}
html.day .ovf{background:var(--d-card)}
html.day .ovf .shade{background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,0) 55%)}
html.day .ovb .k{color:var(--d-dim)}
html.day .rows span{color:var(--d-ink)}
html.day .ovx{background:var(--d-ink);border:0;border-radius:999px;color:#fff}

/* 手机直向版 */
html.day.m .nav{background:linear-gradient(var(--d-bg) 70%,rgba(255,255,255,0))}
html.day.m .work:not(.in-svc){width:auto;height:auto;margin:48px 16px 0;padding:56px 22px 48px;border-radius:32px}
html.day.m .wa-dock{background:var(--d-ink)}

/* 换主题那一下先淡入淡出(完整的日落月升动画是下一阶段) */
html.theming body,html.theming body *{transition:background-color .6s ease,color .6s ease,border-color .6s ease,fill .6s ease,stroke .6s ease!important}

/* 直向版宽度够两栏时(平板、窄桌面视窗),服务卡排两栏,不让一张卡独占一整行 */
@media (min-width:560px){html.day.m .svc{display:grid;grid-template-columns:1fr 1fr;gap:56px 32px;align-items:start}
  html.day.m .svc .p-intro{grid-column:1/-1}}
html.day.m .diag .box{border-radius:32px}

/* 作品段:标题块只占自己的宽,所以「标题→第一件」与「件与件之间」是同一个间距(6vw),左右内距也是 6vw */
html.day .work:not(.in-svc) .p-intro{width:auto;margin-right:0}
/* 按钮:白天一律黑色胶囊,放在黑面板里换成白色 */
html.day .cta{border-color:transparent;background:var(--d-ink);color:#fff}
html.day .cta:hover{background:#2a2a2a}
html.day .work:not(.in-svc) .cta{background:#fff;color:#000}
html.day .work:not(.in-svc) .cta:hover{background:#e2e2e5}
html.day .svc-note p{color:var(--d-text)}

/* 服务页:去框(world.css 全站规矩),这里只换白天的灰与黑 */
html.day .lead .who{color:var(--d-dim)}
html.day .e-col h3,html.day .std-strip h3{color:var(--d-dim)}
html.day .e-col.yes li::before{color:var(--d-ink)}
html.day .e-col.no li::before{color:var(--d-dim)}
html.day .e-col li a{color:var(--d-ink);text-decoration:underline;text-underline-offset:4px}
html.day .flow .node img,html.day .std-strip img,html.day .o-card .vis>img,html.day .o-card .dev-vis .dev{filter:drop-shadow(0 14px 18px rgba(0,0,0,.14))}
html.day .o-card .ask.wa{display:inline-flex;margin-top:20px;padding:10px 18px;border:0;border-radius:999px;background:var(--d-ink);color:#fff;font:inherit;font-size:13.5px;line-height:1.2}
html.day .o-card .ask.wa:hover{background:#2a2a2a;color:#fff}
html.day .back{background:var(--d-card);border-color:transparent;color:var(--d-ink)}
html.day .back:hover,html.day .back:focus-visible{background:var(--d-ink);color:#fff}
html.day .nav-svc .menu{background:#fff;border-color:var(--d-line);box-shadow:0 24px 60px rgba(0,0,0,.12);backdrop-filter:none}
html.day .nav nav .menu a{color:var(--d-text);text-decoration:none}
html.day .nav nav .menu a:hover,html.day .nav nav .menu a:focus-visible{background:var(--d-card)}
/* 每一项底下那条往下淡出的竖线(world.css)换成白底上的灰 */
html.day :is(.o-card,.e-col,.qs,.std-strip)::after{background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,0))}
html.day.m :is(.flow,.qs){padding-left:0;padding-right:0}  /* 白天直向版贴齐页边(world.css 的 html.m 内距是给夜晚的) */
/* 第一屏主图:有白天版就换上,夜晚的水墨图收起来 */
html.day .lead:has(.day-show) :is(.scene,.show){display:none}
html.day .lead .day-show{display:flex;align-items:center;justify-content:center;margin:0}
html.day .lead .day-show img{width:100%;max-width:820px;height:auto;aspect-ratio:16/9;object-fit:cover;mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 50%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 50%,transparent 100%)}
html.day .pick .open{--pb:#000;background:#000;color:#fff}
html.day .card:hover .frame{box-shadow:0 30px 60px rgba(0,0,0,.16)}
/* 白天桌面:样板在右栏上下居中;左栏「标题 + 副标题 + 输入框」整组也上下居中,框紧跟在副标题下(Victor 2026-10-22 标注)。
   .hero-r 拆成 contents,让框与卡片各自落进 hero 的格子;上下留白一样多,居中才是画面正中 */
@media (min-width:881px){
  html.day:not(.m) .hero{grid-template-areas:". c" "l c" "t c" ". c";grid-template-rows:1fr auto auto 1fr;row-gap:0;align-content:stretch;padding-bottom:96px}
  html.day:not(.m) .hero-l{grid-area:l;align-self:end;text-align:center}  /* 标题与副标题在左栏置中(Victor 2026-10-23) */
  html.day:not(.m) .hero-l .sub{margin-left:auto;margin-right:auto}
  html.day:not(.m) .hero-r{display:contents}
  html.day:not(.m) .hero .try{grid-area:t;align-self:start;justify-self:center;margin:48px 0 0;width:min(640px,100%)}
  html.day:not(.m) .hero .cards{grid-area:c;align-self:center;margin-bottom:-56px}}  /* 扣掉下面按钮那一栏,让样板画面本身居中 */

/* 手机白天:框拆两行(名字 / 行业+风格),整颗药丸改成圆角方块 */
@media (max-width:880px){html.day .try-box{border-radius:20px}html.day .sels{border-top-color:var(--d-line)}}
html.day .hero .try-box.wrap{border-radius:20px}html.day .hero .try-box.wrap .sels{border-top-color:var(--d-line)}

/* 白天下拉清单:同样透明只留框线,字用墨色 */
html.day .ind option{color:var(--d-ink);background:#fff}
@supports (appearance:base-select){
  html.day .ind::picker(select){background:rgba(255,255,255,.35);border-color:var(--d-line);border-radius:14px;box-shadow:none}
  html.day .ind option{background:none;color:var(--d-ink);text-shadow:none}
  html.day .ind option:hover,html.day .ind option:focus-visible{background:rgba(0,0,0,.06)}
  html.day .ind option:checked{color:var(--d-ink);font-weight:600}}
/* 语言旗,白天:简中 / 繁中那两面是米白底;下拉跟服务下拉同一块白面板 */
html.day .flag.zh{color:#1d1d1f;text-shadow:none}
html.day svg.flag{box-shadow:0 0 0 1px rgba(0,0,0,.1)}
html.day .lang-menu{background:#fff;border-color:var(--d-line);box-shadow:0 24px 60px rgba(0,0,0,.12);backdrop-filter:none}
html.day .lang-menu a:hover{background:var(--d-card)}
/* ENTER 页上只有日夜开关与语言旗浮在门上,导航底色(白天、手机版各有一条)一律不要 —— 放档尾,盖过前面那几条 */
html.gated .nav,html.m.gated .nav,html.day.gated .nav,html.day.m.gated .nav{background:none}