:root{--bg:#f5f5f0;--ink:#111;--paper:#e5e5e2;--gold:#b8a472;--pad:clamp(24px,5.55vw,80px);--en:"Outfit",sans-serif;--jp:"Gothic A1",sans-serif;--mono:"Geist Mono",monospace} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:80px;background:rgba(245,245,240,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(17,17,17,.08)}.site-header__inner{height:100%;max-width:1440px;margin:auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;font-family:var(--en)}.brand__name{font-size:18px;font-weight:900}.brand__meta{font:10px var(--mono);color:var(--gold)}.primary-nav{display:flex;gap:48px;font:700 13px var(--en)}.accent{color:var(--gold)}.menu-toggle{display:none;border:0;background:none;font:11px var(--mono)} .intro-experience{height:500vh;background:var(--bg)}.intro-pin{height:100vh;position:sticky;top:0;overflow:hidden}.intro-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.intro-scene--hero{padding:120px var(--pad) 64px;background:var(--bg)}.hero-grid{width:min(100%,1440px);margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(64px,7vw,120px);align-items:end}.hero-eyebrow,.section-label{display:flex;align-items:center;gap:8px}.hero-eyebrow{font:800 13px var(--en);margin:0 0 32px}.hero-eyebrow span,.section-label span{width:6px;height:6px;background:var(--gold);display:inline-block}.hero-title{margin:0;font:900 clamp(88px,10.28vw,148px)/.82 var(--en);letter-spacing:-.065em}.hero-title>span{display:block}.hero-title i{color:var(--gold);font-style:normal}.hero-message{display:flex;flex-direction:column;gap:28px;max-width:480px;padding-bottom:20px}.hero-rule{height:1px;background:var(--gold)}.hero-message h2{margin:0;font-size:28px;line-height:1.55}.hero-message p{margin:0;color:rgba(17,17,17,.6);font-size:14px;line-height:1.9}.hero-message a{font-weight:800;font-size:13px} .intro-scene--think,.intro-scene--questions{background:var(--bg)}.think-word{position:relative;font:900 clamp(120px,18vw,280px)/.8 var(--en);letter-spacing:-.07em}.think-word span{position:absolute;right:-.14em;bottom:.08em;width:.12em;height:.12em;border-radius:50%;background:var(--gold)}.question{position:absolute;display:flex;flex-direction:column;gap:8px}.question strong{font:900 clamp(44px,5.6vw,80px)/.95 var(--en);letter-spacing:-.05em}.question span{font-size:15px;font-weight:800}.q1{left:14%;top:22%}.q2{right:16%;top:34%}.q3{left:34%;bottom:16%}.question-dot{position:absolute;left:58%;top:49%;width:12px;height:12px;border-radius:50%;background:var(--gold)} .intro-scene--philosophy{background:var(--ink);color:var(--paper)}.orbit{position:absolute;width:min(1120px,84vw);aspect-ratio:1}.orbit-ring{position:absolute;inset:0;border:1px solid rgba(184,164,114,.2);border-radius:50%}.orbit-label{position:absolute;color:var(--gold);font:11px var(--mono);letter-spacing:.3em}.o1{top:2%;left:51%}.o2{top:22%;right:3%}.o3{right:2%;bottom:19%}.o4{left:34%;bottom:2%}.o5{left:2%;bottom:22%}.philosophy-copy{z-index:2;text-align:center;font-size:clamp(26px,2.8vw,40px);font-weight:900;line-height:1.65} .section{padding:clamp(96px,11vw,160px) var(--pad)}.inner{max-width:1440px;margin:auto}.dark{background:var(--ink);color:var(--paper)}.light{background:var(--bg);color:var(--ink)}.section-head{display:flex;flex-direction:column;gap:24px;margin-bottom:80px}.section-label,.kicker{margin:0;font:700 12px var(--mono);letter-spacing:.18em}.gold{color:var(--gold)}.section-head h2,.split-head h2{margin:0;font-size:clamp(42px,4vw,58px);line-height:1.2;letter-spacing:-.045em}.split-head{display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:end;margin-bottom:80px}.split-head h2{font-family:var(--en);margin-top:16px}.split-head h2 span{color:var(--gold)}.split-head>p{margin:0;color:rgba(255,255,255,.6);font-size:14px;line-height:1.9}.process-list{border-top:1px solid rgba(255,255,255,.1)}.process-row{display:grid;grid-template-columns:52px 220px 1fr;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.1)}.process-row>span{color:var(--gold);font:13px var(--mono)}.process-row strong{font:800 28px var(--en)}.process-row em{font-style:normal;color:rgba(255,255,255,.6);font-size:15px} .service-row{display:grid;grid-template-columns:360px 1fr;gap:48px;padding:28px 0 56px;border-top:1px solid rgba(17,17,17,.1)}.service-row h3{margin:0 0 12px;font:900 32px var(--en)}.service-row>div:first-child p{color:var(--gold);font-size:13px;font-weight:800}.service-row>div:last-child>p{margin:0;font-size:18px;line-height:1.85;font-weight:700}.tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.tags span{border:1px solid var(--gold);padding:7px 12px;border-radius:3px;font:11px var(--mono)} .ai-grid,.background-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.ai-grid>div:first-child>p{margin:0 0 24px;color:rgba(255,255,255,.62);font-size:18px;line-height:1.9}.ai-grid small{color:var(--gold);line-height:1.8}.ai-list{display:flex;flex-direction:column;gap:14px}.ai-list>div{display:grid;grid-template-columns:160px 1fr;gap:22px;padding:18px 24px;border:1px solid rgba(255,255,255,.1);background:rgba(184,164,114,.08)}.ai-list strong{color:var(--gold);font:700 12px var(--mono)}.ai-list span{font-size:14px;color:rgba(255,255,255,.78)}.intro-copy{max-width:760px;margin:0;color:rgba(17,17,17,.6);font-size:18px;line-height:1.8} .chat-box{border:1px solid var(--gold);border-radius:8px;background:#fff;overflow:hidden}.chat-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:rgba(184,164,114,.1);border-bottom:1px solid rgba(17,17,17,.08);font:12px var(--mono)}.chat-bar>div{display:flex;gap:12px;align-items:center}.chat-bar>div span{width:8px;height:8px;background:var(--gold)}.chat-bar small{color:var(--gold)}.chat-body{padding:40px;display:flex;flex-direction:column;gap:36px}.chat-msg{display:flex;gap:16px;align-items:flex-start}.chat-msg b{width:40px;height:40px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font:900 12px var(--en)}.chat-msg p{margin:0;background:var(--bg);padding:22px 24px;border-radius:0 12px 12px 12px;font-weight:800}.quick{padding-left:56px}.quick>small{color:var(--gold);font:700 11px var(--mono)}.quick>div{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.quick button{border:1px solid var(--ink);border-radius:999px;background:#fff;padding:12px 18px;font-weight:800}.chat-input{display:grid;grid-template-columns:1fr auto;gap:16px;border-top:1px solid rgba(17,17,17,.1);padding-top:14px}.chat-input input{border:0;outline:0}.chat-input button{border:0;background:var(--ink);color:#fff;padding:10px 20px}.chat-note{margin:-18px 0 0;color:var(--gold);font:11px var(--mono)}.center-link{display:block;text-align:center;margin-top:32px;font-weight:800} .article-list{border-top:1px solid rgba(17,17,17,.1)}.article-row{display:grid;grid-template-columns:96px 1fr 32px;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(17,17,17,.1)}.article-row>span:first-child{color:var(--gold);font:700 13px var(--mono)}.article-row h3,.article-row h2{margin:0;font-size:18px}.background-title{font:900 40px/1.05 var(--en);letter-spacing:-.04em}.background-grid p{color:rgba(17,17,17,.6);line-height:1.9}.career{margin-top:34px;font:700 13px var(--en);line-height:2;color:var(--gold)} .contact-title{margin:28px 0 0;font:900 clamp(72px,8vw,116px)/.84 var(--en);letter-spacing:-.065em}.contact-title__light,.contact-title__light .outline-anim-fill{font-weight:300}.contact-copy>div{height:1px;background:var(--gold);margin-bottom:36px}.contact-copy>p{font-size:20px;line-height:1.8;font-weight:800}.btn{display:flex;justify-content:center;padding:18px 28px;margin-top:14px;font-weight:900}.gold-btn{background:var(--gold);color:var(--ink)}.outline-btn{border:1px solid var(--gold)}.site-footer{background:var(--ink);color:var(--paper);border-top:1px solid rgba(255,255,255,.1)}.site-footer__inner{max-width:1440px;margin:auto;padding:56px var(--pad);display:flex;justify-content:space-between;font:10px var(--mono)}.site-footer__inner div{display:flex;gap:30px;color:rgba(255,255,255,.6)} .archive-shell,.single-shell{padding:160px var(--pad) 120px;min-height:100vh}.archive-inner,.single-article{max-width:1100px;margin:auto}.archive-shell h1,.single-article h1{font-size:clamp(44px,6vw,82px);line-height:1.05;letter-spacing:-.05em;margin:32px 0 64px}.date{color:var(--gold);font:12px var(--mono)}.single-content{max-width:760px;font-size:17px;line-height:2} @media(max-width:1024px){.hero-grid,.split-head,.ai-grid,.background-grid,.contact-grid{grid-template-columns:1fr}.hero-grid{gap:52px}.service-row{grid-template-columns:1fr}.split-head,.ai-grid,.background-grid,.contact-grid{gap:48px}} @media(max-width:767px){.site-header{height:64px}.brand__meta{display:none}.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--bg);color:var(--ink)}.primary-nav.is-open{display:flex}.primary-nav a{padding:16px var(--pad);border-top:1px solid rgba(17,17,17,.1)}.intro-experience{height:430vh}.intro-scene--hero{padding-top:100px;align-items:flex-start}.hero-grid{display:block}.hero-title{font-size:20vw}.hero-message{margin-top:56px}.think-word{font-size:27vw}.question strong{font-size:14vw}.q1{left:8%;top:22%}.q2{right:8%;top:43%}.q3{left:12%;bottom:20%}.orbit{width:150vw}.philosophy-copy{font-size:22px;padding:0 24px}.section-head h2,.split-head h2{font-size:38px}.process-row{grid-template-columns:40px 1fr;gap:12px}.process-row strong{font-size:23px}.process-row em{grid-column:2;font-size:13px}.ai-list>div{grid-template-columns:1fr}.quick{padding-left:0}.chat-body{padding:24px}.chat-msg{display:block}.chat-msg b{margin-bottom:10px}.article-row{grid-template-columns:64px 1fr 20px;gap:12px}.article-row h3,.article-row h2{font-size:15px}.site-footer__inner{flex-direction:column;gap:20px}.site-footer__inner div{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}} .contact-page{background:var(--bg)}.contact-page__inner{max-width:1440px;margin:auto}.contact-page__hero{padding:170px var(--pad) 90px;border-bottom:1px solid rgba(17,17,17,.08)}.contact-page__head-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:end;margin-top:64px}.contact-page__head-grid h1{margin:0;font:900 clamp(86px,10vw,150px)/.82 var(--en);letter-spacing:-.065em}.contact-page__head-grid h1 span{color:var(--gold)}.contact-page__lead{display:flex;flex-direction:column;gap:34px}.contact-page__lead>div{height:1px;background:var(--gold)}.contact-page__lead p{margin:0;font-size:20px;line-height:1.85;font-weight:800} .contact-form-section{padding:100px var(--pad) 150px}.howdee-form{max-width:1180px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px 56px}.field{display:flex;flex-direction:column;gap:14px}.field--full{grid-column:1/-1}.field__label{font:700 12px var(--mono);letter-spacing:.14em}.field__label i{font-style:normal;color:var(--gold);font-size:9px;margin-left:8px}.field input,.field textarea{width:100%;border:0;border-bottom:1px solid rgba(17,17,17,.22);background:transparent;padding:10px 0 16px;font:17px var(--jp);outline:0}.field textarea{resize:vertical;min-height:220px;line-height:1.8}.field input:focus,.field textarea:focus{border-color:var(--gold)}.field__error{min-height:16px;color:#a54133;font-size:11px;font-weight:700}.privacy-check{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:700}.privacy-error{grid-column:1/-1;margin-top:-34px}.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;margin-top:66px;padding-top:28px;border-top:1px solid rgba(17,17,17,.1)}.form-primary-button,.form-secondary-button{border:0;cursor:pointer;min-width:290px;padding:20px 26px;font-family:var(--en);font-weight:800;display:flex;justify-content:space-between;align-items:center}.form-primary-button{background:var(--ink);color:#fff}.form-primary-button b{color:var(--gold)}.form-secondary-button{background:transparent;border:1px solid rgba(17,17,17,.28);color:var(--ink);justify-content:center;min-width:180px} .modal-open{overflow:hidden}.confirm-modal,.thanks-overlay{position:fixed;inset:0;z-index:1000;opacity:0;visibility:hidden;transition:.25s}.confirm-modal.is-open,.thanks-overlay.is-open{opacity:1;visibility:visible}.confirm-modal__backdrop{position:absolute;inset:0;background:rgba(17,17,17,.72);backdrop-filter:blur(8px)}.confirm-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100vw - 40px));max-height:88vh;overflow:auto;background:var(--bg);padding:48px}.confirm-modal__top{display:flex;justify-content:space-between;gap:30px;padding-bottom:32px;border-bottom:1px solid rgba(17,17,17,.1)}.modal-kicker{margin:0 0 12px;color:var(--gold);font:700 11px var(--mono);letter-spacing:.18em}.confirm-modal__top h2{margin:0;font-size:30px}.modal-close{border:0;background:none;font:300 34px/1 var(--en);cursor:pointer}.confirm-list{margin:0}.confirm-list>div{display:grid;grid-template-columns:150px 1fr;gap:30px;padding:22px 0;border-bottom:1px solid rgba(17,17,17,.1)}.confirm-list dt{font:700 11px var(--mono);color:var(--gold)}.confirm-list dd{margin:0;line-height:1.8;white-space:pre-wrap}.confirm-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:36px}.send-error{color:#a54133;text-align:right;font-size:12px}.thanks-overlay{background:var(--ink);color:var(--paper);display:grid;place-items:center;text-align:center}.thanks-overlay h2{margin:12px 0 28px;font:900 clamp(82px,11vw,160px)/.8 var(--en);letter-spacing:-.07em}.thanks-overlay h2 span{color:var(--gold)}.thanks-overlay p{font-size:18px;line-height:1.9;font-weight:800}.thanks-overlay small{color:var(--gold);font:10px var(--mono)} @media(max-width:767px){.contact-page__hero{padding-top:120px}.contact-page__head-grid{grid-template-columns:1fr;gap:48px}.contact-page__head-grid h1{font-size:24vw}.contact-form-section{padding-top:70px}.form-grid{grid-template-columns:1fr}.field--full,.privacy-error{grid-column:auto}.form-footer{grid-template-columns:1fr}.form-primary-button,.form-secondary-button{width:100%;min-width:0}.confirm-modal__panel{padding:28px 22px}.confirm-list>div{grid-template-columns:1fr;gap:8px}.confirm-actions{flex-direction:column-reverse}} /* v0.2.3 — true font outlines converted to SVG paths */ .hero-path-line{position:relative;display:block;width:max-content;height:.82em} .hero-path-sizer{visibility:hidden;display:block;white-space:nowrap} .hero-word-svg{position:absolute;left:0;top:.02em;width:100%;height:.78em;overflow:visible} .hero-letter{fill:transparent;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;will-change:stroke-dashoffset,opacity} .hero-letter-fill{fill:var(--ink);stroke:none;opacity:0;will-change:opacity} .hero-path-line .hero-dot{position:absolute;right:-.12em;top:-.02em;color:var(--gold);font-style:normal;line-height:.82;display:block} /* v0.2.5 — reusable contour-to-fill typography */ .outline-anim-group{position:relative} .outline-anim-line{position:relative;display:block;width:max-content} .outline-anim-fill{position:relative;z-index:2;display:block} .outline-anim-svg{position:absolute;inset:.015em 0 0 0;width:100%;height:.82em;overflow:visible;pointer-events:none;z-index:1} .outline-glyph{fill:transparent;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;will-change:stroke-dashoffset,opacity} .outline-anim-group--light .outline-anim-svg{color:var(--paper)} .outline-anim-group--light .outline-anim-fill{color:inherit} .outline-gold-dot{color:var(--gold);font-weight:900} .contact-outline-title .outline-anim-svg{color:var(--ink)} .contact-outline-title .outline-anim-line>span>span{color:var(--gold)} .contact-outline-title .outline-anim-line{height:.82em} .contact-title .outline-anim-line{height:.84em} /* v0.2.6 — contrast normalization */ body{color:var(--ink)} :is(.scene,.section,.services,.ai-web,.ai-consult,.thinking,.background):not(.dark), :is(.scene,.section,.services,.ai-web,.ai-consult,.thinking,.background):not(.dark) p, :is(.scene,.section,.services,.ai-web,.ai-consult,.thinking,.background):not(.dark) li, :is(.scene,.section,.services,.ai-web,.ai-consult,.thinking,.background):not(.dark) small{ color:var(--ink); } .dark,.dark p,.dark li,.dark small, .contact-section,.contact-section p,.contact-section li,.contact-section small, .site-footer,.site-footer p,.site-footer li,.site-footer small{ color:var(--paper); } /* Keep intentional gold accents untouched */ .accent,.gold,.hero-dot,.outline-gold-dot,.question-dot{ color:var(--gold); } /* THINK uses the original live type so outline/fill are perfectly aligned */ .think-word{ will-change:clip-path,color,transform; } /* v0.2.9 — CSS owns the initial intro frame. No later scene can flash on reload. */ .intro-scene{z-index:1} .intro-scene--hero{z-index:4;opacity:1;visibility:visible} .intro-scene--think{z-index:3;opacity:0;visibility:hidden} .intro-scene--questions{z-index:2;opacity:0;visibility:hidden} .intro-scene--philosophy{z-index:1;opacity:0;visibility:hidden} /* Clean SVG implementation for the large THINK. scene */ .think-path-word{ position:relative; width:min(72vw,1040px); aspect-ratio:5962.4/1538; } .think-word-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .think-letter{ fill:transparent; stroke:var(--ink); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .think-letter-fill{fill:var(--ink)} .think-path-dot{ position:absolute; width:3.7%; aspect-ratio:1; right:-1.2%; bottom:7%; border-radius:50%; background:var(--gold); } @media(max-width:767px){ .think-path-word{width:88vw} } /* v0.3.0 — live HOWDEE AI consultation */ .chat-log{display:flex;flex-direction:column;gap:18px;max-height:520px;overflow:auto;padding-right:6px} .chat-msg--user{justify-content:flex-end} .chat-msg--user b{order:2;background:var(--ink);color:var(--paper)} .chat-msg--user p{order:1;background:var(--ink);color:var(--paper);border-radius:12px 0 12px 12px;max-width:min(78%,760px)} .chat-msg--ai p{max-width:min(82%,760px);line-height:1.75} .chat-input input{font:inherit;background:transparent;color:var(--ink);min-width:0} .chat-input button:disabled{opacity:.45;cursor:wait} .quick.is-used{opacity:.65} .chat-typing{display:inline-flex;gap:5px;align-items:center;min-width:36px} .chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:howdeeTyping 1s infinite ease-in-out} .chat-typing i:nth-child(2){animation-delay:.14s} .chat-typing i:nth-child(3){animation-delay:.28s} @keyframes howdeeTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} @media(max-width:767px){ .chat-body{padding:24px 18px;gap:26px} .quick{padding-left:0} .chat-msg--user p,.chat-msg--ai p{max-width:calc(100% - 52px)} .chat-input{grid-template-columns:1fr auto} .chat-input button{padding:10px 14px} } /* v0.3.1 — philosophy orbit refinements */ .orbit{position:relative;transform-origin:50% 50%} .orbit-inner-ring{ position:absolute;left:50%;top:50%;width:80%;height:80%; transform:translate(-50%,-50%); border:1px solid rgba(199,167,105,.22); border-radius:50%;pointer-events:none; } .orbit .orbit-label{ font-size:clamp(12px,1.05vw,16px); letter-spacing:.26em;line-height:1;white-space:nowrap; transform-origin:50% 50%;will-change:transform; } @media(max-width:767px){ .orbit .orbit-label{font-size:11px;letter-spacing:.20em} } /* v0.3.2 — orbit centering + final title colors */ /* Restore the orbit to the exact center of the philosophy scene. v0.3.1 accidentally changed it from absolute to relative. */ .intro-scene--philosophy .orbit{ position:absolute; left:50%; top:50%; width:min(1120px,84vw); aspect-ratio:1; transform-origin:50% 50%; margin:0; } /* GSAP owns translate/scale/rotation; xPercent/yPercent keeps its center fixed. */ .intro-scene--philosophy .orbit{ translate:-50% -50%; } /* Keep the second ring concentric. */ .intro-scene--philosophy .orbit-inner-ring{ left:50%; top:50%; width:80%; height:80%; transform:translate(-50%,-50%); } /* Footer CTA: all final text is white, including BUILD. */ .contact-title, .contact-title .outline-anim-fill, .contact-title .outline-gold-dot{ color:var(--paper) !important; } .contact-title .outline-anim-svg{ color:var(--paper) !important; } /* Contact hero: all final text is black, including the period. */ .contact-outline-title, .contact-outline-title .outline-anim-fill, .contact-outline-title .outline-anim-line>span>span{ color:var(--ink) !important; } .contact-outline-title .outline-anim-svg{ color:var(--ink) !important; } /* v0.3.3 — AI consultation usability refinements */ .chat-msg--user p{ color:#fff !important; } .chat-msg--user b{ color:#fff !important; } .quick button{ cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; } .quick button:hover, .quick button:focus-visible{ background:var(--ink); color:#fff; border-color:var(--ink); } .quick button:active{ transform:translateY(1px); } .chat-input{ align-items:stretch; gap:12px; border-top:1px solid rgba(17,17,17,.12); padding-top:22px; } .chat-input input{ min-height:58px; padding:0 18px; border:1px solid rgba(17,17,17,.22); border-radius:4px; background:#fff; font-size:16px; transition:border-color .2s ease,box-shadow .2s ease; } .chat-input input::placeholder{ color:rgba(17,17,17,.42); } .chat-input input:focus{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); } .chat-input button{ min-height:58px; min-width:92px; cursor:pointer; font-weight:800; transition:opacity .2s ease,background-color .2s ease; } .chat-input button:hover:not(:disabled){ background:#333; } @media(max-width:767px){ .chat-input{grid-template-columns:1fr;} .chat-input button{width:100%;} }