:root{
  --paper:#f4f6fb;
  --paper2:#e8edf7;
  --ink:#111827;
  --muted:#687189;
  --green:#2447d8;
  --green2:#1735ad;
  --orange:#ff6b45;
  --lime:#c7f36b;
  --white:#ffffff;
  --line:rgba(17,24,39,.12);
  --shadow:0 24px 70px rgba(31,49,99,.14)
}

body{
  background:
    linear-gradient(rgba(36,71,216,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,71,216,.035) 1px,transparent 1px),
    var(--paper);
  background-size:34px 34px;
}

.offline-bar{height:30px;background:#10172b;color:#dfe7ff;letter-spacing:.08em}
.offline-dot{background:#79e0ff;box-shadow:0 0 0 4px rgba(121,224,255,.13)}
.topbar{height:82px;max-width:1240px;border-bottom:0}
.brand{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.03em}
.brand-mark{width:36px;height:36px;border-radius:9px;background:var(--green);transform:none;box-shadow:6px 6px 0 #b6c4ff}
.top-actions button,.top-actions a{border-radius:10px;background:rgba(255,255,255,.76);padding:10px 14px}
.top-actions .news-link{background:#111827;border-color:#111827}

.hero{max-width:1240px;min-height:450px;padding:55px 38px 62px;grid-template-columns:minmax(0,1.35fr) 330px;gap:80px}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--green);letter-spacing:.16em}
.eyebrow:before{border-radius:2px;background:#79e0ff;box-shadow:0 0 0 5px rgba(36,71,216,.08)}
h1,h2{font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
.hero h1{max-width:760px;font-size:clamp(52px,6vw,82px);font-weight:900;line-height:1.03;letter-spacing:-.075em}
.hero h1 em{color:var(--green)}
.hero h1 em:after{height:6px;bottom:-12px;background:linear-gradient(90deg,var(--green),#79e0ff 56%,transparent 56%);opacity:1}
.hero-copy>p.note{max-width:650px;color:#566078;margin-top:32px}
.search{height:64px;border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 #b9c8ff;background:#fff}
.search kbd{background:#edf1ff;border-color:#c8d2f2}
.quick button{border:1px solid rgba(36,71,216,.2);border-radius:999px;background:#edf1ff;color:#2447d8;padding:6px 10px}
.hero-disc{width:310px;height:270px;aspect-ratio:auto;border-radius:30px;background:#2447d8;box-shadow:18px 20px 0 #111827;transform:rotate(1.5deg);overflow:hidden}
.hero-disc:before{inset:16px;border-style:solid;border-radius:20px}
.hero-disc:after{content:"PLAY + WORK";position:absolute;right:-12px;bottom:22px;font:900 11px ui-monospace,monospace;letter-spacing:.18em;transform:rotate(-90deg);opacity:.65}
.hero-disc small{margin-top:58px}
.hero-disc strong{font-family:inherit;font-size:43px;font-weight:900}
.hero-disc span{margin-top:27px;color:var(--green);background:#dff7ff}
.hero-disc .sticker{left:-18px;top:23px;background:var(--lime);border-radius:7px;color:#111827}

.workbench{max-width:1160px;margin-bottom:88px}
.workbench-head{border-bottom:0;padding-bottom:20px}
.workbench-head h2{font-size:36px}
.workbench-grid{gap:14px;border:0}
.desk-card{min-height:190px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 12px 32px rgba(31,49,99,.07)}
.desk-card.accent{background:#dbe4ff;border-color:#bdcafa}
.desk-card small{color:var(--green)}
.desk-card h3{font-family:inherit}
.desk-actions button,.desk-actions a,.recent-chip{border-radius:8px}
.desk-actions .solid{background:var(--green);border-color:var(--green)}

.tools{background:#10172b;color:#f7f9ff;padding-top:72px}
.section-head h2{font-size:48px;font-weight:900}
.kicker{color:#79e0ff}
.filters{padding-bottom:4px}
.filters button{border-radius:9px;background:rgba(255,255,255,.04)}
.filters button.active{background:#79e0ff;border-color:#79e0ff;color:#0f2149}
.catalog-note{border-radius:14px;background:#18223d;border-color:#2b395d}
.catalog-note b{color:#79e0ff}
.tool-grid{grid-template-columns:repeat(3,1fr);gap:12px;border:0}
.tool-card{min-height:142px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:#151f37;overflow:hidden;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.tool-card:hover{background:#1b2948;border-color:#4b66b5;transform:translateY(-3px)}
.tool-open{padding:24px}
.tool-icon{border-radius:13px 13px 13px 4px}
.tool-arrow{font-size:18px}
.status{border-radius:999px;padding:5px 7px}
.status.local{background:#bff163;border-color:#bff163}
.status.browser{background:#79e0ff;border-color:#79e0ff}
.status.online{background:#c6b4ff;border-color:#c6b4ff}

.daily{max-width:1160px}
.date-card{background:#8cb1ff;box-shadow:13px 13px 0 #111827;border-radius:20px}
.date-line{border-color:#111827}
.news-head .kicker{color:var(--green)}
.news-head-actions button,.news-head-actions a{border-radius:8px}
.promise{background:#e6ebf7}
.promise h2{font-weight:900}
.promise-grid{gap:12px;border:0}
.promise-grid article{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.74)}

.modal-bg{background:rgba(8,14,29,.68)}
.modal{width:min(900px,100%);border-radius:24px;box-shadow:0 34px 110px rgba(4,9,24,.46);overflow:auto}
.modal-head{background:rgba(255,255,255,.95)}
.modal-title h2{font-weight:900}
.close{border-radius:10px}
.modal-body{padding:28px}
.primary,.secondary{border-radius:10px}
.primary{background:var(--green)}
.result,.news-editor-help,.big-result{border-radius:12px}
.upload{border-radius:14px}

.suite-panel{display:grid;gap:18px}
.suite-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.suite-toolbar h3{margin:0;font-size:20px}
.suite-toolbar p{margin:3px 0 0;color:var(--muted);font-size:12px}
.suite-tabs{display:flex;gap:6px;flex-wrap:wrap}
.suite-tabs button{border:1px solid var(--line);border-radius:9px;background:#eef2ff;padding:8px 11px;cursor:pointer}
.suite-tabs button.active{background:#111827;color:#fff;border-color:#111827}
.suite-grid{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr);gap:18px}
.suite-card{border:1px solid var(--line);border-radius:16px;background:#f7f9ff;padding:18px}
.suite-card h3{margin:0 0 14px}
.suite-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;color:var(--muted);font-size:12px;font-weight:700}
.suite-card input,.suite-card select,.suite-card textarea{border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px;color:var(--ink)}
.suite-card input[type="color"]{height:43px;padding:4px}
.suite-card input[type="range"]{padding:0;accent-color:var(--green)}
.canvas-shell{display:grid;place-items:center;min-height:300px;border-radius:16px;background:#0e162b;padding:14px;overflow:auto}
.canvas-shell canvas{display:block;max-width:100%;height:auto;border-radius:10px;background:#fff}
.file-list{display:grid;gap:8px}
.file-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff}
.file-row img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.file-row small{display:block;color:var(--muted);margin-top:4px}
.file-row a{color:var(--green);font-weight:800}
.tier-board{display:grid;gap:5px}
.tier-row{display:grid;grid-template-columns:96px 1fr;min-height:92px;border-radius:10px;overflow:hidden;background:#151c2d}
.tier-label{display:grid;place-items:center;padding:8px;text-align:center;font-weight:900;color:#111827}
.tier-drop{display:flex;align-items:center;gap:8px;padding:8px;overflow-x:auto;min-width:0}
.tier-pool{min-height:95px;border:2px dashed #bec8e6;border-radius:12px;display:flex;gap:8px;align-items:center;padding:10px;overflow-x:auto;background:#eef2ff}
.tier-item{width:76px;height:76px;object-fit:cover;border-radius:9px;cursor:grab;flex:none}

.game-shell{display:grid;gap:16px}
.game-head{display:flex;justify-content:space-between;align-items:start;gap:14px;flex-wrap:wrap}
.game-head h3{font-size:28px;margin:0}
.game-head p{max-width:580px;margin:6px 0 0;color:var(--muted);line-height:1.6}
.game-actions{display:flex;gap:8px;flex-wrap:wrap}
.game-actions button{min-height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;cursor:pointer;font-weight:800}
.game-actions .game-primary{background:var(--green);border-color:var(--green);color:#fff}
.game-stage{position:relative;border-radius:18px;background:#0d1426;padding:14px;overflow:hidden}
.game-stage canvas{display:block;width:100%;height:auto;border-radius:10px;background:#0d1426;touch-action:none}
.game-stats{display:flex;gap:9px;flex-wrap:wrap}
.game-stat{min-width:100px;border:1px solid var(--line);border-radius:10px;background:#f1f4fc;padding:9px 12px}
.game-stat small{display:block;color:var(--muted);font-size:10px}.game-stat b{font-size:18px}
.lane-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.lane-buttons button{height:50px;border:0;border-radius:10px;color:#fff;font-weight:900;font-size:17px;cursor:pointer;touch-action:manipulation}
.lane-buttons button:nth-child(1){background:#ff6b45}.lane-buttons button:nth-child(2){background:#3c86ee}.lane-buttons button:nth-child(3){background:#f6b94a;color:#111827}.lane-buttons button:nth-child(4){background:#28b78d}
.game-settings{display:none;border:1px solid var(--line);border-radius:14px;background:#f4f6fb;padding:16px}
.game-settings.open{display:grid;gap:16px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-grid label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px}
.asset-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px}
.asset-row input{max-width:220px}
.game-message{border-radius:12px;background:#e8edff;padding:12px 14px;line-height:1.55}
.dino-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid-2048{width:min(460px,100%);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:10px;border-radius:16px;background:#17213a;touch-action:none}
.tile-2048{display:grid;place-items:center;border-radius:10px;background:#293653;color:#fff;font-size:clamp(21px,5vw,38px);font-weight:900;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tile-2048[data-value="0"]{color:transparent;background:#202b45}.tile-2048[data-value="2"]{background:#dfe7ff;color:#17213a}.tile-2048[data-value="4"]{background:#b8cafc;color:#17213a}.tile-2048[data-value="8"]{background:#79e0ff;color:#102036}.tile-2048[data-value="16"]{background:#c7f36b;color:#17213a}.tile-2048[data-value="32"]{background:#ffd36e;color:#17213a}.tile-2048[data-value="64"]{background:#ff9b63}.tile-2048[data-value="128"]{background:#ff6b45}.tile-2048[data-value="256"]{background:#bd74f4}.tile-2048[data-value="512"]{background:#7c5ce1}.tile-2048[data-value="1024"]{background:#4165e6}.tile-2048[data-value="2048"]{background:#2447d8;box-shadow:0 0 28px rgba(36,71,216,.6)}

@media(max-width:880px){
  .hero{grid-template-columns:1fr 260px;gap:30px}.hero-disc{width:250px;height:235px}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .suite-grid{grid-template-columns:1fr}
}
@media(max-width:660px){
  .hero{padding-top:42px}.hero h1{font-size:clamp(44px,13vw,62px)}.hero-disc{width:100%;height:210px;border-radius:22px;box-shadow:8px 10px 0 #111827}.hero-disc small{margin-top:45px}
  .tool-grid{grid-template-columns:1fr;gap:9px}.tool-card{min-height:118px}.tool-open{padding:18px}
  .modal{border-radius:20px 20px 0 0}.modal-body{padding:18px}
  .settings-grid{grid-template-columns:1fr}.tier-row{grid-template-columns:76px 1fr}.tier-item{width:66px;height:66px}
  .game-head h3{font-size:24px}.lane-buttons button{height:56px}
}