:root { --ink:#131711; --paper:#f1f0e9; --line:#c9c9bf; --acid:#d8ff36; --muted:#70746b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,"Noto Sans JP",sans-serif; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
header { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.17em; font-size:18px; }
.brand-mark { width:30px; height:30px; border:1.5px solid; border-radius:50%; display:grid; place-items:center; transform:rotate(-28deg); position:relative; }
.brand-mark:after { content:""; position:absolute; width:42px; border-top:1.5px solid; }
.brand-mark i { width:6px; height:6px; border-radius:50%; background:var(--acid); border:1px solid var(--ink); }
.header-right { display:flex; align-items:center; gap:26px; }.live,.eyebrow,.feed-head>span,footer { font:500 10px DM Mono,monospace; letter-spacing:.12em; }.live i { display:inline-block;width:6px;height:6px;background:#83c000;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #b8df8055; }
.icon-btn { border:0;background:none;cursor:pointer;padding:8px; }.icon-btn svg { width:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }.icon-btn.spinning svg { animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
main { width:min(1440px,92vw); margin:auto; }.hero { min-height:510px; padding:74px 0 50px; position:relative; overflow:hidden; border-bottom:1px solid var(--ink); }.eyebrow { margin-bottom:27px; }.eyebrow span { color:#8dbc00; margin:0 5px; }.hero h1 { font-size:clamp(58px,8vw,122px); line-height:.86; letter-spacing:-.065em; margin:0; font-weight:600; max-width:1100px; }.hero h1 em { font-family:Georgia,serif; font-weight:400; }.hero p { margin:38px 0 0; font-size:15px; line-height:1.9;color:#52564f; }
.orbit-art { position:absolute; right:2%; top:25%; width:290px;height:290px; }.planet { width:106px;height:106px;background:var(--ink);border-radius:50%;position:absolute;top:93px;left:92px;box-shadow:inset -18px -10px 0 #2e352a; }.ring { position:absolute;inset:35px;border:1px solid #74786f;border-radius:50%;transform:rotate(-22deg) scaleY(.34); }.ring-a:after { content:"";position:absolute;width:10px;height:10px;background:var(--acid);border:1px solid;border-radius:50%;right:7px;top:26px; }.ring-b { inset:5px;transform:rotate(42deg) scaleY(.52);border-color:#b4b6ae; }.satellite { position:absolute;width:4px;height:4px;background:var(--ink);left:34px;top:82px;border-radius:50%; }
.controls { display:flex; align-items:center; justify-content:space-between; padding:26px 0;border-bottom:1px solid var(--line);gap:20px; }.topics { display:flex;gap:8px;flex-wrap:wrap; }.topics button,.language button { font:500 12px "Noto Sans JP",sans-serif;border:1px solid #bfc1b8;background:transparent;padding:10px 17px;border-radius:99px;cursor:pointer;transition:.2s; }.topics button:hover,.topics button.active { color:var(--paper);background:var(--ink);border-color:var(--ink); }.language { display:flex; }.language button { border-radius:0;margin-left:-1px;font:500 10px DM Mono;letter-spacing:.08em;padding:10px 12px; }.language button:first-child { border-radius:5px 0 0 5px; }.language button:last-child{border-radius:0 5px 5px 0}.language button.active{background:var(--acid);position:relative;z-index:1;border-color:var(--ink)}
.feed-head { padding:43px 0 22px; display:flex;justify-content:space-between;align-items:end; }.feed-head>div{display:flex;align-items:center;gap:16px}.section-index{font:400 11px DM Mono;color:#7d8178;border:1px solid #bfc1b8;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.feed-head h2{font:600 18px Manrope;letter-spacing:.08em;margin:0}.feed-head>span{color:var(--muted)}
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--line); }.card { min-height:280px;padding:24px 26px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:background .2s; }.card:hover { background:#e8e7dd; }.card-meta { display:flex;justify-content:space-between;align-items:center;font:500 10px DM Mono;letter-spacing:.07em;color:#666b62 }.tag{color:#31352e}.tag:before{content:"";display:inline-block;width:6px;height:6px;background:var(--acid);border:1px solid var(--ink);border-radius:50%;margin-right:8px}.card h3{font-size:20px;line-height:1.5;letter-spacing:-.02em;margin:24px 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:12px}.source{font-size:11px;font-weight:600;color:#666b62}.card a{width:35px;height:35px;flex:0 0 auto;border:1px solid #afb2a9;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:inherit;font-size:16px;transition:.2s}.card:hover a{background:var(--ink);color:var(--acid);transform:rotate(-35deg)}.skeleton{background:linear-gradient(90deg,#e5e4dc 25%,#efeee7 50%,#e5e4dc 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;min-height:280px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}@keyframes shimmer{to{background-position:-200% 0}}
.empty{grid-column:1/-1;padding:70px;text-align:center;color:var(--muted)}.load-more{display:block;margin:35px auto 70px;border:1px solid var(--ink);background:transparent;padding:13px 22px;border-radius:99px;font:500 10px DM Mono;letter-spacing:.1em;cursor:pointer}.load-more:hover{background:var(--acid)}.load-more span{margin-left:18px}
footer{border-top:1px solid var(--line);padding:28px 4vw;display:flex;justify-content:space-between;color:#73776e}
@media(max-width:900px){.orbit-art{opacity:.18;right:-80px}.news-grid{grid-template-columns:repeat(2,1fr)}.controls{align-items:flex-start;flex-direction:column}.hero{min-height:470px}.hero h1{font-size:clamp(52px,12vw,90px)}}
@media(max-width:600px){header{height:66px}.live{display:none}.hero{padding-top:52px;min-height:430px}.hero h1{font-size:52px;line-height:.93}.hero p{font-size:13px}.desktop{display:none}.news-grid{grid-template-columns:1fr}.card{min-height:240px}.feed-head>span{display:none}.language{align-self:stretch}.language button{flex:1}.topics{gap:6px}.topics button{font-size:11px;padding:8px 13px}footer{gap:16px;flex-direction:column}.orbit-art{width:220px;height:220px;top:36%;right:-75px}.planet{transform:scale(.7)}}