/* Local-only concept layer: floating tutorial spotlight + straight news rail. */
.homeTopStrip{
  position:fixed;
  top:clamp(14px,2.4vh,28px);
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  width:min(1460px,calc(100vw - 40px));
  pointer-events:auto;
  opacity:1;
  transition:opacity .58s cubic-bezier(.22,.61,.36,1),transform .68s cubic-bezier(.22,.61,.36,1);
}
html.intro-active .homeTopStrip{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-10px)}
html.intro-active.intro-exiting .homeTopStrip{opacity:1;transform:translateX(-50%) translateY(0);transition-delay:.14s}
.homeTopStripInner{display:grid;grid-template-columns:minmax(285px,.78fr) 1px minmax(0,2.7fr);gap:18px;align-items:stretch}
.homeTopDivider{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.15) 16%,rgba(255,255,255,.15) 84%,transparent)}

.spotlightTutorial{
  position:relative;min-height:166px;border:1px solid rgba(255,255,255,.13);border-radius:28px;overflow:hidden;
  color:#f5f7f4;text-align:left;padding:0;background:#111713;
  box-shadow:0 18px 55px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035);
  transition:transform .34s cubic-bezier(.22,.61,.36,1),border-color .34s ease;
}
.spotlightPreview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.78) brightness(.72);transform:scale(1.02);pointer-events:none}
.spotlightPreviewShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,9,.05) 0%,rgba(7,11,9,.18) 42%,rgba(7,11,9,.78) 100%);pointer-events:none}
.spotlightTutorialTitle{position:absolute;left:19px;right:72px;bottom:39px;font-size:clamp(18px,1.45vw,23px);line-height:1.06;letter-spacing:-.035em;font-weight:720;text-shadow:0 1px 14px rgba(0,0,0,.28)}
.spotlightTutorialMeta{position:absolute;left:19px;right:70px;bottom:18px;font-size:11px;color:rgba(255,255,255,.62);text-shadow:0 1px 12px rgba(0,0,0,.34)}
.spotlightPlay{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(247,248,245,.94);color:#111413;box-shadow:0 10px 28px rgba(0,0,0,.2);font-size:12px;z-index:2}

.newsStrip{min-width:0;display:flex;align-items:stretch}
.newsRailWrap{position:relative;min-width:0;flex:1;overflow:hidden;height:166px}
.newsRail{height:100%;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;cursor:grab;user-select:none;touch-action:pan-x;padding:0 18px 2px 3px}
.newsRail::-webkit-scrollbar{display:none}.newsRail.dragging{cursor:grabbing;scroll-snap-type:none}
.newsCard{position:relative;scroll-snap-align:start;flex:0 0 226px;min-height:164px;border:1px solid rgba(255,255,255,.115);border-radius:25px;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.028));color:#f5f7f4;text-align:left;padding:16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s ease,background .3s ease}
.newsCardTag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(164,255,209,.68);font-weight:680}
.newsCardTitle{font-size:15px;line-height:1.15;letter-spacing:-.02em;font-weight:650;max-width:185px}.newsCardMeta{margin-top:6px;font-size:10px;color:rgba(255,255,255,.32)}

/* Semantic focus mode: everything peripheral leaves the stage while meaning is checked. */
body.semantic-focus-mode .homeTopStrip{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-56px)}
body.semantic-focus-mode .semanticGreeting{opacity:0;transform:translateY(-30px);pointer-events:none}
body.semantic-focus-mode .chipsViewport,body.semantic-focus-mode .utilityStack{opacity:0;transform:translateY(34px);pointer-events:none}
.semanticGreeting,.chipsViewport,.utilityStack{transition:opacity .36s ease,transform .5s cubic-bezier(.22,.61,.36,1)}

