/* ============================================================ KIRIBASS HOLDINGS — v7 multi-page design system. Structure: real separate pages (SoftBank pattern) linked by cross-document View Transitions (the modern MPA morph API). Visual language carried from approved v6 (black field, cyan/ violet signal palette, mono-accented Japanese type). VISIBILITY CONTRACT (inherited from v5/v6, do not weaken): every element that can be revealed by scroll starts VISIBLE in plain CSS. Only html.has-js (set synchronously in ) may pre-hide for reveal effects, and an independent inline fail-safe in each page's forces the final visible state at 3s no matter what. New scroll-driven-animation (animation-timeline) usage is DECORATIVE ONLY — critical content never depends on it. Written and maintained by Iron. ============================================================ */ :root{ --bg:#f4f8fc; --bg2:#e9f1f9; --bg3:#dfeaf4; --bg4:#cfe0ef; --line:rgba(11,34,57,.10); --line2:rgba(11,34,57,.18); --ink:#0b2239; --ink-dim:rgba(11,34,57,.70); --ink-faint:rgba(11,34,57,.46); --a:#0b87c9; --b:#1d6ff2; --c:#0eb98a; --warn:#b7791f; --grad:linear-gradient(90deg,#00b5d6,#1d6ff2); --ff:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",system-ui,-apple-system,sans-serif; --ffm:"Cascadia Code","SF Mono",Consolas,"Roboto Mono",ui-monospace,monospace; --nav-h:64px; --ease-out:cubic-bezier(.22,1,.36,1); --spring:linear(0,.008 1.1%,.03 2.2%,.129 4.8%,.257 7.2%,.671 14.2%,.789 16.5%,.881 18.6%,.957 20.7%,1.019 22.9%,1.063 25.1%,1.094 27.4%,1.107 30%,1.103 32.8%,1.051 39.6%,1.017 43.1%,.991 46.4%,.977 50.3%,.974 53.4%,.98 59.1%,1.001 70.2%,1.006 75.3%,1 100%); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable; overflow-x:hidden;overscroll-behavior-y:none} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* body must NOT be a scroll container: overflow-x:clip clips without creating one. overscroll-behavior lives on html only - the viewport reads it from the root since Chrome 140, and on a non-scrollable scroll container (which html,body{overflow-x:hidden} used to make body) it swallows all wheel input since Chrome 144. Changed 2026-08-19 with the scroll(root) removal. */ body{background:var(--bg);color:var(--ink);font-family:var(--ff); line-height:1.8;letter-spacing:.01em;-webkit-font-smoothing:antialiased; min-height:100vh;overflow-wrap:anywhere;overflow-x:clip} img,svg,canvas,video{display:block;max-width:100%} a{color:inherit} h1,h2,h3{text-wrap:balance;font-weight:800} b{font-weight:700} [id]{scroll-margin-top:calc(var(--nav-h) + 18px)} ::selection{background:var(--a);color:var(--bg)} :focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:2px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg); padding:10px 16px;z-index:300;font-size:14px} .skip:focus{left:12px;top:12px} /* ============================================================ CROSS-DOCUMENT VIEW TRANSITIONS (MPA morph). The nav bar keeps its own name so it stays visually fixed while the page content slides. The brand mark morphs between pages. Browsers without support simply navigate normally. ============================================================ */ @view-transition{navigation:auto} @media(prefers-reduced-motion:no-preference){ ::view-transition-old(page){animation:vt-out .26s ease both} ::view-transition-new(page){animation:vt-in .5s var(--ease-out) both} } @keyframes vt-out{to{opacity:0;transform:translateY(-14px)}} @keyframes vt-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .topnav{view-transition-name:topnav} main{view-transition-name:page} /* ---------- scroll progress hairline (JS-driven; see site.js module 1.6) ---------- was animation-timeline:scroll(root). Removed 2026-08-19: root scroll timelines kill physical mouse-wheel scrolling in Chrome 151 (wheel dead, scrollbar and JS scrolling alive) - measured on this site by single-variable bisection. */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:260; background:var(--grad);transform-origin:0 50%;transform:scaleX(0);pointer-events:none} /* ---------- ambient field + film grain ---------- */ .field{position:fixed;inset:0;z-index:-3;background: radial-gradient(ellipse 60% 45% at 20% -6%,rgba(29,111,242,.10),transparent 60%), radial-gradient(ellipse 55% 40% at 88% 8%,rgba(29,111,242,.08),transparent 60%), radial-gradient(ellipse 70% 50% at 50% 108%,rgba(18,214,160,.06),transparent 60%), var(--bg)} .grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* decorative parallax dot-grid used in page heroes (JS-driven drift; see site.js module 1.6 - same Chrome 151 scroll(root) wheel regression as .progress) */ .dotgrid{position:absolute;inset:-20% -5%;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(11,34,57,.10) 1px,transparent 1.4px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 65% 60% at 70% 30%,#000 0%,transparent 70%); mask-image:radial-gradient(ellipse 65% 60% at 70% 30%,#000 0%,transparent 70%)} /* ============================================================ TOP NAVIGATION — fixed bar + hover/focus dropdowns (pure CSS, cannot be broken by a script error). Mobile menu = checkbox hack, also zero-JS. @starting-style gives the dropdown its entry rise. ============================================================ */ .topnav{position:fixed;top:0;left:0;right:0;z-index:200;border-bottom:1px solid var(--line)} .topnav-inner{max-width:1400px;margin:0 auto;height:var(--nav-h); display:flex;align-items:center;justify-content:space-between;gap:16px; padding:0 clamp(18px,4vw,40px); background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .brand{display:flex;flex-direction:row;align-items:center;gap:10px;line-height:1.15; text-decoration:none;color:var(--ink);flex:none;view-transition-name:brand} .brand-logo{display:block;flex:none;height:28px;width:auto; filter:drop-shadow(0 0 10px rgba(29,111,242,.4))} .brand-text{display:flex;flex-direction:column} .brand .b1{font-family:var(--ffm);font-weight:700;font-size:14px;letter-spacing:.09em} .brand .b2{font-family:var(--ffm);font-size:8.5px;letter-spacing:.24em;color:var(--ink-faint);margin-top:2px} .nav-desktop{display:none} .nav-cta{display:none} /* 1160px, not 1000px: the desktop row needs brand 154 + ul 772 + CTA 98 + gaps and padding = ~1135px. Below that the ul cannot shrink (white-space:nowrap on .nav-item>a) so the CTA absorbed the whole deficit and collapsed to a 53px vertical sliver hanging off the right edge. Keep this in lockstep with the .nav-mobile{display:none} query below. Measured + raised 2026-08-19. */ @media(min-width:1160px){ .nav-desktop{display:block} .nav-desktop>ul{display:flex;align-items:center;gap:4px;list-style:none} .nav-item{position:relative} .nav-item>a{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:13.5px; color:var(--ink-dim);text-decoration:none;border-radius:3px;white-space:nowrap; transition:color .2s} .nav-item>a:hover,.nav-item>a:focus-visible{color:var(--ink)} .nav-item>a[aria-current="page"]{color:var(--ink)} .nav-item>a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px; bottom:2px;height:2px;background:var(--grad);border-radius:2px} .nav-item.has-dd>a::before{content:"";width:5px;height:5px;flex:none;order:2; border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .25s} .nav-item.has-dd:hover>a::before,.nav-item.has-dd:focus-within>a::before{ transform:rotate(-135deg) translateY(-2px)} .dd-panel{position:absolute;top:calc(100% + 6px);left:8px;min-width:236px; background:rgba(255,255,255,.96);border:1px solid var(--line2);border-radius:4px; padding:8px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 28px 60px -18px rgba(11,63,143,.25); display:none;opacity:0;transform:translateY(8px)} .nav-item.has-dd:hover .dd-panel,.nav-item.has-dd:focus-within .dd-panel{ display:block;opacity:1;transform:none; transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)} @starting-style{ .nav-item.has-dd:hover .dd-panel,.nav-item.has-dd:focus-within .dd-panel{ opacity:0;transform:translateY(8px)} } .dd-panel a{display:block;padding:9px 12px;font-size:13px;color:var(--ink-dim); text-decoration:none;border-radius:3px;transition:background .15s,color .15s,padding-left .2s} .dd-panel a:hover,.dd-panel a:focus-visible{background:rgba(29,111,242,.08); color:var(--ink);padding-left:16px} .nav-cta{display:block;flex:none} .nav-cta a{display:inline-block;font-size:13px;font-weight:700;color:var(--bg); background:var(--a);padding:9px 20px;border-radius:999px;text-decoration:none; white-space:nowrap; transition:transform .2s var(--spring),box-shadow .25s;will-change:transform} .nav-cta a:hover{box-shadow:0 0 28px rgba(29,111,242,.45)} .topnav-inner .hamburger{display:none} } /* ---------- mobile nav (checkbox hack, full-screen overlay) ---------- */ .nav-toggle-input{position:absolute;opacity:0;pointer-events:none} .hamburger{width:42px;height:42px;display:flex;flex-direction:column;justify-content:center; align-items:center;gap:5px;cursor:pointer;border-radius:4px} .hamburger span{display:block;width:20px;height:1.6px;background:var(--ink); transition:transform .3s var(--ease-out),opacity .2s} .nav-toggle-input:checked ~ .topnav-inner .hamburger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .nav-toggle-input:checked ~ .topnav-inner .hamburger span:nth-child(2){opacity:0} .nav-toggle-input:checked ~ .topnav-inner .hamburger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} .nav-mobile{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:190; background:rgba(246,250,253,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); padding:28px clamp(20px,6vw,44px) 60px;overflow-y:auto; display:none;flex-direction:column;gap:2px} .nav-toggle-input:checked ~ .nav-mobile{display:flex} .nav-mobile a.flat,.nav-mobile summary{font-size:19px;font-weight:800;color:var(--ink); padding:16px 4px;text-decoration:none;border-bottom:1px solid var(--line);cursor:pointer; list-style:none;display:block} .nav-mobile summary::-webkit-details-marker{display:none} .nav-mobile details[open] summary{color:var(--a)} .dd-mobile{display:flex;flex-direction:column;padding:6px 0 14px} .dd-mobile a{font-size:15px;color:var(--ink-dim);text-decoration:none;padding:10px 18px} .dd-mobile a:active{color:var(--a)} .nav-cta-m{margin-top:26px;text-align:center;font-size:15px;font-weight:700;color:var(--bg); background:var(--a);padding:14px 20px;border-radius:999px;text-decoration:none} @media(min-width:1160px){ .nav-mobile{display:none !important} /* the checkbox is the hamburger's control; above the breakpoint the hamburger is gone, so the input must leave the tab order too - opacity:0 alone still takes focus, and since it now carries aria-label it would announce as a "menu" checkbox that opens nothing. Added 2026-08-19. */ .nav-toggle-input{display:none} } /* the checkbox is the hamburger's only focusable control: keep it reachable and show its focus ring on the visible hamburger (added 2026-08-19) */ .nav-toggle-input:focus-visible ~ .topnav-inner .hamburger{ outline:2px solid var(--a);outline-offset:3px;border-radius:4px} /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ main{display:block} .wrap{max-width:1400px;margin:0 auto;padding:clamp(56px,7vw,110px) clamp(20px,5vw,64px)} .wrap-tight{max-width:1080px} section{position:relative} section + section{border-top:1px solid var(--line)} .kicker{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,3.4vw,44px)} .kicker .num{font-family:var(--ffm);font-size:12px;color:var(--a);letter-spacing:.14em} .kicker h2{font-size:clamp(20px,2.5vw,27px);letter-spacing:.24em;font-weight:800} .kicker .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)} .sub-head{display:flex;align-items:center;gap:12px;margin:clamp(34px,4.4vw,56px) 0 18px} .sub-head .tag2{font-family:var(--ffm);font-size:10px;letter-spacing:.2em;color:var(--a); border:1px solid rgba(29,111,242,.35);border-radius:2px;padding:3px 9px} .sub-head h2,.sub-head h3{font-size:clamp(18px,2.1vw,23px);font-weight:800} .lead{font-size:14.5px;color:var(--ink-dim);line-height:2;max-width:760px} /* ============================================================ REVEAL SYSTEM (visibility contract). Default = visible. html.has-js pre-hides; JS IntersectionObserver adds .in; independent inline fail-safe forces .in at 3s. ============================================================ */ .reveal,.kicker{opacity:1;transform:none} html.has-js .reveal:not(.in),html.has-js .kicker:not(.in){opacity:0;transform:translateY(26px)} html.has-js .reveal.in,html.has-js .kicker.in{opacity:1;transform:none; transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} @media(prefers-reduced-motion:reduce){ html.has-js .reveal:not(.in),html.has-js .kicker:not(.in){opacity:1;transform:none} html.has-js .bar-fill:not(.in){width:var(--w,60%)} html.has-js .page-hero .rule-anim{transform:scaleX(1);transition:none} } /* ============================================================ PAGE HERO (subpages) — compact band w/ breadcrumb + scramble h1 ============================================================ */ /* overflow:clip, never hidden, on any box a decoration overhangs: hidden makes the box a scroll container, and a scroll container that overflows but is not user-scrollable swallows the physical mouse wheel in Chrome 151 (the .dotgrid inset:-20% overhang made this one 86-96px tall of dead zone across the whole page width). clip clips identically without creating a scroller. 2026-08-19. */ .page-hero{position:relative;padding-top:var(--nav-h);overflow:clip} .page-hero .wrap{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(40px,5vw,64px); position:relative;z-index:1} .crumbs{display:flex;align-items:center;gap:10px;font-family:var(--ffm);font-size:11px; letter-spacing:.12em;color:var(--ink-faint);margin-bottom:18px} .crumbs a{color:var(--ink-faint);text-decoration:none;transition:color .2s} .crumbs a:hover{color:var(--a)} .crumbs .sep{opacity:.5} .page-hero .en{font-family:var(--ffm);font-size:12px;letter-spacing:.3em;color:var(--a); text-transform:uppercase;margin-bottom:14px} .page-hero h1{font-size:clamp(30px,4.6vw,54px);letter-spacing:.06em;line-height:1.3} .page-hero .hero-lead{margin-top:20px;max-width:720px;font-size:14.5px;color:var(--ink-dim);line-height:2} .page-hero .rule-anim{margin-top:clamp(26px,3.4vw,40px);height:1px;background:var(--grad); transform-origin:0 50%;width:min(420px,60%)} html.has-js .page-hero .rule-anim{transform:scaleX(0)} html.has-js .page-hero .rule-anim.in{transform:scaleX(1);transition:transform 1.1s var(--ease-out) .2s} /* ============================================================ INDEX HERO — WebGL signal-field + typed flag ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; padding-top:var(--nav-h);overflow:clip} .hero-canvas-wrap{position:absolute;inset:0;z-index:0} #gl{position:absolute;inset:0;width:100%;height:100%} .hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 90% 70% at 50% 45%,transparent 40%,rgba(244,248,252,0) 100%)} .hero-fade{position:absolute;left:0;right:0;bottom:0;height:180px;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent,var(--bg))} .hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(48px,7vw,90px); padding-bottom:clamp(48px,6vw,80px)} #flag{font-size:clamp(34px,5.8vw,76px);line-height:1.35;letter-spacing:.02em; font-weight:800;max-width:20em} #flag .hot{background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;filter:drop-shadow(0 0 26px rgba(29,111,242,.35))} .caret{display:inline-block;width:.08em;height:1em;background:var(--a);margin-left:.08em; vertical-align:-.12em;animation:blink 1.05s steps(1) infinite} .caret.off{opacity:0;animation:none} @keyframes blink{50%{opacity:0}} @media(prefers-reduced-motion:reduce){.caret{animation:none}} .iron-line{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,4vw,44px); font-size:14px;color:var(--ink-dim)} .iron-line .glyph{width:46px;height:46px;flex:none} .iron-line b{color:var(--ink)} /* status marquee — live ticker strip */ .status-row{display:flex;align-items:center;gap:18px;margin-top:18px;max-width:640px} .status{display:inline-flex;align-items:center;gap:8px;font-family:var(--ffm);font-size:11.5px; letter-spacing:.1em;color:var(--a);white-space:nowrap} .status .dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none; box-shadow:0 0 10px rgba(18,214,160,.9);animation:breathe 2.4s ease-in-out infinite} @keyframes breathe{50%{opacity:.35;transform:scale(.8)}} @media(prefers-reduced-motion:reduce){.status .dot{animation:none}} .ticker{position:relative;overflow:clip;flex:1;min-width:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ticker-track{display:inline-flex;gap:44px;white-space:nowrap;padding-right:44px; font-family:var(--ffm);font-size:11px;letter-spacing:.08em;color:var(--ink-faint)} @media(prefers-reduced-motion:no-preference){ html.has-js .ticker-track{animation:tick 26s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} } @keyframes tick{to{transform:translateX(-50%)}} .pillars-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,44px)} .pillars-strip a{font-family:var(--ffm);font-size:11.5px;letter-spacing:.1em;color:var(--ink-dim); border:1px solid var(--line2);border-radius:999px;padding:9px 18px;text-decoration:none; transition:color .2s,border-color .2s,box-shadow .3s,transform .3s var(--spring)} .pillars-strip a:hover{color:var(--ink);border-color:var(--a); box-shadow:0 0 22px rgba(29,111,242,.25)} /* 3-door paths */ .paths{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);margin-top:clamp(34px,4.6vw,52px);border-radius:4px;overflow:hidden} @media(min-width:860px){.paths{grid-template-columns:repeat(3,1fr)}} .paths a{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.6vw,30px); background:rgba(255,255,255,.82);text-decoration:none;position:relative;overflow:hidden; transition:background .3s} .paths a::after{content:"";position:absolute;inset:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(29,111,242,.09),transparent 55%); opacity:0;transition:opacity .3s;pointer-events:none} .paths a:hover::after{opacity:1} .paths .who{font-family:var(--ffm);font-size:11px;letter-spacing:.14em;color:var(--ink-faint)} .paths .act{font-size:16.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:10px} .paths .arrow{color:var(--a);transition:transform .3s var(--spring)} .paths a:hover .arrow{transform:translateX(7px)} /* hero latest-stats card */ .hero-news-card{margin-top:clamp(36px,4.6vw,54px);max-width:560px;background:rgba(255,255,255,.8); border:1px solid var(--line2);border-radius:4px;padding:clamp(20px,2.6vw,26px) clamp(22px,2.8vw,28px); box-shadow:0 30px 70px -30px rgba(11,63,143,.22);backdrop-filter:blur(6px)} .hnc-tag{font-family:var(--ffm);font-size:10px;letter-spacing:.18em;color:var(--bg); background:var(--a);padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:14px} .hnc-body{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:baseline} .hnc-stat{display:flex;flex-direction:column;gap:2px} .hnc-stat b{font-family:var(--ffm);font-weight:700;font-size:clamp(26px,3.4vw,34px);color:var(--ink); font-variant-numeric:tabular-nums} .hnc-stat b small{font-size:.42em;color:var(--a);font-weight:600;margin-left:.12em} .hnc-stat span{font-size:12px;color:var(--ink-dim)} .hnc-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px; padding-top:14px;border-top:1px solid var(--line)} .hnc-link{font-size:12.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2); padding-bottom:2px;transition:color .2s,border-color .2s} .hnc-link:hover{color:var(--a);border-color:var(--a)} .hnc-date{font-family:var(--ffm);font-size:10.5px;color:var(--ink-faint);letter-spacing:.08em} /* ============================================================ EVIDENCE BARS (news) ============================================================ */ .bars{display:flex;flex-direction:column;gap:26px;margin-top:10px} .bar-row .meta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:9px} .bar-row .tag{font-family:var(--ffm);font-size:10px;letter-spacing:.14em;color:var(--bg); background:var(--a);padding:3px 10px;border-radius:999px;white-space:nowrap} .bar-row .label{font-size:13px;color:var(--ink-dim)} .bar-row .num{margin-left:auto;font-family:var(--ffm);font-weight:700; font-size:clamp(20px,2.6vw,28px);font-variant-numeric:tabular-nums} .bar-row .num small{font-size:.5em;color:var(--a);margin-left:.15em} .bar-track{height:7px;border-radius:99px;background:var(--bg3);overflow:hidden;position:relative} .bar-fill{height:100%;border-radius:99px;background:var(--grad);width:var(--w,60%); box-shadow:0 0 14px rgba(29,111,242,.4);position:relative} .bar-fill::after{content:"";position:absolute;inset:0;border-radius:99px; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); background-size:200% 100%;opacity:0} @media(prefers-reduced-motion:no-preference){ .bar-row:hover .bar-fill::after{opacity:1;animation:shine 1.2s ease} } @keyframes shine{from{background-position:200% 0}to{background-position:-100% 0}} html.has-js .bar-fill:not(.in){width:0} html.has-js .bar-fill.in{width:var(--w,60%);transition:width 1.3s var(--ease-out) .15s} .bar-row .cite{margin-top:8px;font-size:11.5px;color:var(--ink-faint)} .scale-note{margin-top:26px;font-size:11.5px;color:var(--ink-faint)} /* ============================================================ LETTER + PORTRAIT (代表挨拶) ============================================================ */ .message-flex{display:flex;gap:clamp(24px,3.4vw,40px);align-items:flex-start} .message-photo{flex:none;width:220px;border-radius:3px;overflow:hidden;border:1px solid var(--line2); box-shadow:0 30px 60px -30px rgba(11,63,143,.25);position:relative} .message-photo img{display:block;width:100%;height:auto; transition:transform .8s var(--ease-out)} .message-photo:hover img{transform:scale(1.04)} .message-photo figcaption{font-family:var(--ffm);font-size:10px;letter-spacing:.08em;color:var(--ink-faint); padding:8px 10px;border-top:1px solid var(--line)} @media(max-width:760px){.message-flex{flex-direction:column}.message-photo{width:170px}} .letter{max-width:760px;display:flex;flex-direction:column;gap:18px} .letter p{font-size:14.5px;color:var(--ink-dim);line-height:2.1} .letter .sign{margin-top:6px;font-size:14px;color:var(--ink)} .letter .sign b{font-weight:700} /* ============================================================ GOALS (ビジョン) ============================================================ */ .goal-row{display:flex;flex-direction:column;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden} .goal{display:flex;align-items:center;gap:18px;padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px); background:rgba(255,255,255,.82);transition:background .3s} .goal:hover{background:rgba(255,255,255,.96)} .goal .badge{font-family:var(--ffm);font-size:10px;letter-spacing:.12em;color:var(--warn); border:1px solid rgba(183,121,31,.4);border-radius:2px;padding:3px 9px;white-space:nowrap;flex:none} .goal .gtxt{font-size:14.5px;color:var(--ink-dim);line-height:1.9} .goal .gtxt b{color:var(--a);font-family:var(--ffm)} /* ============================================================ CREDO GRID (バリュー 6項目) ============================================================ */ .credo-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden} @media(min-width:760px){.credo-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:760px) and (max-width:1079px){.credo-grid>.credo-item:last-child{grid-column:1 / -1}} @media(min-width:1080px){.credo-grid{grid-template-columns:repeat(3,1fr)}} .credo-item{background:rgba(255,255,255,.82);padding:clamp(22px,2.8vw,30px); display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden; transform-style:preserve-3d;transition:background .3s} .credo-item:hover{background:rgba(255,255,255,.96)} .credo-item .cn{font-family:var(--ffm);font-size:11px;color:var(--a);letter-spacing:.16em} .credo-item h3{font-size:17.5px;line-height:1.6} .credo-item p{font-size:13px;color:var(--ink-dim);line-height:1.95} /* ============================================================ TIMELINE (沿革) — spine draws itself on scroll (decorative) ============================================================ */ .timeline{position:relative;margin-top:8px;padding-left:0} .tl-row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 0;position:relative} @media(max-width:640px){.tl-row{grid-template-columns:88px 1fr;gap:12px}} .tl-row .date{font-family:var(--ffm);font-size:11.5px;color:var(--ink-faint);letter-spacing:.06em; padding-top:3px;text-align:right} .tl-row .body{position:relative;padding-left:26px;border-left:1px solid var(--line2)} .tl-row .body::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px; border-radius:50%;background:var(--a);box-shadow:0 0 12px rgba(29,111,242,.7)} .tl-row .ev{font-size:14px;color:var(--ink-dim);line-height:1.95} .tl-row .fig{display:inline-block;margin-left:10px;font-family:var(--ffm);font-size:12.5px; color:var(--c);font-weight:700} @supports (animation-timeline: view()){ @media(prefers-reduced-motion:no-preference){ html.has-js .tl-row .body{border-image:linear-gradient(180deg,var(--a),var(--line2)) 1; animation:spine .01s linear both;animation-timeline:view();animation-range:entry 0% entry 60%} } } @keyframes spine{from{border-image-source:linear-gradient(180deg,var(--line2),var(--line2))} to{border-image-source:linear-gradient(180deg,var(--a),var(--line2))}} /* ============================================================ BIZ SEGMENT CARDS (3D tilt targets) ============================================================ */ .biz-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line2); border-top:2px solid var(--a);border-left:1px solid var(--line2);border-right:1px solid var(--line2); border-bottom:1px solid var(--line2)} @media(min-width:920px){.biz-grid{grid-template-columns:repeat(3,1fr)}} .biz-card{background:rgba(255,255,255,.86);padding:clamp(24px,3vw,34px); display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden; transform-style:preserve-3d;will-change:transform} .biz-card .glare{position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(480px circle at var(--gx,50%) var(--gy,50%),rgba(29,111,242,.07),transparent 60%); transition:opacity .3s} .biz-card:hover .glare{opacity:1} .biz-card .bn{font-family:var(--ffm);font-size:10.5px;letter-spacing:.2em;color:var(--a)} .biz-card h3{font-size:clamp(17px,1.9vw,20px);line-height:1.55} .biz-card p{font-size:13.5px;color:var(--ink-dim);line-height:2;flex:1} .bstat{border-left:2px solid var(--a);padding:6px 0 6px 14px;font-size:12px;color:var(--ink-faint)} .bstat b{display:block;font-family:var(--ffm);font-size:14px;color:var(--ink);margin-bottom:2px} a.more{align-self:flex-start;font-size:12.5px;color:var(--ink);text-decoration:none; border-bottom:1px solid var(--line2);padding-bottom:2px;transition:color .2s,border-color .2s} a.more:hover{color:var(--a);border-color:var(--a)} /* ============================================================ EVIDENCE TILES (counters) ============================================================ */ .tiles{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden} @media(min-width:920px){.tiles{grid-template-columns:repeat(3,1fr)}} .tile{background:rgba(255,255,255,.82);padding:clamp(20px,2.6vw,30px);display:flex; flex-direction:column;gap:10px;transition:background .3s} .tile:hover{background:rgba(255,255,255,.96)} .tile .n{font-family:var(--ffm);font-weight:700;font-size:clamp(30px,3.6vw,44px);color:var(--ink); line-height:1.1;font-variant-numeric:tabular-nums} .tile .n small{font-size:.42em;color:var(--a);font-weight:600;margin-left:.1em} .tile .lbl{font-size:12px;color:var(--ink-dim);line-height:1.85} /* ============================================================ SNS CARDS ============================================================ */ .sns-cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden} @media(min-width:760px){.sns-cards{grid-template-columns:repeat(2,1fr)}} .sns-card{background:rgba(255,255,255,.82);padding:clamp(24px,3vw,30px);display:flex;flex-direction:column; gap:2px;transition:background .3s} .sns-card:hover{background:rgba(255,255,255,.97)} .sns-card .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px} .sns-card h3{font-size:17px;font-weight:800} .sns-card .platform-tag{font-family:var(--ffm);font-size:10px;letter-spacing:.16em;color:var(--bg); background:var(--a);padding:3px 10px;border-radius:999px;white-space:nowrap} .sns-card .handle{display:block;font-family:var(--ffm);font-size:11px;color:var(--ink-faint); margin-bottom:12px;letter-spacing:.05em} .sns-card .desc{font-size:13.5px;color:var(--ink-dim);line-height:1.85;margin-bottom:16px} .sns-card .sample{background:var(--bg3);border:1px solid var(--line);border-left:2px solid var(--b); border-radius:2px;padding:14px 16px;margin-bottom:16px} .sns-card .sample p{font-size:14px;line-height:1.7;color:var(--ink)} .sns-card .sample .date{display:block;margin-top:8px;font-family:var(--ffm);font-size:10.5px; color:var(--ink-faint);letter-spacing:.06em} .sns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .sns a{font-family:var(--ffm);font-size:12px;letter-spacing:.06em;color:var(--ink-dim); border:1px solid var(--line2);border-radius:999px;padding:9px 20px;text-decoration:none; transition:color .2s,border-color .2s,box-shadow .3s} .sns a:hover{color:var(--ink);border-color:var(--a);box-shadow:0 0 18px rgba(29,111,242,.2)} /* ============================================================ INVESTOR — ROAI hero + orbit + stat pairs ============================================================ */ .roai-wrap{position:relative} .orbit{position:absolute;right:-60px;top:40px;width:min(420px,42vw);aspect-ratio:1; opacity:.5;pointer-events:none;z-index:0} .orbit .ring{fill:none;stroke:rgba(29,111,242,.25);stroke-width:1} .orbit .node{fill:var(--a)} @media(prefers-reduced-motion:no-preference){ .orbit .spin1{transform-origin:center;animation:spin 60s linear infinite} .orbit .spin2{transform-origin:center;animation:spin 90s linear infinite reverse} .orbit .spin3{transform-origin:center;animation:spin 45s linear infinite} } @keyframes spin{to{transform:rotate(360deg)}} .roai-stat{position:relative;z-index:1;display:flex;gap:clamp(20px,4vw,44px);align-items:flex-start; flex-wrap:wrap;margin-top:8px} .roai-stat .big{font-family:var(--ffm);font-weight:700;font-size:clamp(72px,11vw,130px);line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 40px rgba(29,111,242,.25));font-variant-numeric:tabular-nums} .roai-stat .big small{font-size:.3em;-webkit-text-fill-color:var(--ink);color:var(--ink)} .roai-stat>div:last-child{max-width:520px} .tag-solo{margin-bottom:10px} .tag-solo .tag{font-family:var(--ffm);font-size:10px;letter-spacing:.14em;color:var(--bg); background:var(--a);padding:3px 10px;border-radius:999px} .roai-stat .desc{font-size:13.5px;color:var(--ink-dim);line-height:2} .roai-formula{font-family:var(--ffm);font-size:12.5px;color:var(--a);margin-top:10px; letter-spacing:.02em;overflow-x:auto;white-space:nowrap;padding-bottom:4px} .whyq{display:inline-block;margin-top:12px;font-family:var(--ffm);font-size:11px;letter-spacing:.08em; color:var(--ink-dim);background:none;border:1px solid var(--line2);border-radius:999px; padding:6px 14px;cursor:pointer;transition:color .2s,border-color .2s} .whyq:hover{color:var(--a);border-color:var(--a)} .tip{background:#ffffff;color:var(--ink-dim);border:1px solid var(--line2); border-radius:6px;padding:20px 24px;max-width:440px;font-size:13px;line-height:1.95; box-shadow:0 40px 90px -20px rgba(11,63,143,.3);margin:auto} .tip::backdrop{background:rgba(11,34,57,.35);backdrop-filter:blur(4px)} .tip b{color:var(--ink)} @media(prefers-reduced-motion:no-preference){ .tip:popover-open{animation:vt-in .35s var(--ease-out) both} @starting-style{.tip:popover-open{opacity:0;transform:translateY(20px)}} } .stat-pairs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden} @media(min-width:860px){.stat-pairs{grid-template-columns:repeat(3,1fr)}.stat-pairs.two{grid-template-columns:repeat(2,1fr)}} .stat-pair{background:rgba(255,255,255,.82);padding:clamp(18px,2.4vw,26px);transition:background .3s} .stat-pair:hover{background:rgba(255,255,255,.96)} .sp-lbl{font-family:var(--ffm);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:8px} .sp-val{font-family:var(--ffm);font-weight:700;font-size:clamp(19px,2.3vw,25px); font-variant-numeric:tabular-nums} .sp-sub{margin-top:6px;font-size:11.5px;color:var(--ink-dim);line-height:1.8} /* ============================================================ COMPANY — overview table ============================================================ */ .glass{background:rgba(255,255,255,.72);border:1px solid var(--line2);border-radius:4px; backdrop-filter:blur(6px)} .co-card{padding:clamp(6px,1vw,10px) clamp(22px,3vw,34px)} .co-grid{display:flex;flex-direction:column} .co{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:18px 0; border-bottom:1px solid var(--line);font-size:14px} .co:last-child{border-bottom:0} @media(max-width:640px){.co{grid-template-columns:1fr;gap:4px}} .co dt{color:var(--ink-faint);font-size:12.5px;padding-top:2px} .co dd{color:var(--ink);line-height:1.9} /* ============================================================ GATES (入口) ============================================================ */ .gates{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden} @media(min-width:920px){.gates{grid-template-columns:repeat(3,1fr)}} .gate{background:rgba(255,255,255,.82);padding:clamp(24px,3vw,32px);display:flex; flex-direction:column;gap:12px;transition:background .3s} .gate:hover{background:rgba(255,255,255,.96)} .gate .top{display:flex;align-items:center;justify-content:space-between;gap:10px} .gate h3{font-size:17px;font-weight:800} .gate .badge{font-family:var(--ffm);font-size:10px;letter-spacing:.12em;color:var(--a); border:1px solid rgba(29,111,242,.4);border-radius:2px;padding:3px 9px;white-space:nowrap} .gate p{font-size:13px;color:var(--ink-dim);line-height:2} .gate a{color:var(--a)} /* ============================================================ PAGER (前後ページ導線) ============================================================ */ .pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border-top:1px solid var(--line)} .pager a{display:flex;flex-direction:column;gap:8px;padding:clamp(28px,4vw,44px) clamp(20px,5vw,64px); background:var(--bg);text-decoration:none;transition:background .3s} .pager a:hover{background:var(--bg2)} .pager .dir{font-family:var(--ffm);font-size:10.5px;letter-spacing:.2em;color:var(--ink-faint)} .pager .pt{font-size:clamp(16px,2vw,21px);font-weight:800;color:var(--ink); display:flex;align-items:center;gap:12px} .pager .pt .ar{color:var(--a);transition:transform .3s var(--spring)} .pager a.next{text-align:right;align-items:flex-end} .pager a.next:hover .ar{transform:translateX(6px)} .pager a.prev:hover .ar{transform:translateX(-6px)} .pager a.solo{grid-column:1 / -1} /* ============================================================ IRON CONSOLE (index) — typed terminal card ============================================================ */ .console{margin-top:clamp(40px,5vw,60px);max-width:640px;background:rgba(8,8,12,.85); border:1px solid var(--line2);border-radius:6px;overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.8)} .console .bar{display:flex;align-items:center;gap:6px;padding:10px 14px; border-bottom:1px solid var(--line);background:rgba(16,16,24,.8)} .console .bar i{width:9px;height:9px;border-radius:50%;background:var(--bg4);display:block} .console .bar i:nth-child(1){background:rgba(251,113,133,.7)} .console .bar i:nth-child(2){background:rgba(183,121,31,.7)} .console .bar i:nth-child(3){background:rgba(18,214,160,.7)} .console .bar span{margin-left:8px;font-family:var(--ffm);font-size:10px;color:var(--ink-faint); letter-spacing:.1em} .console pre{font-family:var(--ffm);font-size:12px;line-height:1.9;color:var(--ink-dim); padding:18px 20px;white-space:pre-wrap;min-height:150px} .console pre .p{color:var(--a)} .console pre .ok{color:var(--c)} /* ============================================================ FOOTER ============================================================ */ footer{border-top:1px solid var(--line)} footer .wrap{padding-top:clamp(32px,5vw,48px);padding-bottom:clamp(32px,5vw,48px)} .foot-cols{display:flex;flex-wrap:wrap;gap:28px 60px;justify-content:space-between;margin-bottom:34px} .foot-brand{display:flex;align-items:center;gap:10px} .foot-logo{display:block;height:20px;width:auto;opacity:.85} .foot-brand .fb-t{font-family:var(--ffm);font-size:12px;letter-spacing:.1em;color:var(--ink-dim)} .foot-nav{display:flex;flex-wrap:wrap;gap:8px 26px} .foot-nav a{font-size:12.5px;color:var(--ink-dim);text-decoration:none;transition:color .2s} .foot-nav a:hover{color:var(--a)} .foot-row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between; padding-top:20px;border-top:1px solid var(--line); font-family:var(--ffm);font-size:11px;color:var(--ink-faint);letter-spacing:.06em} .foot-row a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px} .foot-row a:hover{color:var(--a)} .foot-links{display:flex;gap:18px;flex-wrap:wrap} .foot-clock{font-variant-numeric:tabular-nums} /* ============================================================ CUSTOM CURSOR (fine pointers only; JS adds html.cursor-on) ============================================================ */ @media(pointer:fine){ html.cursor-on,html.cursor-on a,html.cursor-on button,html.cursor-on label, html.cursor-on summary{cursor:none} .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:400;pointer-events:none; border-radius:50%;mix-blend-mode:difference;opacity:0} html.cursor-on .cur-dot,html.cursor-on .cur-ring{opacity:1} .cur-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)} .cur-ring{width:30px;height:30px;border:1.4px solid #fff;transform:translate(-50%,-50%); transition:width .25s var(--ease-out),height .25s var(--ease-out)} html.cur-hover .cur-ring{width:52px;height:52px} } @media(prefers-reduced-motion:reduce),(pointer:coarse){ .cur-dot,.cur-ring{display:none !important} } /* ============================================================ MISC / UTILITIES ============================================================ */ .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .quote-block{max-width:900px;margin:0 auto;text-align:center;padding:clamp(20px,3vw,40px) 0} .quote-block .q{font-size:clamp(22px,3.4vw,38px);font-weight:800;line-height:1.7;letter-spacing:.04em} .quote-block .qs{margin-top:18px;font-family:var(--ffm);font-size:11.5px;letter-spacing:.14em; color:var(--ink-faint)} .center-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.6vw,44px)} .btn{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700; color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:13px 30px; text-decoration:none;transition:border-color .25s,box-shadow .3s,color .25s; will-change:transform;position:relative;overflow:hidden} .btn::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s} .btn:hover{border-color:var(--a);box-shadow:0 0 30px rgba(29,111,242,.3)} .btn .ar{color:var(--a)} .btn-solid{background:var(--a);color:var(--bg);border-color:var(--a)} .btn-solid .ar{color:var(--bg)} table{border-collapse:collapse} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media print{ .topnav,.nav-mobile,.progress,.cur-dot,.cur-ring,.grain{display:none !important} body{background:#fff;color:#000} } /* v7.1 revision (2026-08-14): ROAI emphasis + SNS brand icons */ .hnc-stat.main b{font-size:clamp(38px,4.8vw,50px)} .hnc-stat b .count{font-size:inherit;color:inherit} .sns-card .top h3{display:flex;align-items:center;gap:8px} .sns-card .brand-ic{width:17px;height:17px;fill:currentColor;opacity:.92;flex:none} /* dropdown hover bridge: covers the gap between tab and panel so hover is not lost on the way down */ .dd-panel::before{content:"";position:absolute;left:-8px;right:-8px;top:-16px;height:16px} /* ============================================================ V8 LIGHT THEME ADDITIONS (bright future / white x blue x green) ============================================================ */ /* index hero: sea-of-light gradient behind the neural canvas */ .hero{background: radial-gradient(1200px 700px at 78% -10%, rgba(0,194,224,.16), transparent 60%), radial-gradient(900px 520px at 6% 94%, rgba(18,214,160,.13), transparent 60%), linear-gradient(180deg,#fbfdff 0%, #eaf4fd 46%, #d9eefa 78%, #d2ecf6 100%)} /* subpage heroes get a soft light wash too */ .page-hero{background: radial-gradient(900px 420px at 82% -20%, rgba(0,194,224,.12), transparent 60%), radial-gradient(700px 380px at 4% 110%, rgba(18,214,160,.08), transparent 60%), linear-gradient(180deg,#fbfdff 0%, var(--bg) 100%)} /* white logo asset -> deep navy on the light page */ .brand-logo{filter:invert(1) brightness(.32) sepia(1) hue-rotate(185deg) saturate(2.6)} .foot-logo{filter:invert(1) brightness(.32) sepia(1) hue-rotate(185deg) saturate(2.6);opacity:.9} /* the iron console stays a dark terminal - intentional contrast */ .console{border-color:rgba(255,255,255,.16)} .console pre{color:rgba(233,244,252,.78)} .console .bar{border-bottom-color:rgba(255,255,255,.12)} .console .bar span{color:rgba(233,244,252,.5)} .console pre .p{color:#67e8f9} .console pre .ok{color:#34d399} /* cards get soft blue elevation instead of dark-glass */ .biz-card,.tile,.credo-item,.sns-card,.stat-pair,.goal,.paths a{box-shadow:inset 0 0 0 0 transparent} .biz-grid,.tiles,.credo-grid,.sns-cards,.stat-pairs,.goal-row,.paths{box-shadow:0 18px 44px -22px rgba(11,63,143,.16)} /* green accents: status chip + stat underline chips */ .bstat{border-left-color:var(--c);background:rgba(18,214,160,.07);padding:8px 12px 8px 14px;border-radius:0 6px 6px 0} .sub-head .tag2{border-color:rgba(18,214,160,.45);color:#0a8f6d;background:rgba(18,214,160,.07)} .hnc-tag{background:var(--c)} /* ============================================================ V8: USE-CASE CARDS (caio.html) + CONTACT FORM + chip spans ============================================================ */ .uc-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:4px;overflow:hidden; box-shadow:0 18px 44px -22px rgba(11,63,143,.16)} @media(min-width:760px){.uc-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1080px){.uc-grid{grid-template-columns:repeat(3,1fr)}} .uc-card{background:rgba(255,255,255,.82);padding:clamp(22px,2.8vw,30px); display:flex;flex-direction:column;gap:12px;transition:background .3s} .uc-card:hover{background:rgba(255,255,255,.96)} .uc-card .cn{font-family:var(--ffm);font-size:11px;color:var(--a);letter-spacing:.16em} .uc-card h3{font-size:17.5px;line-height:1.6} .uc-card dl{display:flex;flex-direction:column;gap:10px} .uc-card dt{font-family:var(--ffm);font-size:10px;letter-spacing:.16em;color:#0a8f6d; background:rgba(18,214,160,.08);border:1px solid rgba(18,214,160,.35);border-radius:2px; padding:2px 8px;display:inline-block;width:fit-content;margin-bottom:3px} .uc-card dd{font-size:13px;color:var(--ink-dim);line-height:1.9} .uc-note{margin-top:18px;font-size:11.5px;color:var(--ink-faint)} .pillars-strip span{font-family:var(--ffm);font-size:11.5px;letter-spacing:.1em;color:var(--ink-dim); border:1px solid var(--line2);border-radius:999px;padding:9px 18px} .cform{display:flex;flex-direction:column;gap:16px;max-width:640px;margin-top:22px} .cf-type{border:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .cf-type legend{font-size:12.5px;color:var(--ink-faint);margin-bottom:8px} .cf-type label{font-size:13px;color:var(--ink-dim);border:1px solid var(--line2);border-radius:999px; padding:8px 18px;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.7)} .cf-type input{position:absolute;opacity:0;pointer-events:none} .cf-type label:has(input:checked){color:#fff;background:var(--grad);border-color:transparent; box-shadow:0 6px 18px rgba(29,111,242,.35)} .cform input[type=text],.cform input[type=email],.cform textarea{ font:inherit;font-size:14px;color:var(--ink);background:rgba(255,255,255,.85); border:1px solid var(--line2);border-radius:6px;padding:13px 16px;width:100%} .cform input:focus,.cform textarea:focus{outline:2px solid var(--a);outline-offset:1px} .cform textarea{min-height:120px;resize:vertical} .cform .hp{position:absolute;left:-9999px;top:-9999px} .cform button{font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--grad); border:0;border-radius:999px;padding:15px 34px;cursor:pointer;align-self:flex-start; box-shadow:0 10px 30px rgba(29,111,242,.4);transition:transform .2s} .cform button:hover{transform:translateY(-2px)} .cform .sent{background:rgba(18,214,160,.1);border:1px solid rgba(18,214,160,.4);border-radius:6px; padding:14px 18px;font-size:14px;color:#0a8f6d;font-weight:700} /* ============================================================ V8.1: SNS cards - big brand-colored icons, larger handles/tags ============================================================ */ .sns-card .top h3{font-size:20px;display:flex;align-items:center;gap:10px} .sns-card .brand-ic{width:28px;height:28px;fill:currentColor;opacity:1;flex:none} .sns-card .ic-x{fill:#0f1419} .sns-card .ic-threads{fill:#000000} .sns-card .ic-tiktok{fill:#010101} .sns-card .ic-yt{fill:#FF0000} .sns-card .ic-ig{fill:#E4405F} .sns-card h3.note-brand{color:#41C9B4} .sns-card .handle{font-size:13px;color:var(--ink-dim);font-weight:700;letter-spacing:.04em} .sns-card .platform-tag{font-size:12px;letter-spacing:.14em;padding:5px 14px}