:root { --ink:#17211d; --muted:#6d7771; --green:#236b52; --green-dark:#174c3b; --lime:#d9efb3; --paper:#f6f7f3; --line:#dfe4dd; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; }
button,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { height:76px; padding:0 clamp(20px,5vw,76px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
.brand { display:flex; gap:11px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:white; background:var(--green); border-radius:10px; font-family:Outfit,sans-serif; font-weight:600; font-size:21px; transform:rotate(-3deg); }
.brand b,.brand small { display:block; font-family:Outfit,sans-serif; letter-spacing:.12em; }
.brand b { font-size:15px; }.brand small { color:var(--muted); font-size:8px; margin-top:1px; }
.top-actions { display:flex; align-items:center; gap:18px; }.demo-badge { font:600 10px Outfit,sans-serif; letter-spacing:.12em; color:var(--green); padding:7px 10px; background:#eef7e7; border-radius:99px; }.demo-badge i { width:6px;height:6px;background:#55a976;border-radius:50%;display:inline-block;margin-right:6px;box-shadow:0 0 0 3px #d5ead9; }.user-button { border:0; width:34px;height:34px;border-radius:50%;background:#edf0eb;color:var(--green-dark);font-weight:700; }
main { overflow:hidden; }.hero { padding:74px 20px 54px; text-align:center; background:radial-gradient(circle at 50% 22%,#fff 0,#f6f7f3 47%,#edf2e9 100%); position:relative; }.hero::before,.hero::after { content:"";position:absolute;border:1px solid rgba(35,107,82,.12);border-radius:50%;width:360px;height:360px; }.hero::before { left:-230px;top:-190px; }.hero::after { right:-250px;bottom:-280px; }
.eyebrow { color:var(--green); font:600 11px Outfit,sans-serif; letter-spacing:.24em; margin-bottom:20px; }.hero h1 { margin:0; font-size:clamp(34px,4.3vw,62px); letter-spacing:-.05em; line-height:1.22; }.hero h1 em { color:var(--green); font-style:normal; position:relative; }.hero h1 em::after { content:""; position:absolute; left:0;right:0;bottom:-5px;height:7px;background:var(--lime);z-index:-1;transform:skewX(-14deg); }.hero p { color:#5d6862; line-height:1.9; margin:25px 0 18px; font-size:14px; }.security-note { display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:white;border:1px solid var(--line);border-radius:99px;color:#66706a;font-size:11px;box-shadow:0 4px 20px rgba(38,63,50,.05); }.security-note span { display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e5f2d2;color:var(--green);font-weight:700; }
.workspace { width:min(1180px,calc(100% - 40px)); margin:0 auto 50px; display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start; }.chat-panel,aside section { background:white;border:1px solid var(--line);box-shadow:0 14px 50px rgba(36,58,47,.07); }.chat-panel { border-radius:20px;overflow:hidden; }.panel-head { height:62px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ebeeea; }.panel-head div { display:flex;align-items:center;gap:9px; }.panel-head strong { font-size:14px; }.panel-head>span { color:#98a19c;font:600 9px Outfit,sans-serif;letter-spacing:.16em; }.status-dot { width:8px;height:8px;background:#52a474;border-radius:50%;box-shadow:0 0 0 4px #e3f1e7; }
.messages { min-height:360px;max-height:520px;overflow-y:auto;padding:24px;background:linear-gradient(#fafbf8,#f7f9f5); }.message { display:flex;gap:10px;margin-bottom:18px;align-items:flex-start; }.message>div { max-width:82%;padding:13px 15px;border-radius:5px 15px 15px 15px;background:white;border:1px solid #e3e7e1;box-shadow:0 3px 12px rgba(30,50,40,.04); }.message p { margin:0;font-size:13px;line-height:1.85; }.message.user { flex-direction:row-reverse; }.message.user>div { background:var(--green);color:white;border:0;border-radius:15px 5px 15px 15px; }.avatar { flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--green);color:white;font-size:10px;font-weight:700; }.user .avatar { background:#dfe5df;color:#58625d; }.answer-label { color:var(--green);font-size:10px;font-weight:700;margin-bottom:5px;letter-spacing:.03em; }.loading>div { color:var(--muted); }.thinking { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px;animation:pulse 1s infinite; }
.citations { margin-top:14px;padding-top:12px;border-top:1px solid #e5e9e3;display:grid;gap:7px; }.citation-title { color:#8a948e;font-size:10px;font-weight:700; }.source-card { width:100%;border:1px solid #dfe5de;background:#f9fbf7;border-radius:10px;padding:9px;display:grid;grid-template-columns:24px 1fr auto;gap:8px;text-align:left;align-items:center;color:var(--ink); }.source-number { width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#dfedd2;color:var(--green);font-size:10px;font-weight:700; }.source-main strong,.source-main small { display:block; }.source-main strong { font-size:11px; }.source-main small { font-size:9px;color:var(--muted);margin-top:2px; }.match { color:var(--green);font-size:9px; }.source-detail { display:none;grid-column:2/4;color:#5e6963;font-size:10px;line-height:1.65;padding:7px 0 2px; }.source-card[aria-expanded="true"] .source-detail { display:block; }.no-source { margin-top:12px;padding:9px;border-radius:8px;background:#f4f5f2;color:var(--muted);font-size:11px; }
.composer { padding:16px 18px;border-top:1px solid #e7ebe5; }.composer form { display:flex;gap:10px;align-items:stretch; }.composer textarea { flex:1;resize:none;border:1px solid #d7ddd6;border-radius:12px;padding:12px 14px;outline:none;font-size:13px;line-height:1.5; }.composer textarea:focus { border-color:#6c9d87;box-shadow:0 0 0 3px rgba(35,107,82,.1); }.composer button { min-width:112px;border:0;border-radius:12px;padding:0 17px;background:var(--green);color:white;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:700; }.composer button:hover { background:var(--green-dark); }.composer button b { font-size:17px; }.composer>small { display:block;text-align:center;color:#9aa19d;font-size:9px;margin-top:9px; }
aside { display:grid;gap:16px; }aside section { border-radius:16px;padding:17px; }.aside-title { display:flex;align-items:center;gap:8px;margin-bottom:13px; }.aside-title>span { color:var(--green); }.aside-title strong { font-size:12px; }.aside-title small { margin-left:auto;color:#96a09a;font-size:9px; }.examples { display:grid;gap:7px; }.examples button { border:1px solid #e1e6df;background:#fafbf9;color:#4f5c55;text-align:left;border-radius:9px;padding:10px 11px;font-size:10px;line-height:1.5; }.examples button:hover { border-color:#8bb19e;background:#f1f7ed;color:var(--green); }.document-card { display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #edf0ec; }.document-card:first-child { border-top:0; }.doc-icon { width:33px;height:36px;border-radius:7px;background:#edf2e9;display:grid;place-items:center;color:var(--green);font-size:11px;font-weight:700; }.document-card strong,.document-card span { display:block; }.document-card strong { font-size:10px; }.document-card div span,.document-card time { color:#98a09b;font-size:8px;margin-top:3px; }.document-card time { white-space:nowrap; }
.architecture { width:min(900px,calc(100% - 40px));margin:0 auto 70px;padding:24px 28px;background:#193e31;color:white;border-radius:17px;display:flex;align-items:center;justify-content:space-between; }.architecture div { display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center; }.architecture div>span { grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(217,239,179,.14);color:var(--lime);font:600 9px Outfit,sans-serif; }.architecture strong { font-size:11px; }.architecture small { color:#a9beb5;font-size:8px;margin-top:2px; }.architecture>b { color:#718d81;font-weight:400; }
.demo-information { width:min(1060px,calc(100% - 40px));margin:0 auto 80px;display:grid;grid-template-columns:1fr 330px;gap:42px;align-items:center; }.info-label,.consult-card>span { color:var(--green);font:600 10px Outfit,sans-serif;letter-spacing:.18em; }.info-copy h2 { margin:12px 0 14px;font-size:clamp(24px,3vw,38px);line-height:1.4;letter-spacing:-.04em; }.info-copy>p { margin:0;color:#69736d;font-size:12px;line-height:2;max-width:670px; }.privacy-points { display:flex;flex-wrap:wrap;gap:8px;margin-top:18px; }.privacy-points span { padding:7px 10px;background:#edf3e8;color:var(--green-dark);border-radius:99px;font-size:9px;font-weight:600; }.consult-card { background:white;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 14px 50px rgba(36,58,47,.08); }.consult-card h3 { margin:10px 0;font-size:20px;line-height:1.55; }.consult-card p { color:var(--muted);font-size:10px;line-height:1.7;margin:0 0 16px; }.line-button { display:flex;align-items:center;justify-content:space-between;background:#2bb741;color:white;text-decoration:none;border-radius:11px;padding:12px 14px;font-size:11px;font-weight:700; }.line-button:hover { background:#209d34; }.site-link { display:block;text-align:center;margin-top:12px;color:var(--green);font-size:9px; }.site-link:hover { color:var(--green-dark); }
footer { padding:24px clamp(20px,5vw,76px);border-top:1px solid var(--line);background:white;display:flex;justify-content:space-between;color:#8d9691;font-size:9px; }footer>span { font-family:Outfit,sans-serif;letter-spacing:.17em; }footer a { color:var(--green); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@keyframes pulse { 50% { opacity:.3;transform:scale(.7); } }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; }.workspace aside { grid-template-columns:1fr 1fr; }.architecture { gap:10px; }.architecture div { display:block;text-align:center; }.architecture div>span { margin:0 auto 6px; }.architecture small { display:block; }.demo-information { grid-template-columns:1fr;gap:24px; }.consult-card { max-width:520px; } }
@media (max-width:620px) { .topbar { height:64px;padding:0 16px; }.demo-badge { display:none; }.hero { padding:54px 18px 38px; }.hero h1 { font-size:34px; }.hero p br { display:none; }.workspace { width:calc(100% - 24px); }.workspace aside { grid-template-columns:1fr; }.messages { padding:16px;min-height:330px; }.message>div { max-width:88%; }.composer form { display:block; }.composer button { width:100%;height:44px;margin-top:8px; }.architecture { display:grid;grid-template-columns:1fr;padding:22px; }.architecture>b { transform:rotate(90deg);text-align:center; }.architecture div { display:grid;text-align:left; }.architecture div>span { margin:0; }.architecture small { display:block; }.demo-information { width:calc(100% - 30px); }.privacy-points { display:grid; }.consult-card { padding:20px; }footer { display:block;text-align:center;line-height:1.8; } }