html.theme-light body .homeTopDivider{background:linear-gradient(180deg,transparent,rgba(25,38,30,.13) 16%,rgba(25,38,30,.13) 84%,transparent)}
html.theme-light body .spotlightTutorial{color:#17201b;border-color:rgba(24,36,29,.11);background:#eef2ee;box-shadow:0 18px 50px rgba(26,40,31,.08),inset 0 1px rgba(255,255,255,.9)}
html.theme-light body .spotlightPreview{filter:saturate(.7) brightness(.98) contrast(.9)}
html.theme-light body .spotlightPreviewShade{background:linear-gradient(180deg,rgba(245,248,245,.12) 0%,rgba(245,248,245,.24) 40%,rgba(245,248,245,.93) 100%)}
html.theme-light body .spotlightTutorialMeta{color:rgba(24,32,27,.54);text-shadow:none}html.theme-light body .spotlightTutorialTitle{text-shadow:none}
html.theme-light body .newsCard{color:#17201b;border-color:rgba(24,36,29,.10);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,247,244,.97));box-shadow:0 12px 34px rgba(26,40,31,.045),inset 0 1px rgba(255,255,255,.95)}
html.theme-light body .newsCardMeta{color:rgba(24,32,27,.42)}

@media(hover:hover) and (pointer:fine){.spotlightTutorial:hover{transform:translateY(-3px);border-color:rgba(164,255,209,.28)}.newsCard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.23);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))}html.theme-light body .newsCard:hover{border-color:rgba(24,36,29,.2);background:#fff}}

@media(max-width:900px){.homeTopStrip{width:min(100%,calc(100vw - 24px));top:12px}.homeTopStripInner{grid-template-columns:minmax(235px,.72fr) 1px minmax(0,2fr);gap:12px}.spotlightTutorial{min-height:148px;border-radius:24px}.spotlightTutorialTitle{left:16px;bottom:36px;font-size:18px}.spotlightTutorialMeta{left:16px;bottom:16px}.spotlightPlay{right:15px;top:15px;width:40px;height:40px}.newsRailWrap{height:148px}.newsCard{flex-basis:200px;min-height:146px;border-radius:22px;padding:14px}}
@media(max-width:680px){.homeTopStrip{top:10px;width:calc(100vw - 18px)}.homeTopStripInner{display:block}.homeTopDivider{display:none}.spotlightTutorial{min-height:112px;border-radius:23px;margin-bottom:10px}.spotlightTutorialTitle{left:15px;right:68px;bottom:34px;font-size:17px}.spotlightTutorialMeta{left:15px;bottom:14px;font-size:10px}.spotlightPlay{width:39px;height:39px;right:14px;top:14px}.newsRailWrap{height:106px}.newsCard{flex-basis:174px;min-height:102px;border-radius:20px;padding:12px}.newsCardTitle{font-size:13px;max-width:148px}.newsCardMeta{font-size:9px}.newsCardTag{font-size:8px}body.homePage .stage{transform:translateY(92px)}body.semantic-focus-mode .homeTopStrip{transform:translateX(-50%) translateY(-38px)}body.semantic-focus-mode .semanticGreeting{transform:translateY(-20px)}body.semantic-focus-mode .chipsViewport,body.semantic-focus-mode .utilityStack{transform:translateY(24px)}}
@media(max-width:430px){.spotlightTutorial{min-height:104px}.newsRailWrap{height:96px}.newsCard{flex-basis:162px;min-height:92px;padding:11px}.newsCardTitle{font-size:12px}body.homePage .stage{transform:translateY(98px)}}
@media(max-height:640px) and (min-width:681px){.homeTopStrip{top:8px}.spotlightTutorial{min-height:126px}.newsRailWrap{height:126px}.newsCard{min-height:124px;flex-basis:205px}}
@media(prefers-reduced-motion:reduce){.homeTopStrip,.spotlightTutorial,.newsCard,.semanticGreeting,.chipsViewport,.utilityStack{transition:none!important}}


/* 1.1.36 preview — mobile Spotlight contract. The future Projects/Blog rail stays empty/hidden on phones. */
@media(max-width:680px){
  .homeTopStrip{top:max(10px,env(safe-area-inset-top));z-index:12;width:calc(100vw - 18px)}
  .homeTopStripInner{display:block}
  .homeTopDivider,.newsStrip{display:none!important}
  .spotlightTutorial{display:block!important;width:100%;min-height:112px;margin:0;border-radius:23px}
}
@media(max-width:430px){
  .spotlightTutorial{min-height:104px}
}