.html-artifact-row{width:100%}
.html-artifact-card{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(74vw,340px);min-height:118px;padding:18px 20px 17px;text-align:left;
  border:1px solid color-mix(in srgb,var(--theme-b,#8bbfd3) 38%,transparent);border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),color-mix(in srgb,var(--theme-a,#cae8f2) 42%,rgba(255,255,255,.7)));
  color:var(--ink,#34495e);box-shadow:0 14px 34px rgba(41,70,87,.14),inset 0 1px rgba(255,255,255,.9);
  font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,box-shadow .18s ease;
}
.html-artifact-card::before{content:"</>";position:absolute;right:17px;top:14px;width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--theme-b,#8bbfd3) 22%,white);color:color-mix(in srgb,var(--ink,#34495e) 70%,var(--theme-c,#8e6684));font:700 12px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:-.08em}
.html-artifact-card::after{content:"";position:absolute;inset:auto -20px -48px 34%;height:100px;border-radius:50%;background:color-mix(in srgb,var(--theme-b,#8bbfd3) 22%,transparent);filter:blur(20px);z-index:-1}
.html-artifact-card:active{transform:scale(.985)}
.html-artifact-card small,.html-artifact-card span{display:block;color:color-mix(in srgb,var(--ink,#34495e) 52%,transparent)}
.html-artifact-card small{padding-right:48px;font:650 10px/1.3 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}
.html-artifact-card strong{display:block;margin:15px 42px 12px 0;font-size:1.05rem;line-height:1.35;color:inherit}
.html-artifact-card span{font-size:.79rem;letter-spacing:.04em}

.html-artifact-viewer{width:min(94vw,920px);height:min(90dvh,800px);max-width:none;max-height:none;padding:0;border:0;border-radius:24px;background:#f7fafc;color:#304553;box-shadow:0 30px 90px rgba(10,26,40,.38);overflow:hidden}
.html-artifact-viewer::backdrop{background:rgba(10,20,30,.58);backdrop-filter:blur(9px)}
.html-artifact-viewer>section{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
.html-artifact-viewer header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px 12px 18px;border-bottom:1px solid rgba(40,70,90,.13);background:rgba(248,252,254,.96)}
.html-artifact-viewer header div{min-width:0}.html-artifact-viewer header small,.html-artifact-viewer header strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.html-artifact-viewer header small{font:650 9px/1.4 ui-monospace,SFMono-Regular,monospace;letter-spacing:.17em;color:#8495a0}.html-artifact-viewer header strong{margin-top:2px;font-size:.96rem;color:#304553}
.html-artifact-viewer header button{flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;background:#e7f0f4;color:#405967;font:300 27px/1 Arial;cursor:pointer}
.html-artifact-viewer iframe{display:block;width:100%;height:100%;min-height:0;border:0;background:#fff}
.html-artifact-loading{min-height:0;display:grid;place-items:center;background:linear-gradient(145deg,#f7fafc,#eaf3f6);color:#72808c;font-size:.9rem;letter-spacing:.08em}
.html-artifact-loading[hidden],.html-artifact-viewer iframe[hidden]{display:none!important}

.app-shell[data-mode="dark"] .html-artifact-card{background:linear-gradient(145deg,rgba(25,36,48,.95),rgba(43,61,76,.9));color:#d9e7ee;border-color:rgba(160,202,219,.2);box-shadow:0 16px 36px rgba(0,0,0,.28)}
.html-artifact-viewer[data-mode="dark"]{background:#111923;color:#d9e7ee}.html-artifact-viewer[data-mode="dark"] header{background:#17232f;border-color:rgba(180,210,225,.12)}.html-artifact-viewer[data-mode="dark"] header strong{color:#d9e7ee}.html-artifact-viewer[data-mode="dark"] header button{background:#263746;color:#d9e7ee}.html-artifact-viewer[data-mode="dark"] .html-artifact-loading{background:#111923;color:#91a7b5}

.app-shell[data-style="journal"] .html-artifact-card{border-radius:2px;border:1px solid rgba(86,76,61,.34);background:linear-gradient(rgba(250,246,235,.96),rgba(239,231,211,.94)),url("/journal-assets/paper-grain.svg");color:#3f3a31;box-shadow:5px 7px 0 rgba(91,74,55,.08),0 15px 30px rgba(67,55,40,.1);transform:rotate(-.35deg)}
.app-shell[data-style="journal"] .html-artifact-card::before{content:"H5";border-radius:50%;background:#8f5060;color:#fff;font-family:Georgia,serif;letter-spacing:.08em}.app-shell[data-style="journal"] .html-artifact-card small{font-family:Georgia,serif;color:#8f5060}.app-shell[data-style="journal"] .html-artifact-card span{color:#807363}
.html-artifact-viewer[data-style="journal"]{border-radius:2px;background:#eee6d3;color:#403a31;box-shadow:0 28px 80px rgba(52,43,31,.45)}.html-artifact-viewer[data-style="journal"] header{background:linear-gradient(rgba(248,243,230,.98),rgba(235,225,202,.97)),url("/journal-assets/paper-grain.svg");border-bottom:1px solid rgba(90,74,54,.3)}.html-artifact-viewer[data-style="journal"] header small{font-family:Georgia,serif;color:#925769}.html-artifact-viewer[data-style="journal"] header strong{font-family:Georgia,"Noto Serif SC",serif;color:#403a31}.html-artifact-viewer[data-style="journal"] header button{border-radius:1px;background:#ddd0b5;color:#684b54}.html-artifact-viewer[data-style="journal"] .html-artifact-loading{background:#eee6d3;color:#786b59}

.app-shell[data-style="stitch"] .html-artifact-card{border:2px outset #ece5ff;border-radius:0;background:#d9d0ee;color:#241b35;box-shadow:3px 3px 0 #4d3d68;padding:16px 18px;image-rendering:pixelated}.app-shell[data-style="stitch"] .html-artifact-card::before{content:"HTML";width:44px;border:2px inset #eee8ff;border-radius:0;background:#776596;color:#fff;font:700 9px/1 "Courier New",monospace;letter-spacing:0}.app-shell[data-style="stitch"] .html-artifact-card small,.app-shell[data-style="stitch"] .html-artifact-card span{font-family:"Courier New",monospace;color:#5b4c73}.app-shell[data-style="stitch"] .html-artifact-card strong{font-family:"MS Sans Serif",Tahoma,sans-serif}
.html-artifact-viewer[data-style="stitch"]{border:2px outset #efeaff;border-radius:0;background:#c9c0dd;color:#21182f;box-shadow:8px 8px 0 rgba(34,24,48,.55)}.html-artifact-viewer[data-style="stitch"]::backdrop{background:rgba(49,36,66,.58);backdrop-filter:none}.html-artifact-viewer[data-style="stitch"] header{margin:3px;padding:5px 6px;background:linear-gradient(90deg,#4b3478,#a789c5);border:0;color:#fff}.html-artifact-viewer[data-style="stitch"] header small{color:#ded3f3;font-family:"Courier New",monospace}.html-artifact-viewer[data-style="stitch"] header strong{color:#fff;font-family:"MS Sans Serif",Tahoma,sans-serif}.html-artifact-viewer[data-style="stitch"] header button{width:28px;height:26px;flex-basis:28px;border:2px outset #eee8f7;border-radius:0;background:#c9c0dd;color:#21182f;font:bold 20px/1 "MS Sans Serif",sans-serif}.html-artifact-viewer[data-style="stitch"] .html-artifact-loading{margin:0 3px 3px;border:2px inset #eee8f7;background:#fff;color:#4d3d68;font-family:"Courier New",monospace}

@media(max-width:600px){.html-artifact-viewer{width:100vw;height:100dvh;border-radius:0}.html-artifact-viewer header{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.html-artifact-card{width:min(76vw,330px)}}