/* Your Snowflake - midwinter blue, ice-white flakes, a window frame for the shared view. */

.sf {
    --sf-bg1: #12284d; --sf-bg2: #050912; --sf-ink: #eef6ff; --sf-dim: rgba(225, 238, 255, .76);
    --sf-ice: #a9d4ff; --sf-line: rgba(169, 212, 255, .25);
    position: relative;
    background: radial-gradient(120% 90% at 30% 15%, var(--sf-bg1) 0%, var(--sf-bg2) 100%);
    color: var(--sf-ink);
    overflow: hidden;
    isolation: isolate;
}
.sf .fx-eyebrow { color: var(--sf-ice); }
.sf .fx-btn--primary, .sf a.fx-btn--primary, .sf a.fx-btn--primary:visited { background: linear-gradient(180deg, #ffffff, #bfe0ff); color: #0b1a33; border-color: transparent; }
.sf a.fx-btn, .sf a.fx-btn:visited { color: var(--sf-ink); }
.sf .fx-input { border-color: var(--sf-line); }
.sf .fx-input:focus { border-color: var(--sf-ice); }

.sf-title { font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.12; margin: .3rem 0 .7rem; font-weight: 600; }
.sf-title em { font-style: normal; color: var(--sf-ice); }
.sf-lede { color: var(--sf-dim); margin: 0 0 1.1rem; font-size: 1.04rem; }
.sf-small { color: var(--sf-dim); font-size: .88rem; margin: .2rem 0 .4rem; }
.sf-h2 { font-size: 1.3rem; margin: 0 0 .3rem; outline: none; }
.sf-note { margin: 1.4rem 0 0; font-size: .84rem; color: var(--sf-dim); }
.sf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0 0; }
.sf-share { margin-top: 1rem; padding: 14px 16px; border-radius: 16px; background: rgba(169, 212, 255, .08); border: 1px solid var(--sf-line); }
.sf-brand { position: absolute; right: 14px; top: 12px; z-index: 3; font: 700 .78rem/1 var(--fx-ui); letter-spacing: .04em; color: var(--sf-dim); text-decoration: none; }

/* --- studio */
.sf--studio { display: grid; grid-template-columns: 1fr; border-radius: 22px; margin: 0 0 22px; box-shadow: 0 30px 60px -30px rgba(10, 10, 30, .6); }
.sf-stage { display: flex; align-items: center; justify-content: center; padding: 22px 16px 8px; }
.sf-frame { width: 100%; max-width: 440px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }
.sf-frame--square { aspect-ratio: 1 / 1; }
.sf-frame--story { aspect-ratio: 9 / 16; max-width: 300px; }
.sf-frame .sf-canvas { display: block; width: 100%; height: 100%; }
.sf--studio .sf-panel { padding: 8px 20px 26px; }
.sf-group { margin-top: .9rem; }
.sf-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--sf-line); }
.sf-seg button { min-height: 44px; padding: .4rem 1rem; border-radius: 999px; border: 0; background: transparent; color: var(--sf-dim); font: 600 .9rem var(--fx-ui); cursor: pointer; }
.sf-seg button[aria-checked="true"] { background: rgba(169, 212, 255, .2); color: var(--sf-ink); }
.sf-seg button:focus-visible { outline: 2px solid var(--sf-ice); outline-offset: 2px; }
@media (min-width: 900px) {
    .sf--studio { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
    .sf--studio .sf-stage { position: sticky; top: 64px; padding: 36px 8px 36px 36px; }
    .sf--studio .sf-panel { padding: 36px 36px 36px 8px; }
}

/* --- window */
.sf--window { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: minmax(52vh, 1fr) auto; }
.sf-pane { position: relative; margin: 44px 14px 0; border-radius: 16px 16px 0 0; overflow: hidden; border: 10px solid #e9dfcf; border-bottom-width: 14px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), 0 20px 40px -20px rgba(0, 0, 0, .7); }
/* the window's cross bars */
.sf-pane::before, .sf-pane::after { content: ""; position: absolute; background: #e9dfcf; z-index: 2; pointer-events: none; box-shadow: 0 0 8px rgba(0, 0, 0, .35); }
.sf-pane::before { left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; }
.sf-pane::after { top: 50%; left: 0; right: 0; height: 8px; margin-top: -4px; }
.sf-pane .sf-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.sf--window .sf-panel { padding: 18px 20px 30px; max-width: 560px; margin: 0 auto; text-align: center; }
.sf--window .sf-actions { justify-content: center; }
.sf--window .sf-form { text-align: left; }
.sf-names { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sf-names li { padding: 3px 11px; border-radius: 999px; background: rgba(169, 212, 255, .12); border: 1px solid var(--sf-line); font-size: .9rem; }
@media (min-width: 900px) {
    .sf--window { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr; }
    .sf-pane { margin: 40px 0 40px 40px; border-radius: 16px; border-bottom-width: 10px; }
    .sf--window .sf-panel { align-self: center; text-align: left; margin: 0; padding: 36px; }
    .sf--window .sf-actions, .sf-names { justify-content: flex-start; }
}