/* AUTO-GENERATED from u/index.html by scripts/prerender-submissions.mjs. Do not edit directly. */

    :root{
      --bg:#f6f8fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --brand:#2563eb;
      --danger:#dc2626;
      --shadow: 0 10px 25px rgba(15,23,42,.08);
      --radius: 16px;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:var(--bg);
    }
    header{
      padding:18px 16px 10px;
      text-align:center;
    }
    header a{ color:inherit; text-decoration:none; }
    header .brand{ display:inline-block; font-size:18px; font-weight:800; letter-spacing:.4px; }
    header p{ margin:6px 0 0; color:var(--muted); font-size:12px; }
    main{ max-width:1060px; margin:0 auto; padding:10px 16px 40px; }
    .wrap{ display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; }
    .wrap > *{ min-width: 0; }
    @media (max-width: 900px){ .wrap{ grid-template-columns: 1fr; } }
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:14px;
    }
    .title{ margin:0; font-size:18px; font-weight:800; line-height:1.25; }
    .muted{ color:var(--muted); font-size:12px; }
    .tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
    .tag{
      font-size:12px;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.35);
      background:rgba(255,255,255,.8);
    }
    .tag.heroBadge{ display:inline-flex; align-items:center; gap:5px; background:rgba(239,246,255,.95); border-color:rgba(37,99,235,.22); }
    .tag.heroBadge.official{ background:rgba(209,250,229,.98); border-color:rgba(5,150,105,.25); }
    .kv{ margin-top:12px; display:grid; grid-template-columns: 160px 1fr; gap:8px 10px; font-size:13px; }
    .kv .k{ color:var(--muted); }
    .techBox{ margin-top:14px; }
    .summaryGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      gap:12px;
    }
    .infoBox{
      border:1px solid rgba(148,163,184,.22);
      border-radius:14px;
      padding:12px;
      background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    }
    .infoBox h3,
    .sideSection h3{
      margin:0 0 8px;
      font-size:14px;
      line-height:1.4;
    }
    .infoList,
    .orderedList{
      margin:0;
      padding-left:18px;
      color:#334155;
      font-size:13px;
      line-height:1.7;
    }
    .infoList li + li,
    .orderedList li + li{ margin-top:4px; }
    .sideSection + .sideSection,
    .sideSection + .divider{ margin-top:14px; }
    .sideStats{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
    .sideActions{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
    .miniList{ display:flex; flex-direction:column; gap:10px; }
    .miniCard{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(148,163,184,.25);
      background:#fff;
      color:inherit;
      text-decoration:none;
      overflow:hidden;
      transition:box-shadow .15s;
    }
    .miniCard:hover{ box-shadow:0 4px 12px rgba(15,23,42,.10); }
    .miniCardThumb{
      width:56px;
      height:56px;
      flex-shrink:0;
      object-fit:cover;
      border-radius:8px;
      background:#f1f5f9;
      display:block;
    }
    .miniCardBody{ flex:1; min-width:0; }
    .miniCardTitle{
      font-size:13px;
      font-weight:700;
      line-height:1.4;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .miniCardMeta{
      margin-top:3px;
      color:var(--muted);
      font-size:11px;
      line-height:1.4;
    }
    .actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .btn{
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 12px;
      background:#fff;
      cursor:pointer;
      font-size:14px;
      text-decoration:none;
      color:inherit;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn.primary{
      background:rgba(37,99,235,.92);
      border-color:rgba(37,99,235,.10);
      color:#fff;
    }
    .btn.danger{
      background:rgba(220,38,38,.95);
      border-color:rgba(220,38,38,.10);
      color:#fff;
    }
    .btn:disabled{ opacity:.55; cursor:not-allowed; }
    pre{
      margin:10px 0 0;
      background:#0b1220;
      color:#e2e8f0;
      padding:12px;
      border-radius:12px;
      overflow:auto;
      max-width:100%;
      max-height:320px;
      font-size:12px;
      line-height:1.4;
      white-space:pre-wrap;
      word-break:break-word;
    }
    details{ margin-top:12px; }
    summary{ cursor:pointer; font-weight:700; }
    .err{
      background:#fff1f2;
      border:1px solid #fecdd3;
      color:#9f1239;
      padding:10px 12px;
      border-radius:12px;
      white-space:pre-wrap;
    }

    /* editor */
    .divider{ height:1px; background:var(--line); margin:14px 0; }
    .editor{ margin-top:12px; display:none; }
    .editor .row{ display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center; margin-top:10px; }
    @media (max-width: 700px){ .editor .row{ grid-template-columns: 1fr; } }
    input[type="text"], textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 12px;
      font-size:14px;
      background:#fff;
      color:var(--text);
    }
    textarea{ min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; font-size:12px; }
    .editorActions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
    .note{
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
    }
    .okmsg{
      background:#ecfdf5;
      border:1px solid #a7f3d0;
      color:#065f46;
      padding:10px 12px;
      border-radius:12px;
      white-space:pre-wrap;
      margin-top:10px;
    }

    /* comments */
    .commentsBox{
      margin-top:12px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      background:#fff;
      overflow:hidden;
    }
    .commentsHead{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      background:linear-gradient(180deg, rgba(37,99,235,.05), rgba(22,163,74,.04));
    }
    .commentsHead .ttl{ font-weight:800; }
    .commentsBody{ padding:12px 14px; }
    .commentList{ display:flex; flex-direction:column; gap:10px; }
    .commentItem{
      border:1px solid rgba(148,163,184,.25);
      border-radius:12px;
      padding:10px 12px;
      background:#fff;
    }
    .commentMeta{
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:12px;
      margin-bottom:6px;
    }
    .commentBodyTxt{
      white-space:pre-wrap;
      word-break:break-word;
      font-size:13px;
      line-height:1.5;
    }
    .commentForm{ margin-top:10px; }
    .commentForm textarea{
      width:100%;
      min-height:84px;
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 12px;
      font-size:14px;
      background:#fff;
      color:var(--text);
      resize:vertical;
    }
    .commentActions{ margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .commentPager{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .commentHint{ color:var(--muted); font-size:12px; }

    /* Screenshot gallery */
    .screensGallery{ margin-top:10px; overflow-x:auto; display:flex; gap:8px; padding:4px 0 8px; scrollbar-width:thin; }
    .screensGallery img{ height:82px; width:auto; border-radius:8px; border:2px solid rgba(148,163,184,.25); object-fit:cover; cursor:pointer; flex-shrink:0; transition:border-color .15s; }
    .screensGallery img.ss-active{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.2); }

    /* 3D Preview */
    .preview3dBox{ margin-top:12px; border:1px solid rgba(148,163,184,.25); border-radius:14px; overflow:hidden; background:#fff; }
    .preview3dHeader{ padding:10px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(148,163,184,.15); background:linear-gradient(180deg,rgba(37,99,235,.04),rgba(255,255,255,0)); }
    .preview3dHeader .label{ font-size:13px; font-weight:700; }
    #preview3dFrame{ width:100%; height:300px; max-height:40vh; border:none; display:block; }
    @media(max-width:700px){ #preview3dFrame{ height:240px; } }
    .preview3dLazy{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
    .preview3dLazy p{ margin:0; font-size:13px; color:var(--muted); line-height:1.6; }
    .preview3dLazyActions{ display:flex; gap:8px; flex-wrap:wrap; }
    .preview3dNoJson{ margin-top:10px; padding:12px 14px; border:1px solid rgba(148,163,184,.22); border-radius:12px; background:#f8fafc; font-size:13px; color:var(--muted); }
    /* About this creation */
    .aboutSection{ margin-top:16px; padding:16px 20px; background:#f8fafc; border:1px solid rgba(148,163,184,.22); border-radius:14px; }
    .aboutHeading{ font-size:15px; font-weight:700; color:var(--fg, #0f172a); margin:0 0 10px; }
    .aboutBody{ margin:0; font-size:14px; line-height:1.75; color:var(--fg, #0f172a); white-space:pre-wrap; word-break:break-word; }