/* The flower artwork and six identities come from the current App flower card. */
.ft-showcase { --ft-accent:#5a4c96; --ft-soft:#f0eefa; --ft-rx:0deg; --ft-ry:0deg; --ft-lift:0px; --ft-light:45%; color:#17181c; background:#f7f6f2; }
.ft-showcase[data-tier=daisy] { --ft-accent:#3b6384; --ft-soft:#ecf3f8; }
.ft-showcase[data-tier=tulip] { --ft-accent:#963d57; --ft-soft:#faedf1; }
.ft-showcase[data-tier=iris] { --ft-accent:#5a4c96; --ft-soft:#f0eefa; }
.ft-showcase[data-tier=lilac] { --ft-accent:#7b526f; --ft-soft:#f5eef5; }
.ft-showcase[data-tier=rose] { --ft-accent:#972d43; --ft-soft:#f9ecef; }
.ft-showcase[data-tier=wisteria] { --ft-accent:#655089; --ft-soft:#f2eef8; }
.ft-page { background:var(--paper,#fff9fb); }
.ft-page .ft-showcase { transition:background-color .55s ease; }
.ft-inner { width:min(1080px,calc(100% - 64px)); margin:auto; padding:36px 0 28px; }
.ft-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:12px; }
.ft-heading :is(h1,h2) { margin:0; font-size:clamp(28px,3.3vw,38px); font-weight:750; letter-spacing:-.035em; line-height:1.3; }
.ft-heading :is(h1,h2) span { display:block; }
.ft-heading p { max-width:340px; font-size:15px; line-height:1.8; margin:0 0 3px; }
.ft-deck { position:relative; perspective:1200px; padding:48px 9%; }
.ft-card { position:relative; width:100%; max-width:480px; margin:24px auto 48px; aspect-ratio:16/9; }
.ft-showcase:not(.ft-ready) .ft-card { aspect-ratio:auto; }
.ft-showcase:not(.ft-ready) .ft-front { height:auto; aspect-ratio:16/9; }
.ft-tilt { position:relative; height:100%; transform-style:preserve-3d; touch-action:pan-y; border-radius:20px; }
.ft-turn { position:relative; height:100%; transform-style:preserve-3d; border-radius:20px; }
.ft-front { height:100%; position:relative; overflow:hidden; border-radius:20px; background:var(--ft-card-soft,var(--ft-soft)); box-shadow:0 24px 44px -20px #25223855; }
.ft-art { width:100%; height:100%; object-fit:cover; object-position:center right; display:block; }
.ft-front::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ft-card-soft,var(--ft-soft)) 0%,color-mix(in srgb,var(--ft-card-soft,var(--ft-soft)) 58%,transparent) 22%,transparent 57%); pointer-events:none; }
.ft-card[data-flower-card=daisy] { --ft-card-soft:#ecf3f8; }
.ft-card[data-flower-card=tulip] { --ft-card-soft:#faedf1; }
.ft-card[data-flower-card=iris] { --ft-card-soft:#f0eefa; }
.ft-card[data-flower-card=lilac] { --ft-card-soft:#f5eef5; }
.ft-card[data-flower-card=rose] { --ft-card-soft:#f9ecef; }
.ft-card[data-flower-card=wisteria] { --ft-card-soft:#f2eef8; }
.ft-card[data-flower-card=lilac] .ft-art,.ft-card[data-flower-card=wisteria] .ft-art { position:absolute; right:0; width:54%; object-position:center; }
.ft-card[data-flower-card=lilac] .ft-art,.ft-card[data-flower-card=wisteria] .ft-art { mask-image:linear-gradient(90deg,transparent,#000 18%); }
.ft-card[data-flower-card=lilac] .ft-front { background:#f5eef5; }
.ft-card[data-flower-card=wisteria] .ft-front { background:#f2eef8; }
.ft-card[data-flower-card=daisy],.ft-card[data-flower-card=iris],.ft-card[data-flower-card=rose] { --ft-name-color:#fff; }
.ft-card[data-flower-card=tulip],.ft-card[data-flower-card=lilac],.ft-card[data-flower-card=wisteria] { --ft-name-color:#17181c; }
.ft-card[data-flower-card=daisy] .ft-front::before,.ft-card[data-flower-card=iris] .ft-front::before,.ft-card[data-flower-card=rose] .ft-front::before { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(0deg,#0e1424e0,transparent); z-index:2; pointer-events:none; }
.ft-card-brand { position:absolute; left:5.5%; top:8%; z-index:3; font-size:clamp(18px,2.3vw,26px); font-weight:400; color:#17181c; line-height:1.2; }
.ft-card-id { position:absolute; right:5.5%; top:8%; z-index:3; font-size:12px; letter-spacing:.08em; color:#343a45; text-align:right; line-height:1.5; }
.ft-card[data-flower-card=rose] .ft-card-id { background:#fff; padding:5px 8px; border-radius:6px; }
.ft-card-name { position:absolute; bottom:12%; left:5.5%; z-index:4; color:var(--ft-name-color); }
.ft-card-name span { display:block; font-size:14px; margin-bottom:8px; }
.ft-card-name h2,.ft-card-name h3 { color:inherit; margin:0; font-family:'NailFit Syne','NailFit Sans',sans-serif; font-size:clamp(28px,3.4vw,40px); letter-spacing:-.025em; font-weight:600; line-height:1; }
.ft-lustre { position:absolute; z-index:3; inset:0; border-radius:20px; pointer-events:none; background:linear-gradient(115deg,transparent 28%,#83cbff25 37%,#d7d0c535 42%,#ffe4ac30 46%,#ffffff50 49%,transparent 58%); background-size:250% 100%; background-position:var(--ft-light) 50%; opacity:.5; }
.ft-edge { position:absolute; inset:0; z-index:5; border-radius:20px; box-shadow:inset 0 1px 0 #ffffffcc,inset -1px -1px 0 #ffffff55; pointer-events:none; }
.ft-back { border-radius:20px; background:#17181c; color:#fff; padding:30px; box-sizing:border-box; margin-top:24px; }
.ft-back h3 { color:#fff; font-family:'NailFit Syne','NailFit Sans',sans-serif; font-size:32px; line-height:1.1; margin:0 0 10px; }
.ft-back p { color:#e9e8ed; font-size:16px; line-height:1.65; margin:6px 0; }
.ft-back .ft-back-purpose { color:#fff; font-size:18px; font-weight:500; }
.ft-ready .ft-deck { height:344px; padding:0; overflow:hidden; }
.ft-ready .ft-card { position:absolute; width:61%; max-width:480px; margin:0; top:50%; left:50%; z-index:0; transform:translate(-50%,-50%) scale(.65) translateZ(-100px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .45s ease; }
.ft-ready .ft-card[data-place=current] { z-index:3; transform:translate(-50%,-50%); opacity:1; visibility:visible; pointer-events:auto; }
.ft-ready .ft-card[data-place=previous] { z-index:1; transform:translate(-100%,-50%) rotateY(22deg) scale(.78) translateZ(-70px); opacity:.58; visibility:visible; }
.ft-ready .ft-card[data-place=next] { z-index:1; transform:translate(0%,-50%) rotateY(-22deg) scale(.78) translateZ(-70px); opacity:.58; visibility:visible; }
.ft-ready .ft-tilt { transform:translateY(var(--ft-lift)) rotateX(var(--ft-rx)) rotateY(var(--ft-ry)); transition:transform .12s ease-out; cursor:grab; }
.ft-ready .ft-tilt:active { cursor:grabbing; }
.ft-ready .ft-card:not([data-place=current]) .ft-tilt { transform:none; }
.ft-ready .ft-turn { transition:transform .65s cubic-bezier(.16,1,.3,1); }
.ft-ready .ft-card.is-flipped .ft-turn { transform:rotateY(180deg); }
.ft-ready .ft-front,.ft-ready .ft-back { position:absolute; width:100%; height:100%; inset:0; margin:0; backface-visibility:hidden; }
.ft-ready .ft-back { transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; padding:6%; }
.ft-ready .ft-card.is-loading .ft-art { opacity:.2; }
.ft-ready .ft-card.is-error .ft-lustre { display:none; }
.ft-card-error { position:absolute; inset:30% 8% auto; z-index:6; color:#17181c; background:#fff; padding:14px 18px; border-radius:12px; font-size:14px; line-height:1.6; }
.ft-card-error[hidden] { display:none; }
.ft-card-error button { padding:7px 14px; background:#17181c; color:#fff; border:0; border-radius:8px; font:inherit; min-height:44px; }
.ft-rail { display:flex; justify-content:center; gap:4px; margin:0 auto 20px; }
.ft-rail a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-decoration:none; color:#53525d; padding:13px 17px; min-height:44px; box-sizing:border-box; border-radius:12px; font-size:13px; font-weight:600; transition:background-color .2s,color .2s; }
.ft-rail a span { font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
.ft-rail a:hover { color:#17181c; background:#ffffff80; }
.ft-rail a[aria-pressed=true] { color:#fff; background:var(--accent,#994867); }
.ft-controls { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.ft-controls button { font:inherit; font-size:14px; font-weight:500; color:#17181c; min-height:44px; padding:10px 18px; border:1px solid #bab8c4; border-radius:12px; background:transparent; cursor:pointer; transition:background-color .2s; }
.ft-controls button:hover { background:#ffffffb0; }
.ft-controls button:disabled { cursor:default; opacity:.65; }
.ft-controls p { color:#53525d; font-size:13px; margin:0; line-height:1.7; }
.ft-status { min-height:24px; margin:20px auto 0; text-align:center; font-size:13px; color:#53525d; line-height:1.7; }
.ft-note { text-align:center; margin:6px auto 0; max-width:660px; font-size:13px; line-height:1.8; color:#53525d; }
.ft-showcase a:focus-visible,.ft-showcase button:focus-visible,.ft-tilt:focus-visible { outline:3px solid var(--ft-accent); outline-offset:5px; }
.ft-relations { width:min(960px,calc(100% - 64px)); margin:0 auto; padding:48px 0; }
.ft-relations h2 { font-size:clamp(24px,2.8vw,32px); line-height:1.25; letter-spacing:-.025em; margin:0 0 36px; font-weight:750; }
.ft-relation-row { display:grid; grid-template-columns:180px 1fr; gap:32px; padding:25px 0; border-top:1px solid #d7d7d0; }
.ft-relation-row h3 { margin:0; font-size:18px; font-weight:600; }
.ft-relation-row p { margin:0; font-size:14px; line-height:1.8; max-width:680px; }
.ft-service-intro { max-width:700px; font-size:15px; line-height:1.8; margin:-15px 0 30px; color:#53525d; }
.ft-service { border-top:1px solid #d7d7d0; }
.ft-service summary { cursor:pointer; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:16px; font-weight:500; list-style:none; }
.ft-service summary::-webkit-details-marker { display:none; }
.ft-service summary::after { content:""; border-right:2px solid currentColor; border-bottom:2px solid currentColor; width:8px; height:8px; transform:rotate(45deg); margin-right:5px; transition:transform .2s; }
.ft-service[open] summary::after { transform:rotate(225deg); }
.ft-service p { max-width:720px; font-size:14px; line-height:1.8; margin:0 0 25px; }
.ft-service summary:focus-visible { outline:3px solid #5a4c96; outline-offset:3px; }
.ft-services { padding-bottom:0; }
.ft-bottom-links { display:flex; align-items:center; gap:32px; margin:40px 0 0; flex-wrap:wrap; }
.ft-source-links { margin-top:28px; }
.ft-source-links summary { min-height:44px; cursor:pointer; color:#53525d; font-size:14px; display:flex; align-items:center; }
.ft-source-links a { display:inline-flex; min-height:44px; align-items:center; margin-right:22px; color:#5a4c96; font-size:14px; }
.ft-entry-link { display:inline-flex; gap:12px; align-items:center; min-height:44px; color:#994867; font-size:15px; text-decoration:underline; text-underline-offset:5px; margin:12px 0; }
.ft-entry-section { padding-top:44px; padding-bottom:44px; }
.ft-entry-section h2 { font-size:clamp(24px,2.8vw,34px); letter-spacing:-.035em; line-height:1.2; margin:0 0 20px; font-weight:750; }
.ft-entry-copy p { max-width:680px; font-size:14px; line-height:1.8; }
@media(max-width:900px) { .ft-inner { width:calc(100% - 40px); padding-top:28px; } .ft-heading { gap:24px; } .ft-heading h1 { font-size:36px; } .ft-heading p { max-width:270px; font-size:14px; } .ft-ready .ft-deck { height:320px; } .ft-ready .ft-card { width:74%; } .ft-rail a { padding:12px; font-size:12px; } }
@media(max-width:600px) { .ft-heading { display:block; } .ft-heading h1 { font-size:clamp(28px,7.8vw,32px); } .ft-heading p { max-width:100%; margin-top:18px; font-size:14px; } .ft-ready .ft-deck { height:228px; margin:0 -8px; } .ft-ready .ft-card { width:88%; } .ft-ready .ft-card[data-place=previous],.ft-ready .ft-card[data-place=next] { opacity:0; visibility:hidden; } .ft-card-brand { font-size:18px; } .ft-card-id { font-size:11px; } .ft-card-name h2,.ft-card-name h3 { font-size:30px; } .ft-card-name span { font-size:12px; margin-bottom:5px; } .ft-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:20px; } .ft-rail a { padding:10px; min-height:55px; gap:4px; } .ft-controls { gap:8px; } .ft-controls p { width:100%; text-align:center; margin-top:10px; } .ft-status { margin-top:16px; } .ft-note { margin-top:8px; font-size:12px; } .ft-inner { padding-bottom:30px; } .ft-back h3 { font-size:22px; margin-bottom:2px; } .ft-back p,.ft-back .ft-back-purpose { font-size:13px; line-height:1.4; margin:2px 0; } .ft-relations { width:calc(100% - 40px); padding:52px 0; } .ft-relation-row { grid-template-columns:1fr; gap:8px; padding:20px 0; } .ft-card-error { inset:25% 7% auto; padding:8px 12px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .ft-showcase,.ft-showcase * { transition:none!important; scroll-behavior:auto!important; } .ft-ready .ft-tilt,.ft-ready .ft-card.is-flipped .ft-turn { transform:none!important; } .ft-lustre { display:none; } .ft-ready .ft-back { transform:none; visibility:hidden; } .ft-ready .ft-card.is-flipped .ft-back { visibility:visible; } .ft-ready .ft-card.is-flipped .ft-front { visibility:hidden; } }
.ft-showcase.ft-still .ft-tilt { transform:none; }
.ft-showcase.ft-still .ft-lustre { display:none; }
/* Keep the existing 3D deck intact; bring its selection and controls together. */
.ft-display{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:center;margin-top:20px}
.ft-display-stage{min-width:0}
.ft-display-guide .ft-rail{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 16px}
.ft-display-guide .ft-rail a{flex-direction:row;justify-content:space-between;border-radius:6px;padding:9px 12px;min-height:44px;font-size:13px}
.ft-display-guide .ft-status,.ft-display-guide .ft-note{text-align:left;margin-top:12px;font-size:12px}
.ft-display-stage .ft-controls{justify-content:center;gap:12px}
.ft-help summary{min-height:44px;display:flex;align-items:center;font-size:12px;cursor:pointer;color:#53525d}
.ft-help p{max-width:260px;font-size:12px}
.ft-heading h1{font-size:36px;line-height:1.35}.ft-heading p{font-size:14px}
.ft-ready .ft-display .ft-card{width:78%}
.ft-relations{width:min(1080px,calc(100% - 64px));padding-block:40px}
.ft-relations h2{font-size:28px;line-height:1.45;margin-bottom:24px}
@media(max-width:767px){
 .ft-display{grid-template-columns:1fr;gap:16px;margin-top:12px}.ft-heading{display:block}.ft-heading h1{font-size:29px}.ft-heading p{margin-top:14px;max-width:100%}.ft-ready .ft-display .ft-deck{height:220px}.ft-ready .ft-display .ft-card{width:90%}.ft-display-guide .ft-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:12px}.ft-display-guide .ft-rail a{flex-direction:column;justify-content:center;font-size:11px;gap:4px;padding:8px 4px;min-height:48px}.ft-display-guide .ft-rail a span{font-size:11px}.ft-display-stage .ft-controls button{font-size:12px;padding:10px 12px}.ft-display-stage .ft-controls{gap:12px}.ft-display-guide .ft-status{margin-top:8px}.ft-display-guide .ft-note{margin-top:4px}.ft-relations{width:calc(100% - 40px);padding-block:36px}.ft-relations h2{font-size:24px}.ft-relation-row{grid-template-columns:1fr;gap:8px;padding-block:20px}.ft-help p{margin:10px 0 0;text-align:left}.ft-help[open]{width:100%;padding:0 4px}
}